[完整]流程解决Vue3项目搭建步骤

2023-07-21 02:53 由 ProsperousEnding 发表于 #前端开发

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

热门相关：洪荒二郎传裙上之臣戏精老公今天作死没神算大小姐金粉