今天是一年一度的七夕节,我在家躺了一天;总感觉应该做点什么,但是不知道做什么,或者如果我没有那么粘人,我今天也不会去写这一篇文章吧!
开篇
今天这篇文章讲了vite+vue3企业级主要搭建的功能,大家根据跟我步骤一步一步的去搭建一个企业级项目,当然还有一部分功能需要你根据自己的需要自行添加。
1.创建项目
通过vite去创建一个初始项目
typescript
npm create vite@latest
2.配置tsconfig
1.vite-env.d.ts文件
typescript
//声明.vue文件
declare module "*.vue" {
import { DefineComponent } from "vue";
const component: DefineComponent<object, object, any>;
export default component;
}
2.配置路径别名
- 安装
typescript
npm install @types/node -D
- 修改vite.config.ts
typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve:{
alias: {
'@': path.resolve('./src'), // 设置别名
}
}
})
- 修改tsconfig.app.json
typescript
"baseUrl": ".", //查询的基础路径
"paths": { "@/*": ["src/*"] }, //路径映射,配合别名使用
3.配置ESLint和prettier
针对eslint以及prettier做一些语法上面的验证
1.安装
typescript
// eslint 安装
npm install eslint@^8.39.0 -D
// eslint vue插件安装
npm install eslint-plugin-vue@^9.11.0 -D
//eslint 识别ts语法
npm install @typescript-eslint/parser@^6.19.0 -D
//eslint ts默认规则补充
npm install @typescript-eslint/eslint-plugin@^6.19.0 -D
//eslint prettier插件安装
npm install eslint-plugin-prettier@^5.1.3 -D
//用来解决与eslint的冲突
npm install eslint-config-prettier@^9.1.0 -D
//安装prettier
npm install prettier@^3.2.4 -D
2. 新建.eslintrc.cjs
typescript
module.exports = {
env: {
browser: true,
node: true,
es2021: true,
},
parser: "vue-eslint-parser",
extends: [
"eslint:recommended", //继承 ESLint 内置的推荐规则
"plugin:vue/vue3-recommended", // 继承 Vue.js 3 的推荐规则
"plugin:@typescript-eslint/recommended", //继承 TypeScript ESLint 插件的推荐规则
"plugin:prettier/recommended", //继承 Prettier 的推荐规则
"eslint-config-prettier", //关闭 ESLint 中与 Prettier 冲突的规则
],
parserOptions: {
ecmaVersion: "latest",
parser: "@typescript-eslint/parser",
sourceType: "module",
ecmaFeatures: {
jsx: true,
},
},
ignorePatterns: ["dist", "node_modules", ".eslintrc.cjs", "commitlint.config.cjs"],
plugins: ["vue", "@typescript-eslint", "prettier"],
rules: {
"vue/multi-word-component-names": "off", // 禁用vue文件强制多个单词命名
"@typescript-eslint/no-explicit-any": "off", //允许使用any
"@typescript-eslint/no-this-alias": [
"error",
{
allowedNames: ["that"], // this可用的局部变量名称
},
],
"@typescript-eslint/ban-ts-comment": "off", //允许使用@ts-ignore
"@typescript-eslint/no-non-null-assertion": "off", //允许使用非空断言
"no-console": [
//提交时不允许有console.log
"warn",
{
allow: ["warn", "error"],
},
],
"no-debugger": "warn", //提交时不允许有debugger
},
};
3. 新建 .prettierrc
typescript
{
"endOfLine": "auto",
"printWidth": 120,
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "all",
"bracketSpacing": true
}
4. 新建 .prettierignore
typescript
# 忽略格式化文件 (根据项目需要自行添加)
node_modules
dist
5. vscode 保存自动格式化
在.vscode下新建 settings.json
配置该选择以后,我们保持文件时会自动格式化代码
typescript
{
"editor.codeActionsOnSave": {
"source.fixAll": "explicit"
}
}
4.配置环境变量
新建.env.development(开发环境配置) .env.production(生产环境配置)
1.使用变量
typescript
import.meta.env.VITE_NAME
2.在vite.config.ts中使用环境变量
typescript
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
// https://vitejs.dev/config/
export default ({ mode }: any) => {
// 获取配置环境参数
console.log(loadEnv(mode, process.cwd()));
return defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve('./src'), // 设置别名
},
},
});
};
5. 配置路由
1. 安装
typescript
npm install vue-router
2. 配置路由自动导入
新建router/modules/index.ts
typescript
import { RouteRecordRaw } from 'vue-router';
const routes: Array<RouteRecordRaw> = [];
const moduleFiles: Record<
string,
{
[key: string]: any;
}
> = import.meta.glob('./*.ts', { eager: true });
Object.keys(moduleFiles).map((ele: any) => {
const value = moduleFiles[ele].default || {};
// 我们判断导出的是不是数组,是则进行拓展解构
if (Array.isArray(value)) routes.push(...value);
else routes.push(value);
});
export default routes;
2. 新建路由
新建router/modules/routes.ts
typescript
const routes = [
{
path: '/',
name: 'home',
component: () => import('@/views/test.vue'), //路由懒加载
},
];
export default routes;
3. 创建实例
新建router/index.ts
typescript
import { createRouter, createWebHistory } from 'vue-router';
import routes from './modules';
console.log('routes', routes);
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
4. 路由注册
main.ts
typescript
import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
import router from './router/index';
const app = createApp(App);
app.use(router);
app.mount('#app');
5. 修改App.vue
typescript
<script setup lang="ts"></script>
<template>
<router-view v-slot="{ Component }">
<Transition name="fade" mode="out-in">
<component :is="Component" />
</Transition>
</router-view>
</template>
<style scoped></style>
6. Pinia配置
配置全局仓库,跟vuex一样的效果,具体的可以参考Pinia官网
1. 安装
typescript
npm install pinia
2. 创建 pinia 实例
新建 store/index.ts(src目录下新建store文件夹,并创建index.ts文件)
typescript
import { createPinia } from 'pinia';
const store = createPinia();
export default store;
3. 在 main.js 中引用
typescript
import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
import router from './router/index';
import store from './store';
const app = createApp(App);
app.use(router);
app.use(store);
app.mount('#app');
4. 创建 store
新建store/modules/test.ts
typescript
import { defineStore } from 'pinia';
export const useTestStore = defineStore('test', {
state: () => {
return {
list: [1, 2, 3],
};
},
getters: {
index: (state) => state.list.map((v) => v + 'name'),
},
actions: {
// 增加list
addList(num: number) {
this.list.push(num);
},
},
});
5. 使用 store
typescript
<template>
<div>2</div>
</template>
<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useTestStore } from '@/store/modules/test'; //路径别名,引入store
const testStore = useTestStore();
const { list, index } = storeToRefs(testStore);
const { addList } = testStore;
console.log(list.value, index.value);
addList(45);
</script>
<style scoped></style>
7. 安装less
typescript
npm install less less-loader -D
8. 打包配置
1. 生成.gz文件
- 安装
typescript
npm install vite-plugin-compression -D
- 配置
修改vite.config.ts
typescript
import viteCompression from 'vite-plugin-compression';
plugins: [
vue(),
viteCompression({
verbose: true,
disable: false,
threshold: 10240,
algorithm: 'gzip',
ext: '.gz',
}),
],
2. js和css文件夹分离
修改vite.config.ts
typescript
build: {
outDir: resolve(__dirname, 'dist'), // 指定输出路径
chunkSizeWarningLimit: 1500,
sourcemap: false, // 是否生成 source map
emptyOutDir: true, //Vite 会在构建时清空该目录
// 打包时清楚console和debugger
terserOptions: {
compress: {
keep_infinity: true,
drop_console: true,
drop_debugger: true,
},
},
rollupOptions: {
output: {
compact: true, //压缩代码,删除换行符等
assetFileNames: '[ext]/[name]-[hash].[ext]', //静态文件输出的文件夹名称
chunkFileNames: 'js/[name]-[hash].js', //chunk包输出的文件夹名称
entryFileNames: 'js/[name]-[hash].js', //入口文件输出的文件夹名称
},
},
}
3. 打包分析
- 安装
typescript
npm install rollup-plugin-visualizer -D
- 使用
typescript
import { visualizer } from 'rollup-plugin-visualizer';
plugins: [
vue(),
viteCompression({
verbose: true,
disable: false,
threshold: 10240,
algorithm: 'gzip',
ext: '.gz',
}),
visualizer({ open: false }),
]
4. 配置端口与代理
typescript
server: {
proxy: {
'/api': {
target: '', //设置请求地址
changeOrigin: true, //是否跨域
rewrite: (path) => path.replace(/^\/api/, ''), //重写地址
},
},
},
配置到这儿基本上主要功能就配置完毕了,至于axios以及UI库就根据你们自己的需要去配置吧!这儿我就不做演示了。借鉴文章