使用Vite创建项目框架
yarn create vite my-vue-app --template vue
yarn install
yarn dev
"vue": "^3.4.21"
调整index.html的语言显示为<html lang="zh">：防止浏览器提示英文显示
安装sass
yarn add sass
"sass": "^1.72.0"
安装router
yarn add vue-router@4
"vue-router": "4"
创建src/router/index.js
import {createRouter, createWebHistory} from 'vue-router'
const router = createRouter({
// history模式：createWebHistory(), hash模式：createWebHashHistory()
history: createWebHistory(),
routes: [
{
path: '/',
component: () => import('../components/HelloWorld.vue'),
},
],
})
router.beforeEach((to, from, next) => {
next()
})
export default router
main.js引用
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
在App.vue中加上
创建src/router/other.js用户非菜单路由
/**
* 不属于菜单的路由
*/
export default [
{
path: 'trading/details',
component: () => import('../components/HelloWorld.vue')
},
]
在index.js中引入
安装pinia
yarn add pinia
"pinia": "^2.1.7",
yarn add pinia-plugin-persistedstate // 持久化
"pinia-plugin-persistedstate": "^3.2.1",
在main.js中配置
import { createPinia } from 'pinia'
import persistence from 'pinia-plugin-persistedstate'
app.use(createPinia().use(persistence))
创建src/store/index.js
import {defineStore} from 'pinia'
export const useStore = defineStore('storeId', {
// 推荐使用 完整类型推断的箭头函数
state: () => {
return {
// 所有这些属性都将自动推断其类型
counter: 0,
name: 'Eduardo',
isAdmin: true,
}
},
// 开启数据持久化
persist: true
})
安装axios
yarn add axios
"axios": "^1.6.8",
创建src/http.js
import axios from 'axios'
// 1-本地，2-测试，3-正式
let env = 2
let api = ''
switch (env) {
case 1:
api = ''
break
case 2:
api = ''
break
default:
api = 'http://localhost'
}
// axios配置
const http = axios.create({
baseURL: api,
timeout: 1000 * 30, // 请求超时，秒
// 携带cookie
withCredentials: true,
// headers: {'content-type': 'application/x-www-form-urlencoded'} // 请求数据类型 默认application/json
})
// 请求拦截器
http.interceptors.request.use(config => {
// 如果要携带头部数据，如token，在此写，不要写在create中，create启动就会创建，需要刷新才会更新
config.headers['token'] = localStorage.getItem('token')
return config;
}, function (error) {
// 请求错误的执行
return Promise.reject(error);
});
// 响应拦截器
http.interceptors.response.use(response => {
return response;
}, function (error) {
return Promise.reject(error);
});
export default http
安装elementplus
yarn add element-plus
"element-plus": "^2.6.2",
yarn add @element-plus/icons-vue
在main.js中使用
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
