@vue/cli 搭建项目 vue+ts

最近接手了一个新的项目，@vue/cli vue+ts项目，总结下经验。搭建开发环境。
主要参考官方文档。https://cli.vuejs.org/zh/guide/installation.html

安装@vue/cli脚手架

参考官方文档

// 我这边直接装当前最新的 @vue/cli 4.3.1
npm install -g @vue/cli
OR
yarn global add @vue/cli

创建项目

参考官方文档

vue create hello-world // 创建项目

// 选择自定义配置
  default (babel, eslint)
> Manually select features

// 结合当前环境选择自己需要的配置
 (*) Babel
 (*) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
>(*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

// 选择自己的配置（一路 Y 就行）
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
// css 选自己熟悉的预编译语言
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
// lint 自选
? Pick a linter / formatter config: Prettier
// lint触发时机，建议两个都选
? Pick additional lint features:
 (*) Lint on save
>(*) Lint and fix on commit
// 最好选择在单独文件添加配置，在package.json中css编译会出问题
? 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? (y/N) y

项目结构

// 生成的项目结构，然后在项目的根目录新加两个文件 vue.config.js和.env.uat
hello-word
|--public/
|--src
    |--assets/
    |--components/
    |--router/
    |--store/
    |--views/
    |--App.vue
    |--main.ts
    |--shims-tsx.d.ts
    |--shims-vue.d.ts
|--browserslistrc
|--.env.uat // 添加环境配置文件
|--eslintrc.js
|--gitignore
|--babel.config.js
|--package.json
|--package-lock.json
|--README.md
|--tsconfig.json
|--vue.config.js // 添加配置文件，本地代理、打包路径，webpack相关等

vue.config.js具体配置参考官方文档

vue.config.js是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载

// vue.config.js

module.exports = {
    publicPath: process.env.VUE_APP_PUBLIC_PATH,
    devServer: {
        port: 8080,
        proxy: {
            '/api': {
                target: 'target ip port',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': '',
                }
            }
        }
    }
}

.env文件配置

.env.[uat]文件用来指定环境变量，默认情况下，一个 Vue CLI 项目有三个模式：development，production，test
development 模式用于 vue-cli-service serve
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
test 模式用于 vue-cli-service test:unit

// .env.[uat]

NODE_ENV=production  // 我们配置环境变量以打出不同的包，需要在production模式下
VUE_APP_PUBLIC_PATH=/demo/
VUE_APP_ROOT_PATH=/api

关于ts的配置

tsconfig.js

详细配置可以查看官方文档，这里只说项目中长用的。

 // 新建项目后生成的tsconfig.json文件，然后根据我们自己的项目需要来进行修改、添加、删除。
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "typeRoots": [
        "src/types"
    ],
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}