工欲善其事，必先利其器，我們需要安裝vue-cli來創(chuàng)建項目（別問為什么，問就是簡單、便捷、高效）。但是，在安裝之前，首先要保證你的電腦里有12以上的node.js，不然你直接運行npm是會報錯的。至于安裝node的方案，請自行網(wǎng)上搜索。
接下來，我們打開電腦上的終端軟件（windows用powershell或者cmd），輸入以下代碼并回車：
npm install -g @vue/cli
如果覺得下載的時候網(wǎng)速太慢，可以切換一下淘寶源（分兩次執(zhí)行）：
npm config set registry https://registry.npm.taobao.orgnpm install -g mirror-config-china --registry=http://registry.npm.taobao.org
好了，接下來我們可以開始創(chuàng)建項目了：
vue create multi-tabs
首先你會看見這樣的界面：
Manually select features，然后回車
TypeScript，上下鍵切換高亮行，空格選中，回車確認。這里的Router和Vuex不用選，后面我們可以自己安裝
3.x接下來會有幾個連續(xù)的問題：
Use class-style component syntax? (y/N) 回答：n
Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) 回答：n
Pick a linter / formatter config 回答：ESLint Prettier | Lint on save
Where do you prefer placing config for Babel, ESLint, etc.? 回答：In dedicated config files
Save this as a preset for future projects? 回答：y，然后自己起個名，下次就可以直接用了
然后回車，項目就會開始自動構(gòu)建了，當顯示這樣的界面的時候，就是構(gòu)建成功了：
為了有更好的開發(fā)體驗，以及更規(guī)范的代碼，我們在項目中引用了ESLint Preitter，所以，我們現(xiàn)在就要來配置一下這兩個插件：
打開根目錄下的.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' }}在項目根目錄創(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"}接著打開根目錄下的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
這樣，我們的項目就配置好了
我們選用的IDE是vscode（真的很好用）
給你的vscode安裝以下插件：vetur, eslint, prettier，之后就可以進行愉快的開發(fā)了
在根目錄下新建文件夾config，然后在config文件夾下創(chuàng)建文件dev.config.js, prod.config.js，然后分別輸入以下代碼：
/** * dev.config.js * 開發(fā)環(huán)境配置 */const CompressionPlugin = require('compression-webpack-plugin')const options = { // 是否開啟eslint保存檢測，有效值：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，可以將其設置為 false 以加速生產(chǎn)環(huán)境構(gòu)建。 productionSourceMap: false, // 用于放置生成的靜態(tài)資源 (js、css、img、fonts) 的；（項目打包之后，靜態(tài)資源會放在這個文件夾下） 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（千萬不要安裝最新版，安裝指定的1.1.12版）：
npm i compression-webpack-plugin@1.1.12 --save-dev
文章詳細描述了一個vue3 ts的項目，從零開始的搭建過程，希望不了解vue3并想學習的程序員朋友們能夠喜歡，并有所收益。
下一篇預告：第二章——vue3.0 ts element-plus多頁簽應用模板：安裝vue-router與vuex篇
來源：https://www.icode9.com/content-4-901351.html