vue3.0+ts项目初始化

创建项目

• 使用npm安装vue-cli3.0和ts

  npm i -g @vue/cli typescript
  

  @vue/cli需升级到高版本

• 使用vue create命令快速搭建新项目的脚手架

  vue create vue-ts-v3
  

  vue-ts-v3 项目名称，执行以上命令后，出现下面选项
  default：默认选项，babel、eslint只会引入这两个
  Manully select features：手动选择，因要用到vue+ts所以选择该选项

• 按enter，进入下一步

  多项选择，可选择Babel, Typescript, Router, Vuex, CSS Pre-processors, Linter/ Formatter 这几项
  *注：
  Babel：使用babel，便于将我们源代码进行转码（把es6=>es5）
  TypeScript：使用TypeScript进行源码编写，使用ts可以编写强类型js，对我们的开发有很大的好处
  Progressive Web App(PWA)：使用渐进式网页应用（PWA）
  Router：使用vue-router
  Vuex：使用vuex状态管理器
  CSS Pre-processors：使用CSS预处理器，比如：less，sass等
  Linter/Formatter：使用代码风格检查和格式化
  Unit Testing：使用单元测试
  E2E Testing：使用E2E测试, end to end（端到端）是黑盒测试的一种

• 按enter，进入下一步

  询问是否使用Class风格的组件语法，为了更方便使用ts，可选择Y
  当我们不知道选择哪个选项时，可直接enter使用默认选项

• 按enter，进入下一步

  使用默认选项

• 按enter，进入下一步，Use history mode for router?

  是否使用router的history模式，如果选择Y，在生产环境中，服务器端需要未索引回退做适当的配置，无特殊要求的话可直接使用默认选项

• 按enter，进入下一步，Pick a CSS pre-processor?

  选择css预处理器，可自行选择一种，也可使用默认选项

• 按enter，进入下一步，Pick a linter / formatter config?

  1）代码检查工具，可根据项目及自己爱好自由选择，一般使用Eslint+Prettier,项目中使用ts的话也可以直接选择TSLint
  2）Prettier不仅可以格式化js代码，还可以格式化css、vue模板文件中的template部分代码

  *注：
  TSLint: ts格式检验工具
  ESLint with error prevention only: ESLint 只会进行错误提醒
  ESLint + Airbnb config: ESLint Airbnb标准
  ESLint + Standard config: ESLint Standard 标准
  ESLint + Prettier: ESLint（代码质量检测）+ Prettier（代码格式化工具）

• 按enter，进入下一步，Pick additional lint features?

  选择什么时候进行代码格式化，保存时检查 or 提交时检查,一般选择Lint on save

• 按enter，进入下一步，Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?

  询问什么地方配置Babel，PostCss，Eslint等配置文件怎么存放, 是放到单独的配置文件中?还是package.json里
  1） In dedicated config files 在专门的配置文件中
  2） In package.json 配置在package.json文件中
  一般选择 In dedicated config files

• 按enter，进入下一步，Save this as a preset for future projects?

  是否保存本次所选的配置，在以后的项目中可快速构建? 保存后, 后续创建项目时可以直接选择该配置，不需要单独配置可直接选择N

• 按enter，会自动初始化项目