目錄

• 一、安裝vue-cli@4.5.x

• 二、創(chuàng)建項(xiàng)目

• 三、項(xiàng)目配置

• 四、IDE配置

• 五、vue.config.js配置

• 六、篇章小結(jié)

一、安裝vue-cli@4.5.x

工欲善其事，必先利其器，我們需要安裝vue-cli來(lái)創(chuàng)建項(xiàng)目（別問(wèn)為什么，問(wèn)就是簡(jiǎn)單、便捷、高效）。但是，在安裝之前，首先要保證你的電腦里有12以上的node.js，不然你直接運(yùn)行npm是會(huì)報(bào)錯(cuò)的。至于安裝node的方案，請(qǐng)自行網(wǎng)上搜索。

接下來(lái)，我們打開(kāi)電腦上的終端軟件（windows用powershell或者cmd），輸入以下代碼并回車(chē)：

npm install -g @vue/cli

如果覺(jué)得下載的時(shí)候網(wǎng)速太慢，可以切換一下淘寶源（分兩次執(zhí)行）：

npm config set registry https://registry.npm.
npm install -g mirror-config-china --registry=http://registry.npm.

二、創(chuàng)建項(xiàng)目

好了，接下來(lái)我們可以開(kāi)始創(chuàng)建項(xiàng)目了：

vue create multi-tabs

首先你會(huì)看見(jiàn)這樣的界面：

這里我們選擇最下面的Manually select features，然后回車(chē)

這里選擇TypeScript，上下鍵切換高亮行，空格選中，回車(chē)確認(rèn)。這里的Router和Vuex不用選，后面我們可以自己安裝

這里就是選擇我們vue的版本了，選擇下面的3.x

接下來(lái)會(huì)有幾個(gè)連續(xù)的問(wèn)題：

1. Use class-style component syntax? (y/N) 回答：n

2. Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) 回答：n

3. Pick a linter / formatter config 回答：ESLint Prettier | Lint on save

4. Where do you prefer placing config for Babel, ESLint, etc.? 回答：In dedicated config files

5. Save this as a preset for future projects? 回答：y，然后自己起個(gè)名，下次就可以直接用了

然后回車(chē)，項(xiàng)目就會(huì)開(kāi)始自動(dòng)構(gòu)建了，當(dāng)顯示這樣的界面的時(shí)候，就是構(gòu)建成功了：

三、項(xiàng)目配置

為了有更好的開(kāi)發(fā)體驗(yàn)，以及更規(guī)范的代碼，我們?cè)陧?xiàng)目中引用了ESLint Preitter，所以，我們現(xiàn)在就要來(lái)配置一下這兩個(gè)插件：

打開(kāi)根目錄下的.eslintrc.js，用下面的代碼覆蓋：

/*** .eslintrc.js ***/
module.exports = {
  root: true,
  env: {node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint'
  ],
  parserOptions: {ecmaVersion: 2020
  },
  rules: {quotes: ['error', 'single'],
    'comma-dangle': ['error', 'never'],
    'prettier/prettier': [
      'error',
      {vueIndentScriptAndStyle: false,
        endOfLine: 'auto'
      }
    ],
    'no-undef': 'off',
    'space-before-function-paren': 'off',
    'no-use-before-define': 'off',
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-unused-vars': [
      'error',
      {argsIgnorePattern: '^h$',
        varsIgnorePattern: '^h$'
      }
    ],
    '@typescript-eslint/ban-ts-ignore': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    '@typescript-eslint/no-use-before-define': 'off',
    '@typescript-eslint/ban-ts-comment': 'off',
    '@typescript-eslint/ban-types': 'off',
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-unused-vars': [
      'error',
      {argsIgnorePattern: '^h$',
        varsIgnorePattern: '^h$'
      }
    ],
    'vue/require-default-prop': 'off',
    'vue/custom-event-name-casing': 'off',
    'vue/comment-directive': 'off',
    'vue/singleline-html-element-content-newline': 'off',
    'vue/html-self-closing': 'off',
    'vue/max-attributes-per-line': 'off'
  }
}

