快速创建一个vite + router + store + axios + element-plus的vue3项目

青旅半醒 2024-04-01 17:11 13阅读 0赞

看了很多文章，基本都是要东拼西凑的，很多项目其实用到的就是路由(router)、状态管理配置(store)、网络请求(axios)，再来一个自己想要的ui框架，我用的是element-plus，然后整个项目的基础架构就完了。后面的世界还很大，慢慢学习。  
ps:安装npm啥的基础就不讲了

### 一、创建 ###

**1、创建一个基于vite的项目注意kertag为创建的项目名，自行更改**

npm create vite@latest kertag -- --template vue

**2、进入项目目录**

cd kertag

**3、安装依赖文件**

npm install

### 二、初始化项目 ###

**1、进入src目录**

cd src

**2、创建基础目录** 路由(router)、状态管理配置(store)、请求(axios) 、页面(views) 、配置文件(config)

mkdir router store axios views
    cd ..
    ps:cd ..用于返回上层目录，也就是项目根目录

**3、修改App.vue**

App.vue

<template>
      <router-view />
    </template>
    
    <script setup></script>
    
    <style>
      #app {
          
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
      }
    </style>

### 三、路由配置 ###

1.安装

npm install vue-router

2.在router目录下创建index.js文件并写入如下代码

import {
         createRouter, createWebHashHistory } from "vue-router";
    
    const routes = [
        {
        
            path: "/",
            name: "home",
            title: "首页",
            component: () => import("../views/index.vue")
        },
    ];
    
    //可以在这里输入更多的配置
    const router = createRouter({
        
        //内部提供了history模式的实现，为了简单起见，我们这里使用hash模式
        history: createWebHashHistory(),
        routes, //`routes:routes`的缩写
    });
    
    export default router;

3.在views目录下创建index.vue文件并写入如下代码

<template>
        <button @click="countAdd">Count is: {
       { count }}</button>
    </template>
    
    <script setup>
    import {
           reactive, toRefs } from "vue";
    import store from "@/store";
    
    const state = reactive({
          
        count: store.state.count,
    });
    
    const {
           count } = toRefs(state);
    
    const countAdd = () => {
          
        // 获取存储的count以及给值加1
        store.commit("set", ["count", store.state.count + 1]);
        // 修改页面count显示的值为新存储的值
        state.count = store.state.count;
    }
    
    </script>
    
    <style scoped>
    button {
          
        font-weight: bold;
    }
    </style>

### 四、状态管理配置 ###

1.安装vuex

npm install vuex@next --save

2.在store目录下创建index.js和local.js文件，  
index.js写入如下代码

import {
         createStore } from "vuex";
    import {
         local } from "./local";
    
    // 创建一个新的 store 实例
    const store = createStore({
        
        state() {
        
            return {
        
                count: local.get("count") || 0,
                token: local.get("token") || null,
                username: local.get("username") || "admin",
            };
        },
        mutations: {
        
            set(state, data) {
        
                state[data[0]] = data[1];
                local.set(data[0], data[1]);
            },
            del(state, name) {
        
                if (state[name]) {
        
                    local.remove(name);
                }
            },
        },
    });
    export default store;

loacl.js文件中写入如下代码

export class local {
        
        static get(key) {
        
            const val = window.localStorage.getItem(key);
            if (val == "undefined") {
        
                return null;
            } else {
        
                return JSON.parse(val);
            }
        }
        static set(key, value) {
        
            window.localStorage.setItem(key, JSON.stringify(value));
        }
        static remove(key) {
        
            window.localStorage.removeItem(key);
        }
    }

### 五、env和vite.config配置 ###

1.在项目目录下创建.env文件

// 请求接口域名
    VITE_ADMIN_API = 'https://www.kertag.cn/'

2.修改项目目录下vite.config.js为以下代码

import {
         defineConfig } from "vite";
    import vue from "@vitejs/plugin-vue";
    import {
         resolve } from "path";
    
    export default defineConfig(({
          mode }) => {
        
      return {
        
        base: "/",
        plugins: [vue()],
        server: {
        
          open: true,
        },
        //解决打包过大
        build: {
        
          chunkSizeWarningLimit: 1000,
          rollupOptions: {
        
            output: {
        
              // 分包
              manualChunks(id) {
        
                if (id.includes("node_modules")) {
        
                  return id
                    .toString()
                    .split("node_modules/")[1]
                    .split("/")[0]
                    .toString();
                }
              },
            },
          },
        },
        // 配置别名
        resolve: {
        
          alias: [
            {
        
              find: "@", //指向的是src目录
              replacement: resolve(__dirname, "src"),
            },
          ],
        },
      };
    });

### 六、axios配置 ###

1.安装

npm i axios

2.在axios目录下创建index.js、api.js

index.js

import axios from "axios";
    import {
         ElLoading, ElMessage } from "element-plus";
    //创建axios的一个实例
    var instance = axios.create({
        
        baseURL: import.meta.env.VITE_ADMIN_API, //接口统一域名
        timeout: 6000, //设置超时
        headers: {
        
            "Content-Type": "application/json;charset=UTF-8;",
        },
    });
    
    //请求拦截器
    instance.interceptors.request.use(
        (config) => {
        
            // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
            const token = window.localStorage.getItem("token");
            token && (config.headers.Authorization = token);
            //若请求方式为post，则将data参数转为JSON字符串
            if (config.method === "POST") {
        
                config.data = JSON.stringify(config.data);
            }
            return config;
        },
        (error) =>
            // 对请求错误做些什么
            Promise.reject(error)
    );
    
    //响应拦截器
    instance.interceptors.response.use(
        (response) => {
        
            //响应成功
            return response.data;
        },
        (error) => {
        
            console.log(error);
            //响应错误
            if (error.response && error.response.code) {
        
                const code = error.response.code;
                switch (code) {
        
                    case 201:
                        message = "没有权限";
                        break;
                    default:
                        message = "请求失败";
                }
                ElMessage.error(message);
                return Promise.reject(error);
            }
            return Promise.reject(error);
        }
    );
    
    export default instance;

api.js

import axios from "@/axios/index";
    
    // 封装全局get
    export const get = (url, params = {
         }) => {
        
        return axios({
        
            url: url,
            method: "get",
            params,
        });
    };
    
    // 封装全局post
    export const post = (url, data = {
         }) => {
        
        return axios({
        
            url: url,
            method: "post",
            data,
        });
    };

### 七、引入element-plus和element-plus的图标库 ###

1.安装

npm install element-plus --save
    npm install @element-plus/icons-vue

最终的main.js文件内容如下

import {
         createApp } from "vue";
    import App from "@/App.vue";
    // 引入路由
    import router from "@/router/index";
    // 引入存储(状态管理)
    import store from "@/store/index";
    // 引入element-plus
    import ElementPlus from "element-plus";
    // 引入element-plus中文
    import locale from "element-plus/lib/locale/lang/zh-cn";
    // 引入element-plus样式
    import "element-plus/dist/index.css";
    // 引入element-plus图标
    import * as ElementPlusIconsVue from "@element-plus/icons-vue";
    // 引入GET和POST方法
    import {
         get, post } from "@/axios/api";
    // 创建
    const app = createApp(App);
    // 全局GET变量
    app.config.globalProperties.$get = get;
    // 全局POST变量
    app.config.globalProperties.$post = post;
    // 循环element图标库
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        
        app.component(key, component);
    }
    app.use(store).use(router).use(ElementPlus, {
         locale });
    app.mount("#app");

最后不要忘记 `npm run dev` 运行一下看看效果