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, })   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...}引入问题

1. npm i unplugin-auto-import -D

2. 在vite.config.js中配置

   //1. 引入插件 import AutoImport from 'unplugin-auto-import/vite'  export default defineConfig({   plugins: [vue(),            //2. 在plugins中添加AutoImport             AutoImport({                 imports:['vue']             })            ], })