web端vue3项目搭建，不试试？
有些话要先说
各位好兄弟，广州有没有前端hc？
目前工作三年，vue/小程序/uniapp/h5 技术栈都行，来个内推，一起干奶茶...
一、 说明
技术栈：
vue3 + ts + pina + vue-router + axios + vue-next
目标：
1、引入vue-router配置路由，引入pina用作状态管理，引入vue-next UI组件库
2、代码eslint，prettier，styelint，git提交等规范检测
3、组件自动导入，vue钩子API自动导入
3、基于axios的http请求方法封装，全局的响应提示交互
二、 统一规范
1、初始化项目
npm create vite@latest my-vue-app --template vue
初始化后的包结果
"@vitejs/plugin-vue": "^4.0.0",
"typescript": "^4.9.3",
"vite": "^4.1.0",
"vue-tsc": "^1.0.24"
初始化后的vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
})
2、eslint
eslint可以检查代码，统一代码风格，避免不必要的错误，下面我们选用eslint的标准库来配置
安装基本的eslint库
npm install --save-dev eslint eslint-plugin-promise eslint-plugin-import eslint-plugin-node
针对vue项目，还需要安装能够支持vue的库，@vue/eslint-config-standard为标准库
npm install --save-dev @vue/eslint-config-standard
在package.json文件scripts对象添加以下命令
"lint:create": "eslint --init", // 初始化eslint配置
"lint": "eslint "src/**/*.{js,jsx,vue,ts,tsx}" --fix --cache"
执行
npm run lint:create
配置选择参考
最后一步安装完库文件之后，可以看到根目录自动生产了.eslintrc.cjs文件，内容如下
// 默认配置
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'eslint:recommended',
'plugin:vue/vue3-essential',
'plugin:@typescript-eslint/recommended'
],
overrides: [
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
plugins: [
'vue',
'@typescript-eslint'
],
rules: {
}
}
注意
1、 该默认配置是不完整的且无法使eslint正常工作的
2、 extends参数接收的是一个数组，为递进关系，vue的代码最终会被解析成ts，因此关于vue的插件应该在ts的插件之前，因为选用的是针对vue项目的eslint标准库，还需要补充一个@vue/standard
3、 parser为解析器，不能直接使用@typescript-eslint/parser，根据文档的解释是这个插件需要 vue-eslint-parser 来解析 .vue 文件，parser值为@typescript-eslint/parser是无法起作用的，因此需要作为自定义选项传入
为了解决以上问题，需要修改.eslintrc.cjs
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'eslint:recommended',
'@vue/standard',
'plugin:vue/vue3-essential',
'plugin:@typescript-eslint/recommended'
],
overrides: [
],
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 'latest',
sourceType: 'module'
},
plugins: [
'vue',
'@typescript-eslint'
],
rules: {
// 自定义规则，优先级最高，会重写配置的规则
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
// 关闭组件命名规则
'vue/multi-word-component-names': 'off'
}
}
最后根目录新建.eslintignore文件
# eslint 忽略检查 (根据项目需要自行添加)
node_modules
dist
vscode中，安装eslint插件
vscode的settings.json文件中添加以下代码
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
到此，eslint已经可以正常工作了，并且在出现语法报错的文件，保存后，vscode可以自动进行简单的修复
3、husky
提交之前对暂存区的文件进行eslint检查，存在校验报错则不允许提交
新项目执行git初始化
git init
安装git hooks插件husky ，lint-staged插件
husky：可以对git的各种操作注入钩子
lint-staged: 针对暂存区的文件进行eslint检测
npm install lint-staged husky -D
package.json添加命令
"prepare": "husky install"
执行命令，安装husky和lint-staged
npm run prepare
添加git hooks钩子
添加./husky/pre-commit文件，追加（add）内容为npx lint-staged
npx husky add .husky/pre-commit "npx lint-staged"
package.json添加配置项
"lint-staged": {
"src/**/*.{js,jsx,vue,ts,tsx}": [
"eslint",
"git add"
]
}
以上操作可以实现，每次进行git commit 操作，将执行pre-commit钩子里面的代码，从而执行lint-staged配置项的eslint， git add 命令
4、commitlint
添加一个插件对每次提交的注释进行校验
npm install @commitlint/config-conventional @commitlint/cli -D
添加到commit-msg 钩子里
npx husky add .husky/commit-msg "npx --no -- commitlint --edit ${1}"
根目录新建一个commitlint.config.cjs文件
进行git commit -m "提交说明"操作时，对提交说明会按照commitlint.config.cjs配置的规则进行校验，不通过则不能提交（不通过一般提示：husky - commit-msg hook exited with code 1 (error)）
// 采用的提交规范 https://github.com/conventional-changelog/commitlint/tree/master/@comtimitlint/config-conventional
// 简单说明
// type: subject
// type取值：['build','chore','ci','docs','feat','fix','perf','refactor','revert','style','test'], 必填/小写
// subject取值：必填/小写/不能以'.'结束
module.exports = {
extends: ['@commitlint/config-conventional']
}
5、style-lint
看项目需要，可以不配置这一部分
vscode安装插件styleLint，修改vscode本地配置文件settings.json，添加以下代码
{
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
},
"stylelint.validate": ["css","scss","less","vue"]
}
安装常见的规则包
npm install --save-dev stylelint stylelint-config-standard
根目录建立.stylelintrc.cjs
module.exports = {
extends: ["stylelint-config-standard"]
}
手动检查现有的样式问题，保存会执行vscode本地配置文件settings.json中配置的自动修复语句
npx stylelint "**/*.css"
如果使用了样式预处理器，需要额外的插件支持（针对不同的预处理器，安装的插件也不一样）
// less
npm install stylelint-less stylelint-config-recommended-less -D
// sass
// 由于stylelint@14以上版本不兼容vue3,因此要补充以下插件
npm install stylelint-config-html stylelint-config-recommended-vue stylelint-config-standard-scss stylelint-config-recommended-scss stylelint-order postcss postcss-html -D
修改.stylelintrc.cjs
module.exports = {
extends: [
"stylelint-config-standard",
"stylelint-config-html/vue",
"stylelint-config-standard-scss",
'stylelint-config-recommended-vue/scss'
]
}
package.json中添加自动修复命令
"lint:css": "stylelint **/*.{vue,css,sass,scss,less} --fix"
给vite添加插件
npm install vite-plugin-stylelint -D
vite.package.js中使用插件
import StylelintPlugin from 'vite-plugin-stylelint'
plugin: [...StylelintPlugin({fix:true})]
添加到lint-staged里面，对暂存区文件进行格式化
"lint-staged": {
...
"*{vue,less,css,sass}": {
"npm run lint:css"
}
}
最后添加一个忽略文件.stylelintignore
/dist/*
/public/*
6、环境变量
根目录下 .env.[mode] 用作不同环境的配置文件
比如不同环境的域名可以声明在对应的配置文件中，根目录下以下文件
#.env 文件
# 默认，可以用作开发环境 run dev build 对应
# VUE_APP_ 属性名
ENV='development'
# base api
VITE_APP_BASE_URL='www.baidu.com'
VITE_APP_BASE_NAME='VUE项目'
# .env.production 文件
# 生产环境 run dev buil:pro 对应
# VUE_APP_ 属性名
ENV='production'
# base api
VITE_APP_BASE_URL='www.google.com'
VITE_APP_BASE_NAME='VUE项目'
package.json中新增打包命令
"build": "vite build",
"build:pro": "vue-tsc --noEmit && vite build --mode production"
在vite中读取环境变量
import.meta.env.VITE_APP_BASE_URL
判断开发环境还是生产环境
import.meta.env.DEV // 开发
import.meta.env.PROD // 生产
三、 ts基本配置
tsconfig.json的默认配置
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"moduleResolution": "Node",
"strict": true,
"jsx": "preserve",
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": ["ESNext", "DOM"],
"skipLibCheck": true,
"noEmit": true
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}
修改tsconfig.json文件，compilerOptions配置项添加paths，用于解决"xx模块找不到"报错
"compilerOptions": {
...,
"baseUrl": ".",
"types": ["node", "vite/client"],
"paths": {
"@/*": ["src/*"],
"types/*": ["types/*"]
}
}
四、 vite基本配置
vite.config.ts的默认配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
})
现加入路径别名，服务端配置，以及打包过程去除debugger，console
...;
import path from "path"
const pathSrc = path.resolve(__dirname, "src")
const publicSrc = path.resolve(__dirname, "public")
export default defineConfig({
...,
resolve: {
alias: {
"@/": `${pathSrc}/`,
"public/": `${publicSrc}/`,
},
},
base: "./", // 设置打包路径
server: {
port: 4000, // 设置服务启动端口号
open: false, // 设置服务启动时是否自动打开浏览器
cors: true, // 允许跨域
https: false,
// 设置代理，根据我们项目实际情况配置
// proxy: {
// '/api': {
// target: 'http://xxx.xxx.xxx.xxx:8000',
// changeOrigin: true,
// secure: false,
// rewrite: (path) => path.replace('/api/', '/')
// }
// }
},
build: {
terserOptions: {
compress: {
// 生产环境去除console debugger
drop_console: true,
drop_debugger: true,
},
},
}
})
五、 引入vue-router
1、安装
npm i vue-router@4
2、在src下创建router目录，在该目录下新建index.ts
└── src/
├── router/
├── index.ts // 路由配置文件
import {
createRouter,
createWebHashHistory,
RouteRecordRaw
} from 'vue-router'
import Home from '@/views/home.vue'
import Guide from '@/views/guide.vue'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/guide',
name: 'guide',
component: () => import('@/views/guide.vue') // 懒加载组件
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
3、在 main.ts 中引入并使用
import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
createApp(App)
.use(router)
.mount('#app')
六、 引入pina
1、 pina官方团队推荐代替vuex的一款轻量级状态管理库
npm i pinia --save
2、 新建 src/store 目录并在其下面创建 index.ts，导出 store
import { createPinia } from 'pinia'
const store = createPinia()
export default store
3、 在main.ts中引入并使用
import { createApp } from 'vue'
import App from './App.vue'
import store from '@/store'
createApp(App)
.use(store)
.mount('#app')
4、 定义state
import { defineStore } from 'pinia'
export const globalStore = defineStore('global', {
state: () => {
return {
token: 'token',
isLogin: false
}
},
getters: {
isToken: (state) => !!state.token
},
actions: {
updatedLogin (flag: boolean) {
this.isLogin = flag
}
}
})
5、 读取
import { globalStore } from '@/store/modules/global'
const useGlobalStore = globalStore()
console.log(useGlobalStore.token, 'useGlobalStore.token')
console.log(useGlobalStore.isToken, 'useGlobalStore.isToken')
console.log(useGlobalStore.updatedLogin(true))
七、 按需自动导入配置
1、 安装插件
参考文档：www.npmjs.com/package/unp…
npm i -D unplugin-auto-import
2、 自动导入 Vue 相关函数，如：ref, reactive, toRef 等，vue-router，pina，自定义钩子等
修改vite.config.js，添加以下配置
plugins: [
...,
AutoImport({
// 自动导入的钩子
imports: [
'vue',
'vue-router',
'pinia',
// 自定义钩子，格式：xx模块：xx钩子
// {
// '@/hooks/modules/hook-global/index':['useGlobalApi']
// }
],
// 生成自动导入的TS声明文件, 默认路径 ./auto-imports.d.ts
dts: './auto-imports.d.ts',
// 1、改为true用于生成eslint配置
// 2、生成后改回false，避免重复生成消耗
// 3、重新npm run dev 会自动生成 .eslintc-auto-import.json
// 4、手动在.eslintrc中引入
eslintrc: {
enabled: true
},
})
]
修改tsconfig.json，将上一步生成的TS声明文件添加到ts编译中
{
"include": [
...,
"./auto-imports.d.ts"
]
}
手动在.eslintrc中引入 .eslintc-auto-import.json
extends: [
...,
"./.eslintrc-auto-import.json"
]
3、 组件的自动引入
npm i unplugin-vue-components/vite -D
在页面组件中，不用手动导入组件，直接使用组件的方式：
vite.config.js中添加以下配置
plugins: [
...,
Components({
// 指定自动导入的组件位置，默认是 src/components
// 由于src/components 下的组件会自动引入，所以一般用作全局公共组件
dirs: ['src/components'],
})
]
unplugin-vue-components对应会在根目录生成components.d.ts文件，分别描述自动导入的 API、component。修改tsconfig.json，将上一步生成的TS声明文件添加到ts编译中
{
"include": [
...,
"components.d.ts"
]
}
八、 引入vue-next UI组件库
参考文档：tdesign.tencent.com/vue-next/ge…
1、 安装
npm i tdesign-vue-next
1、 通过插件按需引入（第七节已经安装）
npm install -D unplugin-vue-components unplugin-auto-import
然后在 Vite 对应的配置文件添加上述插件。
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { TDesignResolver } from 'unplugin-vue-components/resolvers';
export default {
plugins: [
// ...
AutoImport({
resolvers: [TDesignResolver({
library: 'vue-next'
})],
}),
Components({
resolvers: [TDesignResolver({
library: 'vue-next'
})],
}),
],
};
未完待续...
转载自:https://juejin.cn/post/7208571916146540601