使用VueCli3+TypeScript+Vuex一步步构建todoList的方法


Posted in Javascript onJuly 25, 2019

前言

Vue3.x 即将来袭,使用 TypeScirpt 重构,TypeScript 将成为 vue 社区的标配,出于一名程序员的焦虑,决定现在 Vue2.6.x 踩一波坑。

vue 官方文档已经简略地对 typescript 的支持进行了介绍,我们使用 Vue Cli3 直接生成项目

创建项目

❓为什么使用 Vue Cli3 构建项目

官方维护,后续升级减少兼容性问题

使用以下配置进行项目的生成:

  • Babel 对 Ts 进行转译
  • TSLint 对 TS 代码进行规范,后续会使用 prettier 对项目进行编码的统一
  • 默认安装 Vuex 和 Router , Router 使用  history 模式
  • 使用 Jest 进行单元测试
?─~/otherEWokspace
?─➤ vue create ts-vuex-demo


Vue CLI v3.6.3
┌───────────────────────────┐
│ Update available: 3.9.3 │
└───────────────────────────┘
? Please pick a preset: Manually select features

? Check the features needed for your project: Babel, TS, Router, Vuex, CSS P
re-processors, Linter, Unit

? Use class-style component syntax? Yes

? Use Babel alongside TypeScript for auto-detected polyfills? Yes

? Use history mode for router? (Requires proper server setup for index fallb
ack in production) Yes

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are suppor
ted by default): Sass/SCSS (with node-sass)

? Pick a linter / formatter config: TSLint

? Pick additional lint features: (Press <space> to select, <a> to toggle all
, <i> to invert selection)Lint on save

? Pick a unit testing solution: Jest

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In de
dicated config files

? Save this as a preset for future projects? Yes

? Save preset as: ts-vue-demo

看一下新项目的层级目录

?─~/otherEWokspace/ts-vuex-demo ‹master›
?─➤ tree -L 2 -I node_modules
.
├── README.md
├── babel.config.js
├── jest.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│  ├── favicon.ico
│  └── index.html
├── src
│  ├── App.vue
│  ├── assets
│  ├── components
│  ├── main.ts
│  ├── router.ts
│  ├── shims-tsx.d.ts
│  ├── shims-vue.d.ts
│  ├── store.ts
│  └── views
├── tests
│  └── unit
├── tsconfig.json
└── tslint.json

tsconfig.json

对 lib 、 target 、 module 进行解释

{
 "compilerOptions": {
  "target": "esnext",
  "module": "esnext",
  "strict": true,
  "jsx": "preserve", // 开启对 jsx 的支持
  "importHelpers": true,
  "moduleResolution": "node",
  "experimentalDecorators": true,
  "esModuleInterop": true,
  "allowSyntheticDefaultImports": true,
  "sourceMap": true,
  "baseUrl": ".",
  "types": [
   "webpack-env",
   "jest"
  ],
  "paths": {
   "@/*": [
    "src/*"
   ]
  },
  "lib": [
   "esnext",
   "dom",
   "dom.iterable",
   "scripthost"
  ]
 },
 "include": [
  "src/**/*.ts",
  "src/**/*.tsx",
  "src/**/*.vue",
  "tests/**/*.ts",
  "tests/**/*.tsx"
 ],
 "exclude": [
  "node_modules"
 ]
}
  • target --- 被 tsc 编译后生成 js 文件代码风格
  • module --- 被 tsc 编译后生成 js 文件的模块风格
  • lib --- 原 ts 文件支持的代码库

我们来看一下示例:

// index.ts
export const Greeter = (name: string) => `Hello ${name}`;

"module": "commonjs", "target": "es5"

// index.js
"use strict";

Object.defineProperty(exports, "__esModule", { value: true });

exports.Greeter = function (name) { return "Hello " + name; };

"module": "es2015", "target": "es5"

// index.js
export var Greeter = function (name) { return "Hello " + name; };

"module": "es2015", "target": "es6"

// index.js
export const Greeter = (name) => `Hello ${name}`;

"module": "commonjs", "target": "es6"

// index.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Greeter = (name) => `Hello ${name}`;

如果lib没有指定默认注入的库的列表。默认注入的库为:

  • 针对于 target:ES5:DOM,ES5,ScriptHost
  • 针对于 target:ES6:DOM,ES6,DOM.Iterable,ScriptHost

tslint

类似于 eslint ,对 ts 代码进行检测。

vscode 需要安装tslint 插件 ,并在 vscode 的用户配置中加入以下配置,用来在保存时自动解决 ts 的错误。

// settings.json
 "editor.codeActionsOnSave": {
  "source.fixAll.tsLint": true
 }

❗️ vue cli3 已经安装了tslint依赖

使用prettier 插件,对项目进行代码风格的统一和规范

npm i tslint-config-prettier -D

