vue-cli3快速创建 vue + typescript + sass + router + vuex 新项目起手式

文档参照：

vue-property-decorator

vuex-class

vue-class-component

TypeScript 中文网

前期准备

卸载旧版本

vue cli 升级到3后，package的名字从 vue-cli 改为了 @vue/cli，装了旧版本的，官方的建议是，把旧版本的卸载了，再安装新版本。
卸载指令如下：
npm uninstall vue-cli -g or yarn global remove vue-cli

node版本

官方建议，node.js的版本，需要是8.9或者以上（建议是8.11.0+）

安装

安装指令如下：
npm install -g @vue/cli or yarn global add @vue/cli

创建项目

vue create

上面是我在创建项目的时候的各种配置选择，下面来简单的分析一下：

1、Please pick a perset：（请选择一个预设）

     选择：manually select features（手动选择功能） 

     

2、Use class-style component syntax?

     这里是让选择在开发 Vue 组件时，要不要使用 class 风格的写法。为了更方便地使用 TypeScript ，此处选择 Y 

3、Use Babel alongside TypeScript for auto-detected polyfills?

     这个选项的意思是要不要使用 babel 工具自动为转换后的 TypeScript 代码注入 polyfiills，此处选择 Y 

4、css预处理选择: SCSS/SASS

代码风格和eslin:

这里选的是ESLint +Standard config ， 个人比较习惯这种风格，具体怎么选择看个人习惯吧

5、什么时候进行校验（这里选择每次保存的时候进行校验）

6、把babel,postcss,eslint这些配置文件放哪。放在各自的配置文件里 or 放在package.json？

这里选择放在各自的配置文件里

7、把刚刚选择的配置文件保存起 or 不保存,保存之后就会出现在每次创建项目选择配置

这里选择 不保存  N

8、项目创建完之后，进入到项目目录，启动项目

npm run serve

 

目录结构：