Vue3。x即将来袭,使用TypeScirpt重构,打印稿将成为vue社区的标配,出于一名程序员的焦虑,决定现在Vue2.6。x踩一波坑。
vue官方文档已经简略地对打印稿的支持进行了介绍,我们使用vue Cli3直接生成项目
& # 10067;为什么使用Vue Cli3构建项目
官方维护,后续升级减少兼容性问题
使用以下配置进行项目的生成:
<李>巴贝尔对Ts进行转译
<李> TSLint对TS代码进行规范,后续会使用漂亮对项目进行编码的统一李
<李>默认安装Vuex和路由器,路由器使用,李历史模式
<李>使用玩笑进行单元测试李
╭─~/otherEWokspace
╰─& # 10148;vue创建ts-vuex-demo
Vue CLI v3.6.3
┌───────────────────────────┐
│更新可用:3.9.3│
└───────────────────────────┘
& # 63;请选择一个预设:手动选择功能
& # 63;检查你的项目所需的特性:巴别塔,TS,路由器,Vuex、CSS P
re-processors、剥绒机、单元
& # 63;使用类样式组件语法# 63;是的
& # 63;用巴贝尔与打印稿自动polyfills& # 63;是的
& # 63;路由器使用历史模式# 63;(需要适当的服务器设置索引fallb
ack生产)是的
& # 63;预处理程序选择一个CSS (PostCSS Autoprefixer和CSS suppor模块
泰德默认):Sass/SCSS (node-sass)
& # 63;选择一个短绒/格式化程序配置:TSLint
& # 63;选择额外的线头特点:(新闻& lt; space>选择,& lt; a>切换所有
& lt; i>逆选择)线头>
╭─~/otherEWokspace/ts-vuex-demo & # 8249;主# 8250;
╰─& # 10148;树- l 2 -我node_modules
．
├──README.md
├──babel.config.js
├──jest.config.js
├──package-lock.json
├──package.json
├──postcss.config.js
├──公共
│├──ico。位于
│└──index . html
├──src
│├──App.vue
│├──资产
│├──组件
│├──main.ts
│├──router.ts
│├──shims-tsx.d.ts
│├──shims-vue.d.ts
│├──store.ts
│└──的观点
├──测试
│└──单位
├──tsconfig.json
└──tslint.json
之前
tsconfig。json
对自由、目标、模块进行解释
{
" compilerOptions ": {
“目标”:“esnext”,
“模块”:“esnext”,
“严格”:没错,
“jsx”:“保护”,//开启对jsx的支持
“importHelpers”:没错,
“moduleResolution”:“节点”,
“experimentalDecorators”:没错,
“esModuleInterop”:没错,
“allowSyntheticDefaultImports”:没错,
“sourceMap”:没错,
“baseUrl”:“。”,
“类型”:[
“webpack-env”,
“开玩笑”
),
"路径":{
“@/*”:(
“src/*”
]
},
“自由”:(
“esnext”,
“dom”,
“dom.iterable”,
“scripthost”
]
},
“包括”:(
“src/* */* .ts”,
“src/* */* .tsx”,
“src/* */* .vue”,
“测试/* */* .ts”,
“测试/* */* .tsx”
),
“排除”:(
“node_modules”
]
}
之前
<李>目标- - -被tsc编译后生成js文件代码风格李
<李>模块- - -被tsc编译后生成js文件的模块风格李
<李>自由- - -原ts文件支持的代码库李
我们来看一下示例:
//index.ts
出口const迎宾=(名称:字符串)=比;“你好${名称}';
之前
“模块”:“commonjs”,“目标”:“es5”
//index.js
“使用严格的”;
Object.defineProperty(出口,“__esModule”{值:true});
出口。迎宾=函数(名字){返回“Hello”+名称;};
之前
“模块”:“es2015”,“目标”:“es5”
//index.js
出口var迎宾=函数(名字){返回“Hello”+名称;};
之前
“模块”:“es2015”,“目标”:“es6”
