目錄一,、安裝[email protected]工欲善其事,，必先利其器，我們需要安裝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. npm install -g mirror-config-china --registry=http://registry.npm. 二,、創(chuàng)建項目好了,，接下來我們可以開始創(chuàng)建項目了： vue create multi-tabs 首先你會看見這樣的界面： 接下來會有幾個連續(xù)的問題：
然后回車，項目就會開始自動構(gòu)建了,，當(dāng)顯示這樣的界面的時候,，就是構(gòu)建成功了： 三、項目配置為了有更好的開發(fā)體驗,，以及更規(guī)范的代碼,，我們在項目中引用了ESLint Preitter，所以,，我們現(xiàn)在就要來配置一下這兩個插件： 打開根目錄下的 /*** .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)建文件： {
"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"
}接著打開根目錄下的 {
"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配置我們選用的IDE是vscode（真的很好用） 給你的vscode安裝以下插件：vetur, eslint, prettier,，之后就可以進(jìn)行愉快的開發(fā)了 五,、vue.config.js配置在根目錄下新建文件夾config，然后在config文件夾下創(chuàng)建文件 /**
* 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,，可以將其設(shè)置為 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 ***/ 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 安裝 npm i [email protected] --save-dev 六,、篇章小結(jié)文章詳細(xì)描述了一個vue3 ts的項目，從零開始的搭建過程,，希望不了解vue3并想學(xué)習(xí)的程序員朋友們能夠喜歡,，并有所收益。 下一篇預(yù)告：第二章——vue3.0 ts element-plus多頁簽應(yīng)用模板：安裝vue-router與vuex篇 來源：https://www./content-4-901351.html |
|
|
