目录
前言
项目地址
项目初始化
git初始化
别名配置
解决vscode报错
vue-router安装
pinia安装
环境配置
axios安装
element-plus按需引入
eslint与prettier安装
scss安装
stylelint配置
代码提交规范配置
husky与lint-stage配置
前言
pnpm和npm的命令行完全一样，如果不想用pnpm的同学可以直接用npm，点击这里看看npm和pnpm有什么区别。
项目地址
如果在安装过程中遇到了什么问题，可以直接到克隆下我的项目去排查原因，欢迎star。
项目初始化
pnpm create vite然后按照提示操作即可！
cd my-project
pnpm install
pnpm run dev此时项目已经运行成功了。
git初始化
git init
git add .# .gitignore文件添加node_modules/
node_modules/ git初始化是为了提高项目容错率，以免我们删除错文件的时候可以直接撤回。.gitignore已经内置在项目，不需要再添加。接下来每当我们进行一步操作，都可以进行一次记录，这里就不重复演示了。
别名配置
// vite.config.ts
import { resolve } from 'path'
resolve: { alias: { '@': resolve(__dirname, 'src') }
} 解决vscode报错
1. vite.config.ts
pnpm install --save-dev @types/node 报错原因：typescript 无法识别 node 内置模块类型，所以安装一个node的类型
2. main.ts文件中
在src文件夹下新建一个文件shims-vue.d.ts。
// shims-vue.d.ts
declare module '*.vue' { import { ComponentOptions } from 'vue' const componentOptions: ComponentOptions export default componentOptions
} 报错原因：typescript 只能理解 .ts 文件，无法理解 .vue 文件，所以必须得给vue文件声明类型模块。
vue-router安装
pnpm install vue-router@4 src下新建router/index.ts用于配置路由，新建views/home/index.vue文件和views/my/index.vue文件用于路由区分。
import { Router, createRouter, createWebHistory } from 'vue-router'
const router: Router = createRouter({ history: createWebHistory(), routes: [ { path: '/', redirect: '/home' }, { name: 'Home', path: '/home', component: () => import('@/views/home/index.vue') }, { name: 'My', path: '/my', component: () => import('@/views/my/index.vue') } ]
})
router.beforeEach((to, from, next) => { /* 路由守卫逻辑 */ next()
})
export default router// main.ts
import Router from './router/index.ts'
createApp(App).use(Router).mount('#app') pinia安装
pnpm i pinia在src文件夹下新建store/index.ts，store/count.ts。
// main.ts
import { createPinia } from "pinia"
createApp(App).use(router).use(createPinia()).mount('#app')到这里，pinia已经引入成功了。下面是测试代码，看pinia是否可以正常运行。
// store/modules/count.ts
import { defineStore } from "pinia"
import { ref } from 'vue'
export const useCounterStore = defineStore('counter', () => { const count = ref<number>(0) function increment() { console.log('count.value: ', count.value); count.value++ } return { count, increment }
})<template> <div @click="increment">{{ count }}</div>
</template>
<script setup lang="ts" name="My"> import { useCounterStore } from '@/store/modules/count.ts' import { storeToRefs } from 'pinia' const store = useCounterStore() const { count } = storeToRefs(store) const { increment } = store
</script> npm run dev正常运行。
npm run build报错。
通过以下配置 tsconfig.json 和 vite.config.ts 解决了报错，原因尚未清楚(懂的大佬请在评论区指点一下吧)。
// ts.config.json 新增以下内容
"compilerOptions" { "baseUrl": "./", "paths": { "@": ["src/*"], "store/*": ["src/store/*"] },
}// vite.config.ts
resolve: { alias: { '@': resolve(resolve(__dirname, 'src')), 'store': resolve(resolve(__dirname, 'src/store')), }
}<template> <div @click="increment">{{ count }}</div>
</template>
<script setup lang="ts" name="My"> import { storeToRefs } from 'pinia' import { useCounterStore } from 'store/count.ts' // 这里不使用@，直接用store const store = useCounterStore() const { count } = storeToRefs(store) const { increment } = store
</script> 环境配置
在根目录创建.env,.env.development,.env.production
.env # 所有情况下都会加载
.env.local # 所有情况下都会加载，但会被 git 忽略
.env.[mode] # 只在指定模式下加载
.env.[mode].local # 只在指定模式下加载，但会被 git 忽略在.env文件中配置环境变量时，必须以VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。
// .env.development
VITE_APP_BASE_URL="dev"// .env.production
VITE_APP_BASE_URL="production" // .env
VITE_APP_BASE_URL="env" axios安装
pnpm i axiossrc下创建api/index.js
import axios from 'axios'
const baseURL = import.meta.env.VITE_APP_BASE_URLconst service = axios.create({ baseURL, timeout: 30000 })
service.interceptors.request.use(config => { const token = localStorage.getItem('token') if (token && !config.headers.Authorization) { config.headers.Authorization = 'Bearer ' + token } /* 接口发送请求拦截器逻辑 */ return config
}, error => { return error
})
service.interceptors.response.use(response => { /* 接口响应请求拦截器逻辑 */ return response.data
}, error => { return error
})
export default serviceelement-plus按需引入
pnpm i element-plus
pnpm i -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' plugins: [ vue(), AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], })
] 它会默认生成auto-imports.d.ts和components.d.ts，总是会提交代码的时候冲突，可以直接在.gitignore忽略它。
eslint与prettier安装
pnpm i eslint \
@typescript-eslint/parser \
@typescript-eslint/eslint-plugin \
eslint-config-airbnb-base \
eslint-config-prettier \
eslint-plugin-import \
eslint-plugin-prettier \
eslint-plugin-vue \
prettier \
vite-plugin-eslint -D \根目录下创建.eslintrc.cjs
module.exports = { env: { browser: true, es2021: true, node: true }, globals: { defineEmits: true, document: true, localStorage: true, GLOBAL_VAR: true, window: true, defineProps: true, defineExpose: true, withDefaults: true }, extends: [ 'airbnb-base', 'plugin:@typescript-eslint/recommended', 'plugin:vue/vue3-recommended', 'plugin:prettier/recommended' // 添加 prettier 插件 ], parserOptions: { ecmaVersion: 'latest', parser: '@typescript-eslint/parser', sourceType: 'module' }, plugins: ['vue', '@typescript-eslint', 'import'], rules: { indent: [ 2, 2, { SwitchCase: 1 } ], quotes: [2, 'single'], // 要求尽可能地使用单引号 'no-plusplus': 'off', 'import/no-extraneous-dependencies': [ 'error', { devDependencies: true } ], 'vue/multi-word-component-names': 'off', 'import/no-unresolved': 'off', 'import/extensions': 'off', 'no-console': 'off', 'consistent-return': 'off', 'no-param-reassign': 'off', 'new-cap': 'off', 'no-shadow': 'off', 'no-underscore-dangle': 'off', 'vue/no-v-html': 'off', 'no-restricted-syntax': 'off', 'guard-for-in': 'off', 'import/prefer-default-export': 'off', // 'no-redeclare': 'off', 'no-unused-expressions': 'off', '@typescript-eslint/ban-types': 'warn' }
}自定义一些 规则 ，使其更加符合规范的同时也更加符合我们的开发习惯。
根目录下创建.prettierrc
{ "semi": false, "endOfLine": "auto", "singleQuote": true, "trailingComma": "none", "bracketSpacing": true, "jsxBracketSameLine": false, "vueIndentScriptAndStyle": false, "jsxBracketSameLine:": true, "htmlWhitespaceSensitivity": "ignore", "wrapAttributes": true, "overrides": [ { "files": "*.html", "options": { "parser": "html" } } ]
}根目录下新建添加.eslintignore，让eslint忽略校验这些文件或者文件夹。
dist/
node_modules/
/public/
/src/assets/
components.d.ts在package.json的scripts中添加一些命令行，这样运行命令行也可以对这些代码进行校验或者自动化调整了。
{ "lint": "eslint --ext .js,.vue", "lint:fix": "eslint --fix --ext .js,.vue --ignore-path .eslintignore .", "prettier": "prettier --check .", "prettier:fix": "prettier --write .",
}这样eslint和prettier的配置就就大功告成了。
scss安装
依赖安装
pnpm i sass -Dvite4貌似已经支持直接导入scss。如果报错了可以尝试在vite.config.js里面添加配置。
{ css: { preprocessorOptions: { scss: { additionalData: '@import "src/style/index.scss";' } } }
}stylelint配置
pnpm create stylelint在根目录创建 .stylelintignore，用于忽略 stylelint 校验。
dist/
node_modules/
/src/assets *.js同样，在package.json的scripts中添加两条自定义命令行，使其进行校验或者自动格式化。
{ "stylelint:fix": "stylelint --fix src/**/*.{vue,scss,css,sass}", "stylelint": "stylelint src/**/*.{vue,scss,css,sass}"
}代码提交规范配置
pnpm i commitizen git-cz -D在根目录创建changelog.config.json。
不允许配置js文件，因为当前项目已经配置了type:module。
{ "disableEmoji": false, "format": "{type}{scope}: {emoji}{subject}", "list": [ "test", "feat", "fix", "chore", "docs", "refactor", "style", "ci", "perf", "global" ], "maxMessageLength": 64, "minMessageLength": 3, "questions": [ "type", "scope", "subject" ], "scopes": [], "types": { "chore": { "description": "Build process or auxiliary tool changes", "emoji": "🤖", "value": "chore" }, "ci": { "description": "CI related changes", "emoji": "🎡", "value": "ci" }, "docs": { "description": "Documentation only changes", "emoji": "✏️", "value": "docs" }, "feat": { "description": "A new feature", "emoji": "🎸", "value": "feat" }, "fix": { "description": "A bug fix", "emoji": "🐛", "value": "fix" }, "perf": { "description": "A code change that improves performance", "emoji": "⚡️", "value": "perf" }, "refactor": { "description": "A code change that neither fixes a bug or adds a feature", "emoji": "💡", "value": "refactor" }, "release": { "description": "Create a release commit", "emoji": "🏹", "value": "release" }, "style": { "description": "Markup, white-space, formatting, missing semi-colons...", "emoji": "💄", "value": "style" }, "test": { "description": "Adding missing tests", "emoji": "💍", "value": "test" }, "global": { "description": "change global configuration", "emoji": "🌏", "value": "global" }, "messages": { "type": "Select·the·type·of·change·that·you're·committing:", "customScope": "Select the scope this component affects:", "subject": "Write a short, imperative mood description of the change:\n", "body": "Provide a longer description of the change:\n ", "breaking": "List any breaking changes:\n", "footer": "Issues this commit closes, e.g #123:", "confirmCommit": "The packages that this commit has affected\n" } }
}在package.json中新加一些配置和自定义命令
{ "scripts": { ... "cm": "git cz" }, "config": { "commitizen": { "path": "git-cz" } }
}代码提交的时候，运行以下命令，然后根据命令提示即可。
git add .
npm run cmhusky与lint-stage配置
代码风格自动化，会在用户提交代码的时候将修改的文件自动格式化一次。
pnpm install husky lint-staged -Dnpm run prepare在.husky文件夹下创建 pre-commit 文件
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"npx lint-staged在package.json添加一些husky和lint-staged的配置
{ "scripts": { "prepare": "husky install", }, "lint-staged": { "src/**/*.{js,jsx,ts,tsx}": "npm run lint:fix", "src/**/*.{vue,scss,css,sass}": "npm run stylelint:fix" }
}大功告成，现在要提交代码，就会先经过elint和stylelint的格式校验。如果像是格式化的问题会直接帮你修复，但一些需要删除代码的就需要自己手动去删除了。