在項(xiàng)目根目錄創(chuàng)建文件：.prettierrc，并輸入以下內(nèi)容

{
  "eslintIntegration": true,
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "vueIndentScriptAndStyle": false,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "bracketSpacing": true,
  "trailingComma": "none",
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "arrowParens": "always",
  "insertPragma": false,
  "requirePragma": false,
  "proseWrap": "never",
  "htmlWhitespaceSensitivity": "strict",
  "endOfLine": "auto"
}

接著打開(kāi)根目錄下的tsconfig.json，用下面的代碼覆蓋：

{
  "compilerOptions": {"target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
"allowJs": true,
    "sourceMap": false,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {  "@/*": [
        "src/*"
      ],
      "tslib" : ["path/to/node_modules/tslib/tslib.d.ts"]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

然后安裝tslib：

npm i tslib --save-dev

這樣，我們的項(xiàng)目就配置好了

四、IDE配置

我們選用的IDE是vscode（真的很好用）

給你的vscode安裝以下插件：vetur, eslint, prettier，之后就可以進(jìn)行愉快的開(kāi)發(fā)了

五、vue.config.js配置

在根目錄下新建文件夾config，然后在config文件夾下創(chuàng)建文件dev.config.js, prod.config.js，然后分別輸入以下代碼：

/**
 * dev.config.js
 * 開(kāi)發(fā)環(huán)境配置
 */
const CompressionPlugin = require('compression-webpack-plugin')
const options = {
  // 是否開(kāi)啟eslint保存檢測(cè)，有效值：ture | false | 'error'
  lintOnSave: true,
  // 配置webpack
  configureWebpack: {resolve: {  alias: {'@': resolve('src')
      }
    },
    plugins: [
      // 配置gzip
      new CompressionPlugin({algorithm: 'gzip',
        test: /\.(js|css)$/,
        threshold: 10240,
        deleteOriginalAssets: false,
        minRatio: 0.8
      })
    ]
  }
}

export default options

/**
 * prod.config.js
 * 生產(chǎn)環(huán)境配置
 */
const CompressionPlugin = require('compression-webpack-plugin')
const options = {
  // 如果你不需要生產(chǎn)環(huán)境的 source map，可以將其設(shè)置為 false 以加速生產(chǎn)環(huán)境構(gòu)建。
  productionSourceMap: false,
  // 用于放置生成的靜態(tài)資源 (js、css、img、fonts) 的；（項(xiàng)目打包之后，靜態(tài)資源會(huì)放在這個(gè)文件夾下）
  assetsDir: 'static',
  // 配置webpack
  configureWebpack: {resolve: {  alias: {'@': resolve('src')
      }
    },
    plugins: [
      // 配置gzip
      new CompressionPlugin({algorithm: 'gzip',
        test: /\.(js|css)$/,
        threshold: 10240,
        deleteOriginalAssets: false,
        minRatio: 0.8
      })
    ]
  }
}

export default options

在根目錄下新建文件vue.config.js，并輸入以下代碼：

/*** vue.config.js ***/
import DEV_CONFIG from './config/dev.config'
import PROD_CONFIG from './config/prod.config'

const IS_DEV = process.env.NODE_ENV === 'development'

module.exports = IS_DEV ? DEV_CONFIG : PROD_CONFIG

安裝compression-webpack-plugin@1.1.12（千萬(wàn)不要安裝最新版，安裝指定的1.1.12版）：

npm i compression-webpack-plugin@1.1.12 --save-dev

六、篇章小結(jié)

文章詳細(xì)描述了一個(gè)vue3 ts的項(xiàng)目，從零開(kāi)始的搭建過(guò)程，希望不了解vue3并想學(xué)習(xí)的程序員朋友們能夠喜歡，并有所收益。

下一篇預(yù)告：第二章——vue3.0 ts element-plus多頁(yè)簽應(yīng)用模板：安裝vue-router與vuex篇