1、初始化項目
npm init vite
image.png
image.png
2、安裝基礎依賴
vue全家桶中最新版本添加@next
npm i vue-router@next vuex@next axios sass
禁用vetur
image.png
安裝volar（支持vue3語法）
image.png
3、添加git commit message校驗
npm i --D yorkie
在package.json中
"gitHooks": {
"commit-msg": "node script/verify-commit-msg.js"
},
在項目文件中script/verify-commit-msg.js
安裝 npm i chalk -D
verify-commit-msg.js內容如下
const chalk = require('chalk')
const msgPath = process.env.GIT_PARAMS
const msg = require('fs').readFileSync(msgPath, 'utf-8').trim()
const commitRE = /^(revert: )?(feat|fix|polish|docs|style|refactor|perf|test|workflow|ci|chore|types|build)(\(.+\))?: .{1,50}/
if (!commitRE.test(msg)) {
console.log()
console.error(
` ${chalk.bgRed.white(' ERROR ')} ${chalk.red(`invalid commit message format.`)}\n\n` +
chalk.red(` Proper commit message format is required for automated changelog generation. Examples:\n\n`) +
` ${chalk.green(`feat(compiler): add 'comments' option`)}\n` +
` ${chalk.green(`fix(v-model): handle events on blur (close #28)`)}\n\n` +
chalk.red(` See .github/COMMIT_CONVENTION.md for more details.\n`) +
chalk.red(` You can also use ${chalk.cyan(`npm run commit`)} to interactively generate a commit message.\n`)
)
process.exit(1)
}
4、集成 eslint prettier stylelint
npm i eslint prettier @vue/eslint-config-prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-vue @vue/eslint-config-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
版本報錯問題：npm i @vue/eslint-config-prettier@6.* eslint-plugin-prettier@3.1.0 -D
新建文件 .eslintrc.js
module.exports = {
root: true,
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'plugin:vue/vue3-recommended',
'eslint:recommended',
'@vue/typescript/recommended',
'@vue/prettier',
'@/vue/prettier/@typescript-eslint'
],
// 這是初始生成的 將其中的內容更改為下面的
parserOptions: {
ecmaVersion: 'lastest'
},
globals: {
BMap: true,
BMapLib: true
},
rules: {
// 強制第一個屬性的位置(屬性換行)
'vue/first-attribute-linebreak': [
2,
{
// 單行時，第一屬性前不允許使用換行符
singleline: 'ignore',
// 多行時，第一屬性前必須使用換行符
multiline: 'below'
}
],
// 強制每行的最大屬性數
'vue/max-attributes-per-line': [
'warn',
{
// 單行時可以接收最大數量
singleline: 10,
// 多行時可以接收最大數量
multiline: {
max: 1
}
}
],
'no-unused-vars': 'off', // 未使用的變量
'vue/multi-word-component-names': 'off', // 組件名稱
'no-undef': 'off', // 禁止使用未定義的變量
'vue/valid-define-emits': 'off', // 組件的事件名稱
'no-var': 'off', // 禁止使用var
'no-redeclare': 'off', // 禁止重復聲明變量
camelcase: 'off', // 強制駝峰命名
semi: 'off', // 語句強制分號結尾
'no-useless-escape': 'off', // 禁止不必要的轉義
'no-prototype-builtins': 'off', // 禁止直接調用 Object.prototypes 的內置屬性
eqeqeq: 'off', // 必須使用全等
'vue/require-default-prop': 'off', // 必須設置默認值
'node/handle-callback-err': 'off', // 回調函數錯誤處理
'vue/no-v-model-argument': 'off', // 禁止使用 v-model 參數
'no-implied-eval': 'off', // 禁止使用隱式eval
'prefer-regex-literals': 'off', // 建議使用正則表達式字面量
'array-callback-return': 'off', // 強制數組方法的回調函數中有 return 語句
'vue/no-mutating-props': 'off', // 禁止修改 props
'vue/no-template-shadow': 'off', // 禁止在模板中使用變量
'prefer-promise-reject-errors': 'off', // 建議使用 Promise.reject
'vue/v-on-event-hyphenation': 'off', // 事件名稱
'vue/no-multiple-template-root': 'off', // 禁止多個模板根
'vue/attributes-order': 'off', // 屬性順序
'no-trailing-spaces': 'off' // 禁止行尾空格
}
};
新建文件 .prettierrc.js
module.exports = {
printWidth: 100, // 單行輸出（不折行）的（最大）長度
tabWidth: 2, // 每個縮進級別的空格數
useTabs: false, // 使用制表符 (tab) 縮進行而不是空格 (space)。
semi: true, // 是否在語句末尾打印分號
singleQuote: true, // 是否使用單引號
quoteProps: 'as-needed', // 僅在需要時在對象屬性周圍添加引號
jsxSingleQuote: false, // jsx 不使用單引號，而使用雙引號
trailingComma: 'none', // 去除對象最末尾元素跟隨的逗號
bracketSpacing: true, // 是否在對象屬性添加空格
jsxBracketSameLine: true, // 將 > 多行 JSX 元素放在最后一行的末尾，而不是單獨放在下一行（不適用于自閉元素）,默認false,這里選擇>不另起一行
arrowParens: 'always', // 箭頭函數，只有一個參數的時候，也需要括號
proseWrap: 'always', // 當超出print width（上面有這個參數）時就折行
htmlWhitespaceSensitivity: 'ignore', // 指定 HTML 文件的全局空白區域敏感度, "ignore" - 空格被認為是不敏感的
vueIndentScriptAndStyle: false, // 在VUE文件中不要縮進腳本和樣式標記
// stylelintIntegration: false,
endOfLine: 'auto'
};
在package.json中配置
"scripts": {
...
"lint": "eslint --fix --ext .js,.ts,.vue src/**"
}
代碼驗證
npm run lint // 運行此命令可全局驗證，并修復
代碼規范
npx prettier -w -u .
// 期間遇到警告 [warn] Ignored unknown option { tabs: false }. 該屬性改名可查看文檔
stylelint 格式化代碼
vscode中安裝插件stylelint
image.png
npm install --save-dev stylelint stylelint-config-standard
在項目根目錄下新建一個 .stylelintrc.js 文件，并輸入以下內容：
module.exports = {
extends: "stylelint-config-standard"
}
修改規則官方文檔https://github.com/stylelint/stylelint/blob/5a8465770b4ec17bb1b47f359d1a17132a204a71/docs/user-guide/rules/list.md
如果你想格式化 sass scss 文件
npm i -D stylelint-scss stylelint-config-standard-scss
并將 .stylelintrc.js做修改
module.exports = {
extends: "stylelint-config-standard-scss"
}
5、配置alias
文件vite.config.ts中
import { resolve } from 'path';
// 期間報錯：找不到模塊 ‘path’ 或其相對應的類型聲明
// 解決方法 npm i @types/node -D
const pathResolve = (dir: string): any => {
return resolve(__dirname, ".", dir)
}
export default defineConfig({
...
resolve: {
alias: {
'@': resolve('src')
}
}
});
文件tsconfig.json中
{
"compilerOptions": {
...
"baseUrl": ".",
"paths": {
"@/": ["/src/*"]
},
},
}
6、vscode中設置vue3+ts全局代碼片段
image.png
image.png
image.png
新建文件中輸入設置的快捷鍵 v3ts即出現如下代碼
image.png
"Print to console": {
"prefix": "v3ts", // 全局快捷鍵
"body": [
"<template>",
"",
"</template>",
"",
"<script lang='ts' setup>",
"",
"</script>",
"<style lang='scss' scoped>",
"</style>",
],
"description": "Log output to console"
}
7、安裝引入element-plus
npm install element-plus --save
按需導入
npm install -D unplugin-vue-components unplugin-auto-import
vite.config.ts配置
...
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
})
]
})
8、創建路由
router/index.ts
import { App } from 'vue'
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes:RouteRecordRaw[] = [
{
path: '/login',
name: 'Login',
component: () => import('../views/login/index.vue')
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export const initRouter = (app:App<Element>) => {
return app.use(router)
}
引入路由
main.ts
import { createApp } from 'vue'
import App from './App.vue'
import {initRouter} from './router'
const app = createApp(App)
// 初始化路由
initRouter(app)
app.mount('#app')
