[完整]流程解决Vue3项目搭建步骤
Vue3项目完整搭建步骤
一、 使用vite创建vue3项目
npm init vue@latest 或者npm create vite@latest进行初始化项目并创建项目名称code，进入code目录进行基本部署。
cd code、npm install 、npm run dev
完成vue3项目搭建。
二、 配置vue-router
npm install vue-router@next --save
- 分离式：**在src目录下创建router文件夹，并在文件夹下创建index.js和routes.js
index.js ：(只用来存放router的配置信息)
import { createRouter, createWebHashHistory } from "vue-router"
import routes from './routes'
const router=createRouter({
history:createWebHashHistory(),
routes,
})
//可选配置
router.beforeEach((to, from, next) => {
// 在路由变化前滚动到顶部
window.scrollTo(0, 0)
next()
})
// 路由守卫，在每次路由变化时获取当前路由并保存到 store
router.afterEach((to) => {
const routeStore = useRouteStore();
routeStore.clearRoutes();
routeStore.setRoutes([{name: to.name, path: to.path}]);
routeStore.setAllRoutes(routes)
});
export default router
routes.js： (用来存放路由信息)
const routes=[
{
path: "/",
redirect: "/home",
},
{
path: "/home",
name: "home",
component: () => import('@/pages/Home'),
},
{
name:'page',
path:'/page',
component:()=>import('@/pages/page'),
meta:{
title:"页面"
},
},
];
export default routes
-
修改main.js
import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; const app = createApp(App); app.use(router); app.mount('#app'); -
修改App.vue
<template> <router-view /> </template>
调用方式：
<template>
<div>
<router-link to="/">Home</router-link>
<button @click="gotoAbout"> 关于 </button>
</div>
<script setup>
import{useRouter} from 'vue-router'
const router = useRouter();
const gotoAbout = () => {
router.push({
path: '/about',
query: { id: 123 }
})
}
</script>
三、封装axios
npm install axios
在src目录下创建request文件夹，在request文件夹下创建api文件夹以及index.js
api文件夹中存放交互代码，index.js中存放axios配置代码
index.js
import axios from "axios";
//为拦截器报错所用的弹框，如不需要可以不导入
import { ElMessage } from "element-plus";
const service=axios.create({
baseURL: 'http://localhost:8980/code', //基本路径，后面可直接写/方法即可
withCredentials: false, // 异步请求携带cookie
// 设置请求头
headers: {
// 设置后端需要的传参类型
// 'Content-Type': 'application/json;charset=UTF-8',
// 'token': 'your token',
// 'X-Requested-With': 'XMLHttpRequest',
"Access-Control-Allow-Origin": "*",
},
//设置请求超时时间
timeout: 1000*60*5,
});
//*可选
//请求拦截器
service.interceptors.request.use((request)=>{
console.log("request：",request);
//配置请求头
// request.headers.common['Authorization']=window.sessionStorage.getItem('token')===null? null : window.sessionStorage.getItem('token')
//一定要把处理过的request返回
return request;
},
err=>Promise.reject(err)
);
//响应拦截器
service.interceptors.response.use((response)=>{
//获取接口返回结果
const res=response.data
console.log("response：",response);
if(res.code==200){
return res;
}else{
ElMessage.error(res.data||'网络异常')
return res;
}
// console.log("response：",response);
// return response;
},
(err)=>Promise.reject(err)
);
export default service;
api.js:
import request from "@/request/index.js"
/**
* @description 用户登录
*/
export function login(data){
return request({
method:"post",
url:"/user/login",
data:data,
});
}
/**
* @description 获取用户信息
*/
export function getUserInfo(data){
return request({
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
},
method:"post",
url:"/user/getUserInfo",
data:{
'userId':data
},
});
}
调用方式(例举)：
//处理登录逻辑
async function handleLogin(){
try {
const res=await login(form.value).then(res=>{
console.log(res.data)
})
} catch (error) {
console.log(error);
}
}
四、Pinia集成
npm install pinia
- 修改main.js,在main.js中添加代码：
main.js
import { createPinia } from 'pinia'
app.use(createPinia())
- store目录下新建使用的store，此处使用store.js
注：defineStore 是需要传参的，第一个参数是标识id，第二个参数是一个对象，有三个模块， state，getters，actions。
import { ref, computed } from "vue";
import { defineStore } from "pinia";
// 选项式api写法
// export const store1 = defineStore("storeNum",{
// state: () => {
// return {
// num: 0,
// name: "coder"}
// },
// actions: {
// add() {
// this.num++;
// },
// },
// }
// );
// 组合式api写法
//ref() 就是 state 属性
//computed() 就是 getters
//function() 就是 actions
export const store2 = defineStore("storeNum",() => {
const num = ref(0);
const name=ref{"coder"}
const add =()=> {
num.value++;
}
return {
num,
add
};
},
);
- 组件中使用Pinia
<script setup>
import { store2 } from '@/stores/store.js'
import { storeToRefs } from 'pinia'
const storeNum = store()
let {name,num}=storeToRefs(storeNum); //解构,修改必须引用storeToRefs进行解构处理
const clickHanlde=()=>{
storeNum.add();}
const batchHanlde = ()=>{
//store批量处理
storeNum.$patch(state=>{
state.num++;
state.name = 'newCoder';
})
}
//状态重置
const resetBtn=()=>{
storeNum.$reset()
}
</script>
<template>
<div>Add{{ storeNum.add }}</div>
<button @click="clickHanlde">Num++</button>
<button @click='batchHanlde'>批量处理</button>
<button @click='resetBtn'>重置</button>
</template>
数据持久化存储，即刷新页面后也能存储数据
npm i pinia-plugin-persist
-
在store目录下新建一个配置文件index.js，或者直接在main.js中添加
注：个人觉得分离后代码更清晰（主观）
import { createPinia } from "pinia";
import {createPersistedState } from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(createPersistedState({
serializer:{ // 指定参数序列化器
serialize: JSON.stringify,
deserialize: JSON.parse
}
}))
export default pinia
- 加入持久化存储后store.js的写法
import { ref, computed } from "vue";
import { defineStore } from "pinia";
// 选项式写法
// export const store = defineStore("storeId",{
// state: () => ({ num: 0 }),
// actions: {
// add() {
// this.num++;
// }
// },
// 启用持久化存储(全局持久化)
// persist: { enabled: true, // 配置key和持久化存储的方式
// strategies: [{
// key: 'numStore',
// storage: window.localStorage, //默认localStorage,/sessionStorage
// }]
// }
// );
// 组合式写法
export const store = defineStore("storeId",() => {
const num = ref(0);
const name=ref("coder");
const age=ref(18);
const add =()=> {
num.value++;
}
return {
num,
add
};
},
{
// 选项式写法演示的是全局持久化，组合式写法演示的是指定字段持久化，不配置默认全部持久化
// persist: true,
persist: { enabled: true,
strategies: [{
storage: window.localStorage,
paths: ['name', 'num'] // paths配置需要持久化的字段
beforeRestore: context => {
console.log('Before', context)
},
afterRestore: context => {
console.log('After', context)
}
}]
}
},
);
五、vite设置代理解决跨域问题
vite.config.js中配置，代理前端端口到后端8080端口
import{defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
//自动导包，与代理无关(可忽略)
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports['vue','vue-router']
})
]，
server:[
proxy:{
//可直接写:'/api ': 'http://localhost:8080/'
'/api':{
target: 'http://127.0.0.1:8080', //目标url
changeOrigin: true, //支持跨域
ws: true, //允许websocket代理
rewrite: (path) => path.replace(/^\/api/, ""), //重写路径,替换/api
}
}
]
})
六、vite配置@
配置时.vue文件需要加.vue后缀，不能省略，js可省略，适用vue3.1以上版本
vite.config.js中配置：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
//配置路径别名
alias: {
'@' : resolve(__dirname,'./src'),
}
}
})
七、Vite配置setup语法糖插件：解决import{ref,reactive...}引入问题
-
npm i unplugin-auto-import -D -
在vite.config.js中配置
//1. 引入插件 import AutoImport from 'unplugin-auto-import/vite' export default defineConfig({ plugins: [vue(), //2. 在plugins中添加AutoImport AutoImport({ imports:['vue'] }) ], })
