vue3+ Ant Design Vue PC端项目搭建
使用vue3 + vite + js + Ant Design Vue + axios + pinia + scss 搭建
elementPlus适合后台管理系统，Ant Design Vue适合C端使用。
这里默认是已经安装vue环境和vite的。
一、项目初始化
npm init vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev
// 其中my-vue-app为项目名称。
// 安装选择js，完成以上四步安装后能够正常启动即完成项目初始化。
// 初始化项目之后，package.json文件如下：
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
// 将"dev": "vite"修改成"dev": "vite --open"即可在项目启动自动打开浏览器。
二、添加路由
npm install vue-router@4
1、创建项目页面vue文件。
在src下面创建views文件夹，views内部文件如下：
- Home (文件夹)
-
- index.vue (文件)
-
- composables (文件夹)
-
- components (文件夹)
- 404 (文件夹)
-
- index.vue (文件)
-
- composables (文件夹)
-
- components (文件夹)
2、设置@路由
vite.config.js文件：
export default defineConfig({
plugins: [vue()],
// start
resolve: {
extensions: ['.vue', '.js', '.css'],
alias: {
'@': path.resolve(__dirname, './src')
},
},
// end
})
3、添加完路由依赖后，在src文件夹里面创建一个router文件夹，并在router文件夹里面创建一个index.js文件。
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [{
path: "/",
redirect: "/Home",
meta: { title: '首页' }
}, {
path: "/Home",
name: "Home",
component: () => import('@/views/Home/index.vue'),
meta: { title: '首页' },
children: []
}, {
path: "/404",
name: "NotFound",
component: () => import('@/views/404/index.vue'),
meta: { title: '404页面' },
children: []
}]
const router = createRouter({
history: createWebHashHistory(),
routes,
scrollBehavior() {
return {
top: 0
}
}
})
// 路由拦截
router.beforeEach((to, from, next) => {
if (to.matched.length === 0) {
// 不存在的路由地址
next('/404')
} else {
next()
}
})
router.afterEach((to, from) => {
})
export default router
4、App.vue配置
<template>
<router-view v-slot="{ Component }">
<transition name="el-fade-in" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
</template>
<script setup></script>
<style scoped></style>
5、mian.js引用路由
import router from './router/index'
const app = createApp(App)
app.use(router)
三、安装Ant Design Vue
npm i --save ant-design-vue
main.js
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
const app = createApp(App)
app.use(Antd)
四、安装pinia
在mian.js中引用
import { createPinia } from 'pinia'
const app = createApp(App)
app.use(createPinia())
在src文件夹下面创建store文件夹，在store文件夹下创建index.js文件
import { defineStore } from "pinia"
export const userStore = defineStore({
id: "mooc", // id是唯一的，如果有多个文件，ID不能重复
state: () => {
return {
userInfo: null,
}
},
actions: {
setInfo(data) {
this.userInfo = data
},
// 用户退出，清除本地数据
logout() {
this.userInfo = null
sessionStorage.clear()
localStorage.clear()
},
},
// 开启数据缓存，在 strategies 里自定义 key 值，并将存放位置由 sessionStorage 改为 localStorage
// 默认所有 state 都会进行缓存，你可以通过 paths 指定要持久化的字段，其他的则不会进行持久化，如：paths: ['userInfo'] 替换key的位置
persist: {
enabled: true,
strategies: [
{
key: "moocs",
storage: localStorage,
},
],
},
})
安装pinia持久化插件
npm i pinia-plugin-persist
main.js
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)
const app = createApp(App)
app.use(store)
五、安装axios
npm install axios --save
在src目录下新建一个api文件夹，在里面新建request.js、index.js文件
request.js内容：
import axios from 'axios'
// 创建一个 axios 实例
const service = axios.create({
timeout: 0 // 不设置前端超时时间,
})
// 添加请求拦截器
service.interceptors.request.use(
function (config) {
// 在发送请求之前做些什么，如添加token
// config.headers['Authorization'] = 'Bearer ' + token
return config
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error)
}
)
// 添加响应拦截器
service.interceptors.response.use(
function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response.data
},
function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
// console.log(error)
return Promise.reject(error.msg)
}
)
export default service
index.js内容：
// 导入axios实例
import httpRequest from '@/api/request'
// 获取用户信息
export function getUserInfo(param) {
return httpRequest({
url: 'your api url',
method: 'post',
data: param,
})
}
vite.config.js中可以配置反向代理、多环境自动切换等。
六、安装scss
npm install sass
七、项目搭建完成
进行此步大致项目搭建完成，总结个别重要文件如下：
// vite.config.js 文件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export const url = 'https://crm.guoketest.com/'
// url可以通过多环境配置获取
export default defineConfig({
plugins: [vue()],
resolve: {
extensions: ['.vue', '.js', '.css'],
alias: {
'@': path.resolve(__dirname, './src')
},
},
build: {
outDir: 'dist', // 打包后的文件夹名称
assetsDir: "assets", // 指定静态资源存放路径
},
base: './',
server: {
cors: true, //默认启用并允许任何源
proxy: {
'/system': { // 系统管理模块
target: url, //接口域名
changeOrigin: true, //是否跨域
ws: true, //是否代理 websockets
secure: false, //是否https接口
force: true, //强制预构建依赖
pathRewrite: { //路径重置
'^/system': ''
}
},
'/auth': { // 登录相关
target: url, //接口域名
changeOrigin: true, //是否跨域
ws: true, //是否代理 websockets
secure: false, //是否https接口
force: true, //强制预构建依赖
pathRewrite: { //路径重置
'^/auth': ''
}
}
}
},
})
// main.js 文件
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import router from './router/index'
import { createPinia } from 'pinia'
// 引入持久化插件
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)
const app = createApp(App)
app.use(router)
app.use(Antd)
app.use(store)
app.mount('#app')
// src/store/index.js 文件
import { defineStore } from "pinia"
export const userStore = defineStore({
id: "mooc", // id是唯一的，如果有多个文件，ID不能重复
state: () => {
return {
userInfo: null,
}
},
actions: {
setInfo(data) {
this.userInfo = data
},
// 用户退出，清除本地数据
logout() {
this.userInfo = null
sessionStorage.clear()
localStorage.clear()
},
},
persist: {
enabled: true,
strategies: [
{
key: "moocs",
storage: localStorage,
},
],
},
})
// src/router/index.js 文件
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [{
path: "/",
redirect: "/Home",
meta: { title: '首页' }
}, {
path: "/Home",
name: "Home",
component: () => import('@/views/Home/index.vue'),
meta: { title: '首页' },
children: []
}, {
path: "/404",
name: "NotFound",
component: () => import('@/views/404/index.vue'),
meta: { title: '404页面' },
children: []
}]
const router = createRouter({
history: createWebHashHistory(),
routes,
scrollBehavior() {
return {
top: 0
}
}
})
// 路由拦截
router.beforeEach((to, from, next) => {
if (to.matched.length === 0) {
next('/404')
} else {
next()
}
})
router.afterEach((to, from) => {
})
export default router
// sec/api/request.js 文件
import axios from 'axios'
// 创建一个 axios 实例
const service = axios.create({
timeout: 0 // 不设置前端超时时间,
})
// 添加请求拦截器
service.interceptors.request.use(
function (config) {
// 在发送请求之前做些什么，如添加token
// config.headers['Authorization'] = 'Bearer ' + token
return config
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error)
}
)
// 添加响应拦截器
service.interceptors.response.use(
function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response.data
},
function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
// console.log(error)
return Promise.reject(error.msg)
}
)
export default service
注：
1、公用vue组件，如菜单栏；
2、请求、响应数据的过滤；
3、多环境配置；
4、其他第三方插件引用，如echarts等；
5、其他自定义文件、组件；
都可以在此基础上添加升级来达到目标。
