一、安裝 nodejs 環(huán)境
推薦最新穩(wěn)定版本nodejs
方式一：直接下載并安裝 nodejs
https://nodejs.org/en
方式二：使用 nodejs 版本管理工具 nvm 下載安裝 nodejs
注意：如果本機(jī)已經(jīng)安裝了 nodejs 版本，請(qǐng)先卸載再進(jìn)行 nvm 安裝
- nvm 下載地址
https://github.com/coreybutler/nvm-windows/releases
- 使用 nvm 安裝 nodejs
nvm install 16.16.0
如果總是安裝失敗，建議將下載鏡像源指向淘寶（這步也很重要，否則在安裝 node 的時(shí)候會(huì)出現(xiàn)卡死，npm 安裝不成功的情況），打開 nvm 安裝包下的 settings.txt 文件，在最后添加以下代碼：
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/
- 切換到指定版本的 nodejs
nvm use 16.16.0
- nvm 常用命令
nvm list 查看已有的版本列表
nvm use 16.16.0 切換nodejs版本
nvm install 16.16.0 下載nodejs
nvm uninstall 16.16.0 卸載nodejs
npm install -g cnpm --registry=https://registry.npmmirror.com 安裝cnpm淘寶鏡像
二、創(chuàng)建vue3項(xiàng)目
方式一：通過 @vue/cli 創(chuàng)建項(xiàng)目 （webpack）
注意：node 版本必須在 v9 以上，如果本機(jī)項(xiàng)目依賴 v9 版本以下 nodejs，建議使用 nodejs 版本管理工具 nvm
- 全局安裝@vue/cli 腳手架
npm install -g @vue/cli
安裝成功后，查看 vue 版本
vue -V
- 初始化 vue3x 項(xiàng)目
vue create vue3-app
選項(xiàng)
1. Manually select features (手動(dòng)選擇)
2. Babel + Router + Vux + Css Pre-processors + Linter / Formatter
3. 3.x
4. Y
5. Sass/SCSS(with dart-sass)
6. Eslint + Prettier
7. Lint on save + Lint and fix on commit
8. In dedicated config files
9. Y （保存為默認(rèn)設(shè)置）
- 啟動(dòng)項(xiàng)目
cd vue3-app
npm run serve
方式二：通過 vite 創(chuàng)建項(xiàng)目（vite構(gòu)建 + rollup打包）
注意：node 版本必須在 v16.0.0 以上， npm版本必須在 v8.0.0 以上
- 創(chuàng)建vue3項(xiàng)目
npm init vue@latest
選項(xiàng)
? Project name: … vue3-app-vite
? Add TypeScript? … No
? Add JSX Support? … No
? Add Vue Router for Single Page Application development? … No
? Add Pinia for state management? … No / Yes
? Add Vitest for Unit testing? … No
? Add Cypress for both Unit and End-to-End testing? … No
? Add ESLint for code quality? … Yes
? Add Prettier for code formatting? … Yes
- 安裝依賴并啟動(dòng)項(xiàng)目
cd vue3-app-vite
npm install
npm run dev
三、eslint+prettier 實(shí)現(xiàn)代碼自動(dòng)格式化
1. 在vscode中安裝Eslint、Prettier - Code formatter 插件
2. 在vscode中將默認(rèn)格式化插件設(shè)置成 Prettier - Code formatter
步驟：右鍵 --> 使用...格式化文檔 --> 配置默認(rèn)格式化程序...
3. 添加 .prettierrc.json 配置并執(zhí)行全局eslint校驗(yàn)
解決頁面初始化 prettier 爆紅問題，如果配置后不生效需重啟編輯器
- 在項(xiàng)目根目錄新建 .prettierrc.json 文件，代碼如下
原因是在不同系統(tǒng)下的行尾換行符不同，我們這里忽略此檢查，否則全局飄紅
{
"endOfLine": "auto",
"printWidth": 200
}
- 執(zhí)行全局eslint校驗(yàn)
npm run lint
- 在 .eslintrc.cjs 中添加自定義 rules 規(guī)則 和 env 配置
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
env: {
node: true // 識(shí)別 nodejs 配置
},
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-prettier/skip-formatting'
],
parserOptions: {
ecmaVersion: 'latest'
},
rules: {
'vue/multi-word-component-names': 'off', // 默認(rèn)vue文件必須大駝峰命名，off 關(guān)閉文件名稱校驗(yàn)
}
}
4. 對(duì)vue3項(xiàng)目進(jìn)行全局eslint檢驗(yàn)和Prettier格式化
vue3 項(xiàng)目 package.json
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
"format": "prettier --write src/"
},
- 全局 eslint 檢驗(yàn)
npm run lint
- 全局 Prettier 格式化
npm run format
