搭建 vue3 vue-cli4 项目

更新 CLI 脚手架

老规矩，还是全局安装，把脚手架更新到最新版本（最低版本要求在 4.5.6 以上才能支持 Vue 3.0 ）。

npm install -g @vue/cli

使用 CLI 创建 3.x 项目

还是熟悉的 create 命令

vue create vue-3-ts-demo

由于我们要使用 TS ，所以需要选择最后一个选项来进行自定义搭配。

Vue CLI v4.5.8
? Please pick a preset:
  vue-config ([Vue 2] stylus, babel, router, eslint)
  vue-3-ts-config ([Vue 3] stylus, babel, typescript, router, vuex, eslint)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features

我上面的 vue-3-ts-demo 预设，就是选择了下面这些东西。

Vue CLI v4.5.8
? Please pick a preset: Manually select features
? Check the features needed for your project:
>(*) Choose Vue version
 (*) Babel
 (*) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

选择 3.x

? Choose a version of Vue.js that you want to start the project with
  2.x
> 3.x (Preview)

因为 3.0 有更好的 Composition API ，所以我们选择 “否” 。

? Use class-style component syntax? (y/N) n

babel 必须的…

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) y

路由模式（ hash 还是 history ），这个根据自己项目情况选择。

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y

选择一个 CSS 预处理器，可以根据自己的喜好选择，我自己是喜欢用 Sass 。

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
> Sass/SCSS (with node-sass)
  Less
  Stylus

lint 规则，根据自己喜好选择，我是默认。

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
  TSLint (deprecated)

lint 的校验时机，我是默认在保存时校验。

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

项目配置文件，我习惯独立文件。

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

是否保存为未来的项目配置，存起来方便以后快速创建。

? Save this as a preset for future projects? Yes
? Save preset as: vue-3-ts-demo

vue3项目更多配置