项目搭建
项目搭建
根据 Vue-CLI 去配置一些项目的环境
# 配置文件
修改配置文件，调整目录
# vue3下 Vuex使用
import {useStore} from 'vuex'
export default{
setup(){
const store = useStore() //获取到vuex实例
console.log(store.state.username)
console.log(store.getters.newName)
console.log(store.commit('updata'))
const mutationsFn = ()=>{ //action
store.dispatch('updataName')
}
return {mutationsFn}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 模块化使用
A模块: 不带命名空间
state:{
username:'moduleA'
},
getters:{
newName(state){
return state.username+'!!'
}
},
mutations:{
updataName(state){
state.username = 'moduleAAAA'
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
B模块：待命名空间
namespaced:true,
state:{
username:'moduleB'
},
getters:{
newName(state){
return state.username+'!!'
}
},
mutations:{
updataName(state){
state.username = 'moduleAAAA'
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
在vue中的使用
<template>
<!-- 未带命名空间的模块a使用 -->
<!-- 未带命名空间的模块只有state有独立的存储其余的方法在公共空间 -->
<p>{{$store.state.moduleA.username}}</p>
<p>{{$store.getters.newName}}</p>
<!-- 带命名空间的模块b使用 -->
<p>{{$store.state.moduleB.username}}</p>
<p>{{$store.getters['moduleB/newName']}}</p>
</template>
<script>
export default{
name:app,
setup(){
const store = useStore()
const mutationsFn = ()=>{
store.commit('moduleB/updateName')
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
一般情况下都会使用命名空间的模块
# Vuex 持久化
分模块
cart.jsexport default{ state(){ return { profile:{//用户信息 id:'', avatar:'', nickname:'', account:'', mobile:'', token:'' } } } }1
2
3
4
5
6
7
8
9
10
11
12
13
14category.jsexport default{ state(){ return { list:[] } } }1
2
3
4
5
6
7user.jsexport default{ state(){ return { categoryList:[] } } }1
2
3
4
5
6
7
未作持久化处理，store里的数据在刷新后不会保存
# 第三方插件
第三方插件
vuex-persistedstate 可以帮助项目中 vuex 作本地持久化处理
默认存储在 localstore
在 index.js 文件中引入插件
export default createStore({
modules:{
//...
},
plugins:[
createPersistedState({
//本地存储的名字
key:'name-project',
//需要本地持久化的模块
paths:['user','cart']
})
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 封装 axios
- 创建一个新的
axios实例 - 请求拦截器，如果有 token 进行头不携带
- 响应拦截器： 1、剥离无效数据 2、处理token失效
- 导出一个函数，调用当前的
axios实例发请求，返回promise
import axios from 'axios'
export const baseURL = 'api.yuadh.com'
const instance = axios.create({
//axios 的一些配置
baseURL,
timeout:5000
})
1
2
3
4
5
6
7
2
3
4
5
6
7
# 请求拦截
import store from '@/store'
instance.interceptors.request.use(config=>{
//请求成功的拦截业务逻辑
const profile = store.state.user.profile
//判断是否有 token 如果有 token 的存在在请求头中加入
if(profile.token){
congif.headers.Authorization = `Bearer ${profile.token}`
}
return config
},err=>{
return Pormise.reject(err)
})
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 响应拦截
instance.interceptors.responce.use(res=>{
//剥离有效数据
res.data
},err=>{
//请求失败的处理逻辑
if(err.response && err.response.status == 401){
//如果响应的状态码是401 用户为登入状态的指示码
//1.清空无效的用户信息
//2.跳转登录页
//3.跳转需要传参(当前路由地址)给登录页
store.commit('user/setUser',{})//1
//router获取完整路径的API router.currenRouter.value.fullPath
const fullPath = encodeURIComponent(router.currenRouter.value.fullPath)
router.push('/login?redirectUrl ='+fullPath)//防止路径问题
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 导出请求函数
export default (url,method,submitData)=>{
return instance({
url,
method,
//如果使用的 get 请求，需要使用params来传递submitData
//如果使用的不是 get 请求，需要使用data来传递submitData
//设置一个动态key，可以写js表达式，js表达式
[mothod.toLowerCase()==='get'?'params':'data']:submitData
})
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 路由
使用了 三级 路由
import {createRouter,createWebHashHistory} form 'vue-router'
const routes=[
{
path:'/',
compoent:import('@/views/Layout'),
children:[
{
path:'/',
compoent:import('@/views/home')
}
]
}
]
const router = createRouter({
history.createHashHistory(),
routes,
})
export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 样式
# less导入
变量
@xtxColor:#27BA9B;
@helpColor:#E26237;
@sucColor:#1DC779;
@warnColor:@FFB302;
@priceColor:#CF4444;
1
2
3
4
5
2
3
4
5
混入
.abc{
width:100px;
height:100px;
}
.box{
.abc();
}
//以下代码会编译
.abc2(@width){
width:@width;
height:@width;
}
.box2{
.abc()
}
// 鼠标移至元素的动画展现
.hoverShadow{
transition:all .5s;
$:hover{
transform:translate3d(0,-3px,0);
box-shadow:0 30px 8px rgba(0,0,0,0.2);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import 'URL';
# 插件自动导入
安装插件
配置文件
module.exports = { pluginOptions:{ 'style-rouserces-loader':{ preProcessor:'less', patterns:[ path.join(__dirname,'./URL'), path.join(__dirname,'./URL') ] } } }1
2
3
4
5
6
7
8
9
10
11
# 项目样式初始
导入样式重置插件
normalize.csscommon.less编写自己的公共样式复制导入
编辑 (opens new window)
上次更新: 2023/02/07, 14:51:48