添加 tslint.json  extends 字段如下:

"extends": ["tslint:recommended", "tslint-config-prettier"]

设置 vscode

  • 勾选 tslintIntegration ,使 prittier 支持格式化 ts 文件
  • "editor.formatOnSave": true 保存时自动格式化

也可以使用 shift + option + f 进行格式化

在根目录下添加 .prttierrc 文件 (应对 prittier 格式化 vue 文件中的 ts 文件时,没办法使用 tslint 规则进行格式化,需要对它单独处理,以免 tslint 报错)

{ "singleQuote": true }

shims-vue.d.ts

declare module "*.vue" {
 import Vue from "vue";
 export default Vue;
}

声明所有以 .vue 结尾的文件,默认导入 vue ,默认导出 Vue,用以在项目中ts文件识别 .vue 结尾文件。

在 main.ts 中,引入一个 vue 组件必须以 .vue 结尾。

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

new Vue({
 router,
 store,
 render: (h) => h(App),
}).$mount('#app');

Vue class

vue-property-decorator

写一个 todolist 组件顺便来介绍 vue-property-decorator,为了方便页面构建,使用 element-ui

element-ui 使用 ts 开发,默认有 .d.ts 的声明文件

npm i element-ui
// main.ts

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

在 /src/compenents/ 新建 todoList.vue , 代码如下:

