# Vue3項目完整搭建步驟 ## 一、使用vite創建vue3項目 `npm init vue@latest` 或者`npm create vite@latest`進行初始化項目並創建項目名稱code，進入code目錄進行基本部署。 `cd code`、`npm install` 、`npm r ...

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...}引入問題

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']
            })
           ],
})

[完整]流程解決Vue3項目搭建步驟