Vue-cli4.0项目初始化，跟进typescript的步伐

本人已将初始化项目开源，基于Vue3.0+Typescript构建的空白项目，css样式的初始化，以及基本常用的axios,vue-router,模块化使用vuex，element-ui已经按需引入配置好，包括打包优化的cdn引入，代码压缩，图片压缩，关闭map等打包优化都已配置完成，项目地址为https://github.com/Jack-Star-T/Vue3.0-typescript，希望能收到你的Star。

1.安装node.js,需要v8.9以上,安装请点击这里

2.下载新的vue-cli版本

npm install -g @vue/cli 

3.可以试着查看一下当前的版本，输入vue -V

image.png

4.输入vue create 项目名称，让你选择默认还是自定义，我选了后者

image.png

5.然后选择自定义的配置

image.png

Babel => 语法编译（es6 转 es5）
TypeScript => js的超集，强类型语言
Progressive Web App (PWA) Support => 渐进式Web应用
Router => 路由
Vuex => 状态管理
CSS Pre-processors => css预处理器，如Stylus, Sass, Less
Linter / Formatter => 语法检查
Unit Testing => 单元测试
E2E Testing => 集成测试

6.剩余的配置选择

Use class-style component syntax? (Y/n)： //是否使用babel做转义 yes
Use Babel alongside TypeScript for auto-detected polyfills? (Y/n) ： //是否使用class风格的组件语法 yes
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): //选择css预处理器 stylus
Pick a linter / formatter config: (Use arrow keys)：选择语法检查规范
Pick additional lint features: (Press to select, to toggle all, *to invert selection) 选择 保存时检查 / 提交时检查
Save this as a preset for future projects? (y/N) ：是否保存当前预设，下次构建无需再次配置

7.可以看到新建完以后的项目目录如下，很多js都变成了ts文件，npm run dev也变成了npm run serve

image.png

8.输入npm run serve运行项目

image.png

9.data中如何使用ts的一大特点强类型语言，一定要使用vue的修饰器插件，可以看到和原本的vue写法有了较大的改变，其他写法请参考Vue使用vue-property-decorator修饰器结合ts的写法转换

先安装修饰符插件

npm install vue-property-decorator --save

然后修改代码如下,script要指定为ts