vue + typespript + webpack
介绍
本项目主要是基于 vue + typespript + webpack 搭建。
起步
1. 安装
npm install -g @vue/cli
# or
yarn global add @vue/cli
2. 创建项目
安装的时候要自定义配置,选择typescript相关
3. 集成开发环境
强烈建议使用 VSCode,不要问为什么,用就对了!
依赖
以下是主要依赖,完整依赖请查看[package.json]:
- vue 2.6+
- typescript 3.5+
- vue-cli 3.x
- vue-router 3.x
- vuex 3.x
- vue-class-component
- vue-property-decorator
- vuex-class
- webpack 4.x
- lodash 4.x
- eslint
- less
依赖介绍
1. core-js
JavaScript的模块化标准库。包括ECMAScript到2019年的polyfills:promises, symbols, collections, iterators, typed arrays许多其他功能、ECMAScript proposals、一些跨平台的WHATWG / W3C功能和建议,比如URL。您可以只加载所需的特性,或者使用它而不污染全局名称空间。
2. vue-class-component
vue-class-component 是vue作者尤大推出的一个支持使用class方式来开发vue单文件组件的库.
示例:
import Vue from 'vue'
import Component from 'vue-class-component'
// @Component 修饰符注明了此类为一个 Vue 组件
@Component({
// 所有的组件选项都可以放在这里
template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
// 初始数据可以直接声明为实例的属性
message: string = 'Hello!'
// 组件方法也可以直接声明为实例的方法
onClick (): void {
window.alert(this.message)
}
}
3. vue-property-decorator
vue-property-decorator 依赖于vue-class-component并且扩展了其他功能,如下:
- @Prop
- @PropSync
- @Model
- @Watch
- @Provide
- @Inject
- @ProvideReactive
- @InjectReactive
- @Emit
- @Ref
- @Component (provided by vue-class-component)
- Mixins (the helper function named mixins provided by vue-class-component)
4. vuex-class
vuex-class Binding helpers for Vuex and vue-class-component.
5. lodash + webpack
一个优秀的工具库。
- 安装
npm install lodash @types/lodash
# or
yarn add lodash @types/lodash
- 结合 webpack 优化
- 安装插件 babel-plugin-lodash:
npm install --save-dev babel-plugin-lodash @babel/preset-env
# or
yarn add babel-plugin-lodash @babel/preset-env -D
.babelrc
orbabel.config.js
配置
{
"plugins": ["lodash"],
"presets": [["@babel/preset-env"]]
}
原文地址:https://www.cnblogs.com/allenxt/p/12241946.html
时间: 2024-11-09 09:47:28