标签：

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 TypeScript撑持

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 or babel.config.js 配置

{ "plugins": ["lodash"], "presets": [["@babel/preset-env"]] }

vue + typespript + webpack