搭建vue+ts脚手架、配置vuex

搭建vue&typescript脚手架

安装vue-cli最新版本

npm uninstall vue-cli -g // 卸载
npm install -g @vue/cli // 安装最新版本

1.创建项目

vue create vue-ts-demo

2.键盘↓选择Manually select features回车

3.空格选中相应选项，回车

4.看图，选择相应的选项

也可以自己定义，我的是这样的

安装完毕 运行

执行命令

cd vue-ts-demo
npm run serve

目录结构

接下来进行项目配置

配置vue.config.js

打开根目录下的vue.config.js，如果没有就创建一个，放在根目录下，并添加以下代码

const path = require('path')
const resolve = dir => {
  return path.join(__dirname, dir)
}
// 线上打包路径，请根据项目实际线上情况
const BASE_URL = process.env.NODE_ENV === 'production' ? '/' : '/'
module.exports = {
  publicPath: BASE_URL,
  outputDir: 'dist', // 打包生成的生产环境构建文件的目录
  assetsDir: '', // 放置生成的静态资源路径，默认在outputDir
  indexPath: 'demo.ts.html', // 指定生成的 index.html 输入路径，默认outputDir
  pages: undefined, // 构建多页
  lintOnSave: true,// 是否在保存的时候检查
  productionSourceMap: false, // 开启 生产环境的 source map?
  chainWebpack: config => {
    // 配置路径别名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('_c', resolve('src/components'))
  },
  css: {
    modules: false, // 启用 CSS modules
    extract: true, // 是否使用css分离插件
    sourceMap: false, // 开启 CSS source maps?
    loaderOptions: {} // css预设器配置项
  },
  devServer: { // 环境配置
    host: 'localhost',
    port: 8080, // 端口
    https: false,
    hotOnly: false,
    open: false, //配置自动启动浏览器
    before: app => {}
  },
  pluginOptions: {// 第三方插件配置
    // ...
  }
}

配置tslint规则 tslint.json

{
  "defaultSeverity": "warning",
  "extends": [
    "tslint:recommended"
  ],
  "linterOptions": {
    "exclude": [
      "node_modules/**"
    ]
  },
  "rules": {
    "quotemark": false, // 字符串文字需要单引号或双引号。
    "indent": false, // 使用制表符或空格强制缩进。
    "member-access": false, // 需要类成员的显式可见性声明。
    "interface-name": false, // 接口名要求大写开头
    "ordered-imports": false, // 要求将import语句按字母顺序排列并进行分组。
    "object-literal-sort-keys": false, // 检查对象文字中键的排序。
    "no-consecutive-blank-lines": false, // 不允许连续出现一个或多个空行。
    "no-shadowed-variable": false, // 不允许隐藏变量声明。
    "no-trailing-whitespace": true, // 不允许在行尾添加尾随空格。
    "semicolon": false, // 是否分号结尾
    "trailing-comma": false, // 是否强象添加逗号
    "eofline": false, // 是否末尾另起一行
    "prefer-conditional-expression": false, // for (... in ...)语句必须用if语句过滤
    "curly": false, //for if do while 要有括号
    "forin": false, //用for in 必须用if进行过滤
    "import-blacklist": true, //允许使用import require导入具体的模块
    "no-arg": true, //不允许使用 argument.callee
    "no-bitwise": true, //不允许使用按位运算符
    "no-console": false, //不能使用console
    "no-construct": true, //不允许使用 String/Number/Boolean的构造函数
    "no-debugger": true, //不允许使用debugger
    "no-duplicate-super": true, //构造函数两次用super会发出警告
    "no-empty": true, //不允许空的块
    "no-eval": true, //不允许使用eval
    "no-floating-promises": false, //必须正确处理promise的返回函数
    "no-for-in-array": false, //不允许使用for in 遍历数组
    "no-implicit-dependencies": false, //不允许在项目的package.json中导入未列为依赖项的模块
    "no-inferred-empty-object-type": false, //不允许在函数和构造函数中使用{}的类型推断
    "no-invalid-template-strings": true, //警告在非模板字符中使用${
    "no-invalid-this": true, //不允许在非class中使用 this关键字
    "no-misused-new": true, //禁止定义构造函数或new class
    "no-null-keyword": false, //不允许使用null关键字
    "no-object-literal-type-assertion": false, //禁止object出现在类型断言表达式中
    "no-return-await": true, //不允许return await
    "arrow-parens": false, //箭头函数定义的参数需要括号
    "adjacent-overload-signatures": false, //  Enforces function overloads to be consecutive.
    "ban-comma-operator": true, //禁止逗号运算符。
    "no-any": false, //不需使用any类型
    "no-empty-interface": false, //禁止空接口 {}
    "no-internal-module": true, //不允许内部模块
    "no-magic-numbers": false, //不允许在变量赋值之外使用常量数值。当没有指定允许值列表时，默认允许-1,0和1
    "no-namespace": [true, "allpw-declarations"], //不允许使用内部modules和命名空间
    "no-non-null-assertion": true, //不允许使用!后缀操作符的非空断言。
    "no-parameter-reassignment": true, //不允许重新分配参数
    "no-reference": true, // 禁止使用/// <reference path=> 导入 ，使用import代替
    "no-unnecessary-type-assertion": false, //如果类型断言没有改变表达式的类型就发出警告
    "no-var-requires": false, //不允许使用var module = require("module"),用 import foo = require('foo')导入
    "prefer-for-of": true, //建议使用for(..of)
    "promise-function-async": false, //要求异步函数返回promise
    "max-classes-per-file": [true, 2], // 一个脚本最多几个申明类
    "variable-name": false,
    "prefer-const": true // 提示可以用const的地方
  }
}

使用vuex,vuex-class

安装vuex-class

官方文档：https://github.com/ktsn/vuex-class

npm install vuex-class -save

在./src文件夹下面的store文件夹里面新建modules文件夹，在modules文件夹里面新建demo.ts

// ./src/store/modules/demo.ts
import { Commit } from 'vuex';
export interface State {
    userName: string,
}
const state: State = {
    userName: '零零三',
};
const mutations: any = {
    setName(states: any, name: string) {
        states.userName = name;
    },
};
const actions: any = {
    setName(context: { commit: Commit }, name: string) {
        context.commit('setName', name);
    }
};
export default {
    namespaced: true, // namespaced为false的时候，state,mutations,actions全局可以调用，为true，生成作用域，引用时要声明模块名称
    state,
    mutations,
    actions
};

修改./src/store/index.ts

// ./src/store/index.ts
import Vue from 'vue';
import Vuex from 'vuex';
import demo from '@/store/modules/demo';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    demo
  },
})

main.ts注册store

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store/store';
Vue.config.productionTip = false;
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

测试vuex是否可行

修改helloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>userName：{{userName}}</h2>
    <button @click="setName('零三是个好人')">setName</button>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Action, namespace} from "vuex-class";
const someModule = namespace('demo');
@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
    @someModule.State(state => state.userName) userName: any;
    @someModule.Action('setName') setName: any;
    // @Action("demo/setName") private setName: any; // 这样也行得通
}
</script>

测试是行得通的

点击前

点击后