前言

成都创新互联公司是一家集网站建设,路桥企业网站建设,路桥品牌网站建设,网站定制,路桥网站建设报价,网络营销,网络优化,路桥网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
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 to select, to toggle all
, 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
看一下新项目的层级目录
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"
]
}
我们来看一下示例:
"module": "commonjs", "target": "es5"
"module": "es2015", "target": "es5"
"module": "es2015", "target": "es6"
"module": "commonjs", "target": "es6"
如果lib没有指定默认注入的库的列表。默认注入的库为:
tslint
类似于 eslint ,对 ts 代码进行检测。
vscode 需要安装tslint 插件 ,并在 vscode 的用户配置中加入以下配置,用来在保存时自动解决 ts 的错误。
❗️ vue cli3 已经安装了tslint依赖
使用prettier 插件,对项目进行代码风格的统一和规范
添加 tslint.json extends 字段如下:
设置 vscode
也可以使用 shift + option + f 进行格式化
在根目录下添加 .prttierrc 文件 (应对 prittier 格式化 vue 文件中的 ts 文件时,没办法使用 tslint 规则进行格式化,需要对它单独处理,以免 tslint 报错)
shims-vue.d.ts
声明所有以 .vue 结尾的文件,默认导入 vue ,默认导出 Vue,用以在项目中ts文件识别 .vue 结尾文件。
在 main.ts 中,引入一个 vue 组件必须以 .vue 结尾。
Vue class
vue-property-decorator
写一个 todolist 组件顺便来介绍 vue-property-decorator,为了方便页面构建,使用 element-ui
element-ui 使用 ts 开发,默认有 .d.ts 的声明文件
在 /src/compenents/ 新建 todoList.vue , 代码如下:
add
{{ item }}
对 ts 代码的用法指出以下几点:
- prop 建议写成 xxx!: type 的形式,不然要写成 xxx : type | undefined
- @Emit 可以不传参数,emit 出去的事件名默认是修饰的函数名,但是当函数的命名规则为 camelCase 时需要注册的函数名必须是 kebab-case
- @Emit 传参是由修饰的函数 return value
改造 Home.vue 如下:
Vuex
有关 ts 中的 vuex 的写法要从vuex-class 说起,在 官方的 vue-property-decorator 中也推荐使用该库。
在 src 文件夹中新建 store 文件夹, 在 store 新建 index.ts,todoList.ts
// 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 = {
getTodoList(state: TodoListType): string[] {
return state.todoList;
}
};
const mutations: MutationTree = {
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 = {
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 需要注意以下几点:
代码中的 dataSource 本意为 state ,但是不能用 state 命名,tslint 会和形参 state 冲突
改造 /views/Home.vue 如下:
有关 vuex-class 的调用有以下几点注意
所有的代码到此为止,使用 npm run serve 即可查看应用,保留原有 routes 文件,保持应用的健壮性。
写在最后
- 本文只是介绍了一个简单构建 ts-vue 应用的例子,对于框架的健壮和可扩展性有需要慢慢考虑,比如 webpack 的配置,适应测试,生产等各种环境的区分,axois 的封装,等等。
- 对于vue + ts 的配方,文章还有很多 vue 的特性没有去兼容,比如 this.refs 的使用,比如 vue-property-decorator 其他特性的使用。
- 由于官方文档对 ts 的介绍有限,所以以上代码肯定有不足的地方,希望大家指正。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
当前标题:使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
分享地址:http://kswsj.com/article/gjdijd.html