vite+vue3项目初始化搭建
"nodejs": v18.19.0
"pnpm": 8.15.0
"vue": v3.4.21
"vite": v5.2.0
1.创建项目
Vite中文官网
pnpm create vite@latest
项目名字：gd_web
选择框架：Vue3
选择语言：JavaScript
进入项目：cd gd_web
安装依赖: pnpm i
启动项目：pnpm run dev
2.配置.editorconfig
# https://editorconfig.org
# 根目录配置，表示当前目录是编辑器配置的根目录
root = true
[*] # 对所有文件应用以下配置
charset = utf-8 # 使用 UTF-8 编码
indent_style = space # 使用空格进行缩进
indent_size = 4 # 每个缩进级别使用 4 个空格
end_of_line = lf # 使用 LF（Linux 和 macOS 的换行符）
insert_final_newline = true # 在文件末尾插入一行空白
trim_trailing_whitespace = true # 自动删除行末尾的空白字符
[*.md] # 对扩展名为 .md 的 Markdown 文件应用以下配置
insert_final_newline = false # 不在文件末尾插入一行空白
trim_trailing_whitespace = false # 不自动删除行末尾的空白字符
3.别名配置
在开发项目的时候文件与文件关系可能很复杂，因此我们需要给src文件夹配置一个别名！！！
在vite.config.js文件中：
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") // 相对路径别名配置，使用 @ 代替 src
},
//extensions数组的意思是在import组件的时候自动补全.vue等文件后缀
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
}
})
如果不能识别path模块
pnpm install @types/node --save-dev
配置完成后，我们发现我们 '@'之后没有提示，这个时候我们在根目录创建jsconfig.json文件
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
]
}
},
"exclude": [
"node_modules"
]
}
4.环境变量的配置
项目开发过程中，至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。不同阶段请求的状态(如接口地址等)不尽相同，若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生，我们只需做简单的配置，把环境状态切换的工作交给代码。
开发环境（development）
顾名思义，开发使用的环境，每位开发人员在自己的dev分支上干活，开发到一定程度，同事会合并代码，进行联调。
测试环境（testing）
测试同事干活的环境啦，一般会由测试同事自己来部署，然后在此环境进行测试
生产环境（production）
生产环境是指正式提供对外服务的，一般会关掉错误报告，打开错误日志。(正式提供给客户使用的环境。)
注意:一般情况下，一个环境对应一台服务器,也有的公司开发与测试环境是一台服务器！！！
项目根目录分别添加 开发、生产和测试环境的文件!
.env.development
.env.production
.env.test
文件内容：
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = '项目名字'
VITE_APP_BASE_API = '/dev-api'
VITE_SERVE = 'http://127.0.0.1:8990'
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'production'
VITE_APP_TITLE = '项目名字'
VITE_APP_BASE_API = '/prod-api'
VITE_SERVE = 'http://127.0.0.1:8990'
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'test'
VITE_APP_TITLE = '项目名字'
VITE_APP_BASE_API = '/test-api'
VITE_SERVE = 'http://127.0.0.1:8990'
配置运行命令：package.json
"scripts": {
"dev": "pnpm vite --open",
"build:test": "pnpm vite build --mode test",
"build:pro": "pnpm vite build --mode production",
"preview": "vite preview"
},
通过import.meta.env获取环境变量
5.安装css预处理器sass
pnpm install -D sass sass-loader
组件中使用：
<style scoped lang="scss"></style>
全局样式定义：
在src/styles目录下创建一个index.scss文件；
当然项目中需要用到清除默认样式，可以在index.scss引入reset.scss
reset.scss
// reset.scss
// index.scss文件中引入
@import "reset.scss";
在入口文件中引入全局样式：
import '@/styles/index.scss'
在src/styles/index.scss全局样式文件中没有办法使用 变量 . 因此需要给项目中引入全局变量 变量.因此需要给项目中引入全局变量 变量.因此需要给项目中引入全局变量.
在style/variable.scss创建一个variable.scss文件！
在vite.config.js文件配置如下:
export default defineConfig((config) => {
//配置scss全局变量
css: {
preprocessorOptions: {
scss: {
javascriptEnabled: true,
additionalData: '@import "./src/styles/variable.scss";'
}
}
}
}
6.集成Element-plus
Element-plus官网
安装：
pnpm install element-plus --save
配置自动导入： 需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件
pnpm install -D unplugin-vue-components unplugin-auto-import
在vite配置文件中添加：
// vite.config.ts
import {defineConfig} from 'vite'
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()],
// 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
imports: ['vue'],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
// ...
],
})
配置Element-plus 组件内容中文显示：
main.js文件中添加
// 引入element-plus样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import locale from 'element-plus/dist/locale/zh-cn.mjs'
app.use(ElementPlus, {locale})
Element-plus icon图标全局使用
pnpm install @element-plus/icons-vue
注册所有图标，在component/index.js文件中
从 @element-plus/icons-vue 中导入所有图标并进行全局注册
// 引入element-plus提供的所有图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// 对外暴露插件对象
export default {
// 必须叫做install方法，会有一个APP对象传参；
// 在入口文件引入使用，会自动执行该方法
install(app) {
// 将element-plus提供的图标注册为全局组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
},
}
在入口文件引入src/index.js文件,通过app.use方法安装自定义插件
// 注册全局组件
import gloablComponent from '@/components/index.js'
app.use(gloablComponent)
使用：详细见官网
<!-- 使用 el-icon 为 SVG 图标提供属性 -->
<template>
<div>
<el-icon :size="size" :color="color">
<Edit/>
</el-icon>
<!-- 或者独立使用它，不从父级获取属性 -->
<Edit/>
</div>
</template>
7.SVG图标配置
安装SVG依赖插件
pnpm install vite-plugin-svg-icons -D
在vite.config.js中配置插件
plugins: [
// ...
// 配置自定义SVG 图标
createSvgIconsPlugin({
// Specify the icon folder to be cached
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
// Specify symbolId format
symbolId: 'icon-[dir]-[name]',
}),
// ...
]
入口文件(main.js)导入
// 注册SVG图标
import 'virtual:svg-icons-register'
将svg封装为全局组件
因为项目很多模块需要使用图标,因此把它封装为全局组件！！！
在src/components目录下创建一个SvgIcon组件:代表如下
<template>
<div>
<svg :style="{ width: width, height: height }">
<use :xlink:href="prefix + name" :fill="color"></use>
</svg>
</div>
</template>
<script setup>
defineProps({
//xlink:href属性值的前缀
prefix: {
type: String,
default: '#icon-'
},
//svg矢量图的名字
name: String,
//svg图标的颜色
color: {
type: String,
default: ""
},
//svg宽度
width: {
type: String,
default: '16px'
},
//svg高度
height: {
type: String,
default: '16px'
}
})
</script>
<style scoped></style>
在src/components文件夹目录下创建一个index.js文件：用于注册components文件夹内部全部全局组件！！！
import SvgIcon from './SvgIcon'
const components = { SvgIcon }
// 引入element-plus提供的所有图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// 对外暴露插件对象
export default {
// 必须叫做install方法，会有一个APP对象传参；
// 在入口文件引入使用，会自动执行该方法
install(app) {
//注册全局SVG组件
Object.keys(components).forEach((key) => {
app.component(key, components[key])
})
// 将element-plus提供的图标注册为全局组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
},
}
在入口文件引入src/index.js文件,通过app.use方法安装自定义插件
// 注册全局组件
import globalComponent from '@/components/index.js'
app.use(globalComponent)
8.配置封装axios
安装axios：
pnpm install axios
在根目录下创建utils/request.js
import axios from "axios";
import {ElMessage} from "element-plus";
//创建axios实例
let request = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_API,
timeout: 5000
})
//请求拦截器
request.interceptors.request.use(config => {
return config;
});
//响应拦截器
request.interceptors.response.use((response) => {
return response.data;
}, (error) => {
//处理网络错误
let msg = '';
let status = error.response.status;
switch (status) {
case 401:
msg = "token过期";
break;
case 403:
msg = '无权访问';
break;
case 404:
msg = "请求地址错误";
break;
case 500:
msg = "服务器出现问题";
break;
default:
msg = "无网络";
}
ElMessage({
type: 'error',
message: msg
})
return Promise.reject(error);
});
export default request;
9.api接口统一管理
在开发项目的时候,接口可能很多需要统一管理。在src目录下去创建api文件夹去统一管理项目的接口；
例如：
//统一管理用户相关的接口
import request from '../utils/request.js'
//项目用户相关的请求地址
const API = {
LOGIN_URL: '/admin/acl/index/login',
USERINFO_URL: '/admin/acl/index/info',
LOGOUT_URL: '/admin/acl/index/logout',
}
//登录接口
export const reqLogin = (data) => request.post(API.LOGIN_URL, data)
//获取用户信息
export const reqUserInfo = () => request.get(API.USERINFO_URL)
//退出登录
export const reqLogout = () => request.post(API.LOGOUT_URL)
10.配置vue-router
安装：
pnpm install vue-router@4
1.创建src/router/index.js文件，使用路由懒加载，优化访问性能
import {createRouter, createWebHistory, createWebHashHistory} from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: () => import('../views/home.vue') // 建议进行路由懒加载，优化访问性能
},
{
path: '/about',
name: 'About',
component: () => import('../views/about.vue')
}
]
const router = createRouter({
// history: createWebHistory(), // 使用history模式
history: createWebHashHistory(), // 使用hash模式
routes
})
export default router
2.在App.vue 文件中使用router-view 组件，路由匹配到组件会通过router-view 组件进行渲染。
<template>
<div id="nav">
<router-link to="/">Home</router-link>
|
<router-link to="/about">About</router-link>
</div>
<router-view></router-view>
</template>
3.main.js中引入router
// ...
// 引入路由
import router from './router/index.js'
app.use(router)
// ...
11.配置pinia
安装：
pnpm install pinia
在main.js文件中引入：
// 引入pinia
import {createPinia} from 'pinia'
app.use(createPinia())
创建文件夹src/stores
在该文件夹中管理一些公用数据，用户数据user.js，购物车数据等
定义
//定义关于counter的store
import {defineStore} from 'pinia'
/*defineStore 是需要传参数的，其中第一个参数是id，就是一个唯一的值，
简单点说就可以理解成是一个命名空间.
第二个参数就是一个对象，里面有三个模块需要处理，第一个是 state，
第二个是 getters，第三个是 actions。
*/
const useCounter = defineStore("counter", {
state: () => ({
count: 66,
}),
// getters 类似于 vue 里面的计算属性，可以对已有的数据进行修饰。
// 不管调用多少次，getters中的函数只会执行一次，且都会缓存。
getters: {},
actions: {}
})
//暴露这个useCounter模块
export default useCounter
使用
<script setup>
// 首先需要引入一下我们刚刚创建的store
import useCounter from '../stores/counter.js'
// 因为是个方法，所以我们得调用一下
// 注意获取数据后不支持结构，结构则失去响应式
const counterStore = useCounter()
console.log(counterStore.count)
</script>
pinia提供了一个函数storeToRefs解决。引用官方API storeToRef 作用就是把结构的数据使用ref做代理
import {storeToRefs} from 'pinia'
const counterStore = useCounter()
// 结构仍为响应式数据
const {count} = storeToRefs(counterStore)
12.Proxy代理配置
import {defineConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'
// https://vitejs.dev/config/
export default defineConfig(({command, mode}) => {
// 根据当前工作目录中的 `mode` 加载 .env 文件
// 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
const env = loadEnv(mode, process.cwd())
// console.log(env)
return {
base: env.VITE_USER_NODE_ENV === 'production' ? './' : '/',
plugins: [
vue(),
// 配置自定义SVG图标
createSvgIconsPlugin({
// Specify the icon folder to be cached
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
// Specify symbolId format
symbolId: 'icon-[dir]-[name]',
}),
// AutoImport({
// resolvers: [ElementPlusResolver()],
// // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
// imports: ['vue'],
// }),
// Components({
// resolvers: [ElementPlusResolver()],
// }),
],
resolve: {
// 配置别名
alias: {
"@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src
},
//extensions数组的意思是在import组件的时候自动补全.vue等文件后缀
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
},
// 配置scss变量
css: {
preprocessorOptions: {
scss: {
javascriptEnabled: true,
additionalData: '@import "./src/styles/variable.scss";'
}
}
},
// 代理跨域
server: {
// open: true, //启动项目自动弹出浏览器
hmr: true, //开启热加载
host: false, //监听所有地址
port: 6688, //启动端口
strictPort: false, //设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口
https: false, // 是否开启https
//proxy: createProxy(env.VITE_APP_API_HOST),
proxy: {
[env.VITE_APP_BASE_API]: {
// 获取数据的服务器地址设置
target: env.VITE_SERVE,
//开启代理跨域
changeOrigin: true,
// secure：安全的
// 如果是https接口，需要配置这个参数
secure: false,
// 路径重写
// 将请求路径中的 '/api' 替换为 ''
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
},
}
})