vue + typespript + webpack

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
  • typescript-eslint
  • vue-eslint
• less
• stylelint
• vue-i18n

依赖介绍

1. 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)
  }
}

更多示例在这里.

2. 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)

@Prop 示例:

import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
  @Prop(Number) readonly propA: number | undefined
  @Prop({ default: 'default value' }) readonly propB!: string
  @Prop([String, Boolean]) readonly propC: string | boolean | undefined
}

相当于:

export default {
  props: {
    propA: {
      type: Number
    },
    propB: {
      default: 'default value'
    },
    propC: {
      type: [String, Boolean]
    }
  }
}

更多示例在这里.

3. vuex-class

vuex-class is binding helpers for Vuex and vue-class-component.

示例:

import Vue from 'vue'
import Component from 'vue-class-component'
import {
  State,
  Getter,
  Action,
  Mutation,
  namespace
} from 'vuex-class'

const someModule = namespace('path/to/module')

@Component
export class MyComp extends Vue {
  @State('foo') stateFoo
  @State(state => state.bar) stateBar
  @Getter('foo') getterFoo
  @Action('foo') actionFoo
  @Mutation('foo') mutationFoo
  @someModule.Getter('foo') moduleGetterFoo

  // If the argument is omitted, use the property name
  // for each state/getter/action/mutation type
  @State foo
  @Getter bar
  @Action baz
  @Mutation qux

  created () {
    this.stateFoo // -> store.state.foo
    this.stateBar // -> store.state.bar
    this.getterFoo // -> store.getters.foo
    this.actionFoo({ value: true }) // -> store.dispatch('foo', { value: true })
    this.mutationFoo({ value: true }) // -> store.commit('foo', { value: true })
    this.moduleGetterFoo // -> store.getters['path/to/module/foo']
  }
}

4. lodash

lodash 一个优秀的JavaScript工具库。

• 安装

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

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

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

5. vue-i18n

Vue I18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。

示例:

// 如果使用模块系统 (例如通过 vue-cli)，则需要导入 Vue 和 VueI18n ，然后调用 Vue.use(VueI18n)。
// import Vue from 'vue'
// import VueI18n from 'vue-i18n'
//
// Vue.use(VueI18n)

// 准备翻译的语言环境信息
const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}

// 通过选项创建 VueI18n 实例
const i18n = new VueI18n({
  locale: 'ja', // 设置地区
  messages, // 设置地区信息
})


// 通过 `i18n` 选项创建 Vue 实例
new Vue({ i18n }).$mount('#app')

// 现在应用程序已经准备好了！

输出如下:

<div id="#app">
  <p>こんにちは、世界</p>
</div>