vue-cli3.0 + typescript 构建项目

vue 的火热程度毋庸置疑，vue3.0+typescript更是将vue玩出新高度。让编码变得更加规范化；

 什么是typeScript？
TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持 ； 
这里不多做详解，感兴趣的同学可阅读文档：https://ts.xcatliu.com/basics；

废话不多说，下面开始撸码；先附上vue3.0文档https://cli.vuejs.org/zh/guide/

 

安装Vue CLI脚手架

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装完成后可通过
vue -V
查看版本

构建项目

vue create vue-ts

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。默认是没有ts，所以我们要选择第二个来自定义我们所需要的；

? Please pick a preset:
  default (babel, eslint)        //默认配置
> Manually select features       //手动选择

接下来就是选择我们所需的选项来生成项目，使用 空格键 选中

? Check the features needed for your project:
 (*) Babel                                    // javascript转译器
 (*) TypeScript                               // 使用 TypeScript 书写源码
 ( ) Progressive Web App (PWA) Support        // 渐进式WEB应用
 (*) Router                                   // 使用vue-router
 (*) Vuex                                     // 使用vuex
 (*) CSS Pre-processors                       // 使用css预处理器
>(*) Linter / Formatter                       // 代码规范标准
 ( ) Unit Testing                             // 单元测试
 ( ) E2E Testing                              // e2e测试

回车

是否使用Class风格装饰器？

即原本是：home = new Vue()创建vue实例
使用装饰器后：class home extends Vue{}

? Use class-style component syntax? (Y/n) Y

使用Babel与TypeScript一起用于自动检测的填充 

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi

lls, transpiling JSX)? (Y/n) Y

 路由模式

? Use history mode for router? (Requires proper server setup for index fallback

in production) (Y/n) Y

我选择   Sass/SCSS (with dart-sass) 

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported

by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)    // 保存后编译
  Sass/SCSS (with node-sass)    // 实时编译 
  Less
  Stylus

选择 代码格式化检测  因为是用typescript 所以选择 TSLint

? Pick a linter / formatter config: (Use arrow keys)
> TSLint                                // typescript格式验证工具
  ESLint with error prevention only     // 只进行报错提醒
  ESLint + Airbnb config                // 不严谨模式
  ESLint + Standard config              // 正常模式
  ESLint + Prettier                     // 严格模式

代码检查方式 保存检查 

> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

 文件配置，我选择配置在独立的文件中

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arro

w keys)
> In dedicated config files
  In package.json

保存上述配置，保存后下一次可直接根据上述配置生成项目，这里我就不保存了，有需要的同学可自行保存 

ted config files
? Save this as a preset for future projects? (y/N) N

OK，等待项目加载各种包...

加载完毕

 $ cd vue-ts
 $ npm run serve

这时我们的项目就已经生成并启动完成；默认是localhost:8080

看下项目目录结构

跟vue2.0相似又不大一样，有些同学会疑惑webpack配置哪去了？

vue自己封装了对应的webpack配置，那如果想要修改配置该怎么办，可自己添加配置文件，这里亦不做详解，

可参考文档 https://cli.vuejs.org/zh/config