<template>
 <div class="todo_list">
  <el-card class="box-card">
   <div slot="header">
    <el-row :gutter="18">
     <el-col :span="18">
      <el-input
       v-model="todo"
       placeholder="请输入内容"
      ></el-input>
     </el-col>
     <el-col :span="2">
      <el-button
       type="primary"
       icon="el-icon-circle-plus-outline"
       @click="addItem"
      >add</el-button>
     </el-col>

    </el-row>

   </div>
   <div
    v-for="(item,index) in todoList"
    :key="item"
    class="text item"
    @click="removeItem(index)"
   >{{ item }}</div>
  </el-card>
  <label
   class="text"
   style="margin-top:20px"
  >{{todoLength}} records</label>
 </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
 public todo: string = '';

 @Prop({ default: [] }) private readonly todoList!: string[];

 get todoLength(): number {
  return this.todoList.length;
 }

 @Emit()
 private addItem(): string | undefined {
  if (this.todo) {
   return this.todo;
  }
 }

 @Emit('removeItem')
 private removeItem(index: number): number {
  return index;
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.todo_list {
 display: flex;
 justify-content: center;
 flex-direction: column;
 align-items: center;
 .box-card {
  width: 480px;
 }

 .text {
  font-size: 14px;
  text-align: left;
 }

 .item {
  margin-bottom: 18px;
 }
}
</style>

对 ts 代码的用法指出以下几点:

  1. prop 建议写成 xxx!: type 的形式,不然要写成 xxx : type | undefined
  2. @Emit 可以不传参数,emit 出去的事件名默认是修饰的函数名,但是当函数的命名规则为 camelCase 时需要注册的函数名必须是 kebab-case
  3. @Emit 传参是由修饰的函数 return value

改造 Home.vue 如下:

<template>
 <div class="home">
  <todoList
   :todoList="[]"
   @add-item="addTodoList"
   @removeItem="addTodoLisItem"
  />
 </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import todoList from '@/components/todoList.vue'; // @ is an alias to /src
import { State, Getter, Action } from 'vuex-class';

@Component({
 components: {
  todoList
 }
})
export default class Home extends Vue {
 
 public addTodoList(val: string) {
  console.log(val);
  
 }

 private created() {
  console.log('i add life cycle funciton -- created');
 }

 private addTodoLisItem(index: number) {
  console.log(index);
 }
}
</script>

Vuex

有关 ts 中的 vuex 的写法要从vuex-class 说起,在 官方的 vue-property-decorator 中也推荐使用该库。

npm i vuex-class

在 src 文件夹中新建 store 文件夹, 在 store 新建 index.ts,todoList.ts

// index.ts

import Vue from 'vue';
import Vuex from 'vuex';

import todolist from './todoList';

Vue.use(Vuex);

export default new Vuex.Store({
 modules: { todolist }
});
// todoList.ts

import { Commit, Dispatch, GetterTree, ActionTree, MutationTree } from 'vuex';

const ADD_TODOLIST = 'ADD_TODOLIST';
const REMOVE_ITEM = 'REMOVE_ITEM';

export interface RootState {
 version: string;
}

interface Payload {
 [propName: string]: any;
}

interface TodoListType {
 todoList: string[];
}

interface Context {
 commit: Commit;
 dispatch: Dispatch;
}

const dataSource: TodoListType = {
 todoList: []
};

const getters: GetterTree<TodoListType, RootState> = {
 getTodoList(state: TodoListType): string[] {
  return state.todoList;
 }
};

const mutations: MutationTree<TodoListType> = {
 ADD_TODOLIST: (state: TodoListType, item: string) => {
  console.log(item);
  state.todoList.push(item);
 },
 REMOVE_ITEM: (state: TodoListType, removeIndex: number) => {
  state.todoList = state.todoList.filter((item: string, index: number) => {
   return removeIndex !== index;
  });
 }
};

const actions: ActionTree<TodoListType, RootState> = {
 addList: async ({ commit }: Context, item: string) => {
  await Promise.resolve(
   setTimeout(() => {
    commit(ADD_TODOLIST, item);
   }, 100)
  );
 },
 removeItem: async ({ commit }: Context, { index }: Payload) => {
  await Promise.resolve(
   setTimeout(() => {
    commit(REMOVE_ITEM, index);
   }, 100)
  );
 }
};

export default {
 namespaced: true,
 state: dataSource,
 getters,
 mutations,
 actions
};

删除原来与 main.ts 同级的 store.ts

对 todoList.ts 需要注意以下几点:

  • 对于 getters 、mutations 、actions 响应的 type 可以使用 command + 左键点击 进入声明文件查看,也可以不指定 type ,但是建议写上
  • 对于 Payload 解构  tslint 报错的,可以为 Payload 添加类型声明
interface Payload {
 [propName: string]: any;
}

代码中的 dataSource 本意为 state ,但是不能用 state 命名,tslint 会和形参 state 冲突

改造 /views/Home.vue 如下:

<template>
 <div class="home">
  <todoList
   :todoList="todoList"
   @add-item="addTodoList"
   @removeItem="addTodoLisItem"
  />
 </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import todoList from '@/components/todoList.vue'; // @ is an alias to /src
import { State, Getter, Action } from 'vuex-class';

@Component({
 components: {
  todoList
 }
})
export default class Home extends Vue {
 @State(state => state.todolist.todoList) private todoList!: string[];

 @Action('todolist/addList') private addList!: (val: string) => void;
 @Action('todolist/removeItem') private removeItem!: (index: number) => void;

 public addTodoList(val: string) {
  console.log(val);
  this.addList(val);
 }

 private created() {
  console.log('i add life cycle funciton -- created');
 }

 private addTodoLisItem(index: number) {
  this.removeItem(index);
 }
}
</script>

有关 vuex-class 的调用有以下几点注意

  • @State 如果有分模块,必须使用 state => state.xxx.xxx 的形式获取state
  • @Action 中函数的声明,形参必须和方法保持一致

所有的代码到此为止,使用 npm run serve 即可查看应用,保留原有 routes 文件,保持应用的健壮性。

写在最后

  1. 本文只是介绍了一个简单构建 ts-vue 应用的例子,对于框架的健壮和可扩展性有需要慢慢考虑,比如 webpack 的配置,适应测试,生产等各种环境的区分,axois 的封装,等等。
  2. 对于vue + ts 的配方,文章还有很多 vue 的特性没有去兼容,比如 this.refs 的使用,比如 vue-property-decorator 其他特性的使用。
  3. 由于官方文档对 ts 的介绍有限,所以以上代码肯定有不足的地方,希望大家指正。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
浅谈关于JavaScript API设计的一些建议和准则
Jun 24 Javascript
arguments对象验证函数的参数是否合法
Jun 26 Javascript
Three.js学习之文字形状及自定义形状
Aug 01 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
Vue.use源码分析
Apr 22 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
Koa项目搭建过程详细记录
Apr 12 Javascript
vue-cli脚手架的安装教程图解
Sep 02 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 Javascript
vue使用代理解决请求跨域问题详解
Jul 24 #Javascript
Vue父组件如何获取子组件中的变量
Jul 24 #Javascript
mock.js模拟数据实现前后端分离
Jul 24 #Javascript
vue+mock.js实现前后端分离
Jul 24 #Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 #Javascript
Vue封装的组件全局注册并引用
Jul 24 #Javascript
vue子路由跳转实现tab选项卡
Jul 24 #Javascript
You might like
php若干单维数组遍历方法的比较
2011/09/20 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
基于PHP实现短信验证码发送次数限制
2020/07/11 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
纯js实现隔行变色效果
2017/11/29 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
使用requests库制作Python爬虫
2018/03/25 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
在python中logger setlevel没有生效的解决
2020/02/21 Python
python实现批量修改文件名
2020/03/23 Python
详解HTML5中的标签
2015/06/19 HTML / CSS
尼克松手表官网:Nixon手表
2019/03/17 全球购物
Fox Racing英国官网:越野摩托车和山地自行车服装
2020/02/26 全球购物
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
社会学专业求职信
2014/07/17 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
学院党的群众路线教育实践活动第一阶段情况汇报
2014/10/25 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang