Vue-cli3+Typescript+Element搭建项目

由于vue3.0已经发布beta版本，vue3.0将会支持typescript,加上之前angular2.0已经支持typescript。纵观几个框架，TS已经是一个趋势。能够熟练掌握TS并可以应用到项目中去，就可以成为前端开发中的优势。因为vue2.0对TS不太友好，所以就一直搁置没有去重构。vue3.0在休息时间也准备重构一下自己得项目，在实践中不断摸坑。

1.使用vue-cli快速搭建项目

本人工作项目中使用得vue-cli3,所以打算用vue-cli3脚手架来搭建整个项目，与vue-cli2不同的是webpack集成到vue.config.js里面了，所以还是比较方便得，当然萝卜白菜各有所爱，完全看自己的喜欢怎么舒服怎么来了。
1.初始化项目以及配置项


安装相对应得配置项

然后等待自动安装，等到搭建完之后，大致框架结构就是这样。

2.目录文件说明

* public: 静态资源文件
* node_modules: 安装的依赖
* src：项目源码
   - api: 存放所有的api请求，按照模块编写，入口文件为`index.js`
   - assets:静态文件目录
   - components:公共组件目录，目标命名为大驼峰，自动注册
   - store:vuex目录 
   - router:项目主路由
   - views:项目html文件
   - App.vue: 页面入口
   - main.ts: 脚本入口
   - shims-tsx.d.ts: 相关tsx模块注入
   - shims-vue.d.ts: Vue 模块注入
* .env.development：开发环境变量文件
* .env.production：生产环境变量文件
* .env.test：测试环境变量文件
* babel-config.js: babel配置
* package.json: 依赖
* tsconfig.json: ts依赖
* vue.config.js:项目webpack集成配置文件 （自己创建 ）

项目中vue.config.js文件 借鉴大佬的vueconfig.js配置

const path = require('path')

function resolve(dir) {
   return path.join(__dirname, dir)
}

const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
const isPro = process.env.NODE_ENV === 'production';
module.export = {
   publicPath: "./",//公共路径
   outputDir: 'dist',//打包输出文件目录
   productionSourceMap: false,
   lintOnSave: false,//
   devServer: {
       overlay: {
           warning: false,
           errors: false
       },
       // port: PORT, //端口号
       https: false,
       hotOnly: false,
       proxy: { // 配置跨域
           '/api': {
               //要访问的跨域的api的域名
               target: `${DEV_URL}/`,
               ws: true,
               secure: false,
               changOrigin: true,
               pathRewrite: {
                   '^/api': ''
               }
           }
       },
   },
   chainWebpack: () => { },
   configureWebpack:config=>{
       config.resolve = {
           extensions: ['.js', '.vue', '.json', ".css"],
           alias: {
               'vue$': 'vue/dist/vue.esm.js',
               '@': resolve('src'),
               "assets": resolve('src/assets')
           }
       }
       if (isPro) {
           return {
               plugins: [
                   //使用包分析工具
                   new BundleAnalyzerPlugin()
               ]
           }
       }
       if (process.env.NODE_ENV === 'production') {
           config.plugins.push(
               new CompressionWebpackPlugin({
                   filename: '[path].gz[query]',
                   algorithm: 'gzip',
                   test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), //匹配文件名
                   threshold: 10240, //对10K以上的数据进行压缩
                   minRatio: 0.8,
                   deleteOriginalAssets: false, //是否删除源文件
               }),
           )
       }
   },
   pluginOptions: {
       // ...第三方插件
   }


}

接下来就cd到当前目录，执行yarn serve 或者npm run serve

然后安装UI框架

cnpm i element-ui -S

由于本项目使用的组件不多，为了优化，采用按需加载

cnpm install babel-plugin-component -D

安装完后修改babel.config.js

module.exports = {
  // presets: [
  //   '@vue/cli-plugin-babel/preset'
  // ]
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

可以新建plugin 在main.ts引用插件
接下里就完善一下项目的结构
Route目录（ 安装进度条）

 cnpm install --save nprogress 
 cnpm install --save-dev @types/nprogress

3.构建路由模块

路由主要采用懒加载,本项目只是简单设计 没有做权限Rbac权限设计如图所示：

4.状态管理Vuex

官方文档 https://championswimmer.in/vuex-module-decorators/
因为vue2.x版本vuex对ts的兼容性不是很好，为了达到状态管理模块，这里要额外引用一个类库vuex-module-decorators，它是基于vue-class-component 所做的拓展，它提供了一系列的装饰器，让vue+ts结合的项目达到状态管理的作用。

cnpm install -D vuex-module-decorators

import { VuexModule, Module, Mutation, Action, getModule, } from 'vuex-module-decorators';
import { login } from '@/api/user'
import store from '@/store'

export interface UserInfo {
    userName:string,
    userPwd:string,
    roles:string[]

}

@Module({ name: 'user', dynamic: true, store })
//参数对比
// 参数一：module名称，开启命名空间后会以name为命名空间
// 参数二：是否使用动态加载，简而言之只有在用到当前的module才会加载，详细可以看vuex官网。本篇博客必须选择true，这也是为什么index.ts一直不用修改的原因，如果设置为false会有很大的变动，如果您真的需要这么做，可以自己研究一下。
// 参数三：是否开启命名空间，如果你的模块很多，强烈建议开启
// 参数四：挂载的store目标
class User extends VuexModule implements UserInfo {
    public userName: string = ''
    public userPwd: string = ''
    public roles: string[] = []

    @Mutation
    private SET_ROLES(roles:string[]) {
        this.roles = roles
    }

    @Action
    public async Login(params:any){
     console.log(params)
      let {userName,userPwd,validCode} =params
      const {data} = await login({userName,userPwd,validCode})
      console.log(data)
    }
}
export const UserModule = getModule(User)

上面的代码相当于普通vuex以下代码

import { login } from '@/api/index'
import { setStore, removeStore } from '@/assets/js/storage'
import Vue from 'vue'
const user = {
state: {
  token: '',
  name: '',
  roles: [],
},
mutations: {
  SET_TOKEN: (state, token) => {
    state.token = token
  },
  SET_ROLES: (state, roles) => {
    state.roles = roles
  },
  SET_LOGOUT(state) {
    state.token = null;
    state.userInfo = null;
  },
  SET_NAME:(state,name)=>{
    state.name = name;
  }
},
actions: {
  SET_LOGOUT({ commit }) {
    removeStore('token');
    removeStore('userInfo');
    commit('SET_LOGOUT');
  },
  Login({ commit }, userInfo) {
    console.log(userInfo)
    return new Promise((resolve, reject) => {
      login(userInfo).then(response => {
        const result = response.object;
        commit('SET_TOKEN', result.userInfo.userToken),
        commit('SET_NAME', result.userInfo.userName)
        setStore('token', result.userInfo.userToken);
        setStore('userInfo', result.userInfo);
        resolve()
      })
      //  commit('SET_TOKEN','2113165465456465465');
      //  commit('SET_ROLES', ['1','2'])
      //  
    }).catch(error => {
      reject(error)
    })
  }
}
}

export default user

同时写在vuex的方法在vue页面调用的时候

import { Component, Vue } from "vue-property-decorator";
import { Form as ElForm, Input } from 'element-ui'
import {UserModule} from '@/store/modules/user'
import {validCode} from '@/api/user'
@Component({
 name: "login",
})
export default class extends Vue {
 private loginForm = {
   userName: "admin",
   userPwd: "1234567",
   validCode:''
 }
 private loginRules = {
   userName: [{ required: true, trigger: "blur" }],
   userPwd: [{ required: true, trigger: "blur" }]
 }
 private loading = false
 private capsTooltip = false
 private passwordType = "password"
 mounted() {
   // if (this.loginForm.userName === "") {
   //   this.$refs.userName.focus();
   // } else if (this.loginForm.userPwd === "") {
   //   this.$refs.userPwd.focus();
   // }
 }
 created(){
   this.refreshCode();
 }
 private async refreshCode() {
      const { object } = await validCode()
     this.loginForm.validCode = object
      console.log(this.loginForm)
 }
 private handleLogin() {
   (this.$refs.loginForm as ElForm).validate(async (valid: boolean) => {
     if (valid) {
       await UserModule.Login({
         ...this.loginForm,
       });
     } else {
       return false;
     }
   });
 }

在页面使用ts的时候基本上template模板编译基本上不会改变 ，script 会加上lang=ts 有点类似于java语言的感觉写到这里基本上一个项目的架构搭建起来了。后续会继续更新内容未展示的 Watch Prop等方法。

代码借鉴：花裤衩的代码结构https://gitee.com/panjiachen/vue-element-admin