如何搭建 Vue3 + TypeScript 开发框架

一、新建项目
  1、vue create vue3_ts 【保证 vue-cli 的版本在V4.5.0以上《查看版本 vue -V》，此时才有创建Vue3的选项】

$ vue create v3_ts
? Please pick a preset: (Use arrow keys)            //请选择预选项
> Default ([Vue 2] babel, eslint)                   //使用Vue2默认模板进行创建
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)   //使用Vue3默认模板进行创建
  Manually select features                          //手动选择(自定义)的意思

 2、选择:  Manually select features

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors             // CSS预处理器
 (*) Linter / Formatter             // 格式化工具
 ( ) Unit Testing                   // 单元测试
 ( ) E2E Testing                    // E2E测试

  此时可以把 TypeScript Router Vuex的选项选上，然后回车进入进入下一步选择

3、选择 Vue 的版本，我们选择 3.x

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

4、不使用 class-style 的类样式语法 、 不使用 TypeScript和Babel的形式编译 JSX、不使用 Router 的 history模式, 都选择 n

Use class-style component syntax? (y/N) No
Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) No
Use history mode for router? (y/N) No

5、选择 ESLint 的配置，我们选择  ESLint + Prettier

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

 回车后让你选择增加 ESLint 的特性功能，选择 Lint on save

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save             // 保存的时候进行Lint
 ( ) Lint and fix on commit   // 需要帮你进行fix（修理），这项我们不进行选择

回车后让你选择这些配置文件时单独存放，还是直接存放在 package.json 文件里,我们选择单独存放

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

6、是否需要把这些配置保存下来，下次好直接进行使用。我们选择 n

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

最后，我们就默默的等 vue-cli 帮我们生成项目了！

7、项目基本结构说明

|-node_modules       -- 所有的项目依赖包都放在这个目录下
|-public             -- 公共文件夹 public中的静态资源会被复制到输出目录(dist)中
--|favicon.ico         -- 网站的显示图标
--|index.html          -- 入口的html文件
|-src                -- 源文件目录，编写的代码基本都在这个目录下
--|assets              -- 放置静态文件的目录，比如logo.pn就放在这里
--|components          -- Vue的组件文件，自定义的组件都会放到这
--|router              -- 路由相关配置
   --|index.js
--|store               -- vuex相关配置
--|views               -- 所有的路由组件
--|App.vue             -- 根组件，这个在Vue2中也有
--|main.ts             -- 入口文件，因为采用了TypeScript所以是ts结尾
--|shims-vue.d.ts      -- 类文件(也叫定义文件)，因为.vue结尾的文件在ts中不认可，所以要有定义文件
|-.browserslistrc    -- 在不同前端工具之间公用目标浏览器和node版本的配置文件，作用是设置兼容性
|-.eslintrc.js       -- Eslint的配置文件，不用作过多介绍
|-.gitignore         -- 用来配置那些文件不归git管理
|-package.json       -- 命令配置和包管理文件
|-README.md          -- 项目的说明文件，使用markdown语法进行编写
|-tsconfig.json      -- 关于TypoScript的配置文件

.browserslistrc 文件

"browserslist": [
    "> 1%", // 表示包含所有使用率 > 1% 的浏览器
    "last 2 versions", // 表示包含浏览器最新的两个版本
    "not ie <= 8" // 表示不包含 ie8 及以下版本
]