vue + typespript + webpack

Posted 2020-11-25 AllenXT

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 优化

1. 安装插件 babel-plugin-lodash:

npm install --save-dev babel-plugin-lodash  @babel/preset-env
# or
yarn add babel-plugin-lodash  @babel/preset-env -D

1. .babelrc or babel.config.js 配置

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