最近接手了一個新的項目喘批，@vue/cli vue+ts項目看政，總結(jié)下經(jīng)驗航罗。搭建開發(fā)環(huán)境爬舰。
主要參考官方文檔们陆。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

創(chuàng)建項目

參考官方文檔

vue create hello-world // 創(chuàng)建項目

// 選擇自定義配置
  default (babel, eslint)
> Manually select features

// 結(jié)合當前環(huán)境選擇自己需要的配置
 (*) 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觸發(fā)時機，建議兩個都選
? 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

項目結(jié)構(gòu)

// 生成的項目結(jié)構(gòu)，然后在項目的根目錄新加兩個文件 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 // 添加環(huán)境配置文件
|--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]文件用來指定環(huán)境變量，默認情況下凌摄，一個 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  // 我們配置環(huán)境變量以打出不同的包锨亏，需要在production模式下
VUE_APP_PUBLIC_PATH=/demo/
VUE_APP_ROOT_PATH=/api

關于ts的配置

tsconfig.js

詳細配置可以查看官方文檔痴怨，這里只說項目中長用的。

 // 新建項目后生成的tsconfig.json文件器予，然后根據(jù)我們自己的項目需要來進行修改浪藻、添加、刪除劣摇。
{
  "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"
  ]
}