重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
前言
成都创新互联公司是一家集网站建设,路桥企业网站建设,路桥品牌网站建设,网站定制,路桥网站建设报价,网络营销,网络优化,路桥网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
Vue3.x 即将来袭,使用 TypeScirpt 重构,TypeScript 将成为 vue 社区的标配,出于一名程序员的焦虑,决定现在 Vue2.6.x 踩一波坑。
vue 官方文档已经简略地对 typescript 的支持进行了介绍,我们使用 Vue Cli3 直接生成项目
创建项目
❓为什么使用 Vue Cli3 构建项目
官方维护,后续升级减少兼容性问题
使用以下配置进行项目的生成:
╭─~/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: (Pressto 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
看一下新项目的层级目录
╭─~/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" ] }
我们来看一下示例:
// 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没有指定默认注入的库的列表。默认注入的库为:
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
也可以使用 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 , 代码如下:
add {{ item }}
对 ts 代码的用法指出以下几点:
改造 Home.vue 如下:
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= { 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 需要注意以下几点:
interface Payload { [propName: string]: any; }
代码中的 dataSource 本意为 state ,但是不能用 state 命名,tslint 会和形参 state 冲突
改造 /views/Home.vue 如下:
有关 vuex-class 的调用有以下几点注意
所有的代码到此为止,使用 npm run serve 即可查看应用,保留原有 routes 文件,保持应用的健壮性。
写在最后
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。