创建Vue3+Vite单页面应用总结发布于2023-01-02 00:16:12，更新于2023-05-20 18:50:22，标签：web 文章会持续修订，转载请注明来源地址：https://meethigher.top/blog

一、Node版本管理

1.1 搭建node

1.1.1 Windows

准备nvm-windows，是windows系统用来管理node版本的工具。使用过node的应该都知道，node新版本是完全不兼容旧版本的，这就是这个工具存在的意义

# 查看列表
nvm list
# 下载 16.16.0
nvm install 16.16.0
# 切换版本
nvm use 16.16.0
# 查看版本
node -v
npm -v

操作如图

1.1.2 Linux

保证配置代理的基础上，执行如下命令

curl -L -o a.tar.gz https://github.com/nvm-sh/nvm/archive/refs/tags/v0.39.2.tar.gz && tar -zxvf a.tar.gz && mv nvm-0.39.2/ /usr/local/nvm
cat > /etc/profile.d/nvm.sh <<EOF
#!/usr/bin/env bash
export NVM_DIR="/usr/local/nvm"
[ -s "\$NVM_DIR/nvm.sh" ] && \. "\$NVM_DIR/nvm.sh"  # This loads nvm
EOF
source /etc/profile && nvm --version

操作如图

参考CentOS7下安装NVM_centos 安装nvm_veejaLiu的博客-CSDN博客

1.2 创建vue项目

参考文档简介 | Vue.js，执行命令

C:\Users\meethigher\Desktop>npm init vue@latest
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

Vue.js - The Progressive JavaScript Framework

√ Project name: ... vue-admin
√ Add TypeScript? ... No
√ Add JSX Support? ... No
√ Add Vue Router for Single Page Application development? ... Yes
√ Add Pinia for state management? ... No
√ Add Vitest for Unit Testing? ... No
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No

Scaffolding project in C:\Users\meethigher\Desktop\vue-admin...

Done. Now run:

  cd vue-admin
  npm install
  npm run dev

按提示命令，启动项目

二、项目理解

2.1 配置IDE

作为一个后端人员来说，还是更喜欢jetbrains家的产品，此处使用的webstorm。由于写js习惯性带;，习惯用""，所以需要配置自动添加分号。

进行ctrl+alt+L格式化代码时，即可自动添加。

2.2 理解代码

1.) 理解main.js

// 解构出 createApp
import {createApp} from "vue";
// 导入根组件
import App from "./App.vue";
// 导入路由配置
import router from "./router";
// 导入全局样式
import "./assets/main.css";
// 创建一个根app实例
const app = createApp(App);
// 将路由挂载到app实例
app.use(router);
// 将app实例挂载到id为app的元素上
app.mount("#app");

2.) 理解router.js，参考文档介绍 | Vue Router

/*
* 1. 先导入 vue-router
* createRouter 创建路由的方法
* createWebHistory 路由模式(History) 前面用的是 / 开头，一般是要后端配合使用，容易产生404
* createWebHashHistory 路由模式(Hash) 前面用的是 # 开头，无需配合
* */
import {createRouter, createWebHistory, createWebHashHistory} from "vue-router";
// 导入home组件
import HomeView from "../views/HomeView.vue";

// 配置路由规则
const routers = [
    {
        //访问时的路径
        path: "/",
        //命名路由，路由的别名
        name: "home",
        //当访问到对应路由后需要展示的组件
        //路由的急加载
        component: HomeView
    },
    {
        path: "/about",
        name: "about",
        //路由的懒加载，对于一些不确定立即需要显示的页面，可以使用懒加载
        component: () => import("../views/AboutView.vue")
    }
];

// 创建router
const router = createRouter({
    // 配置路由模式
    history: createWebHistory(import.meta.env.BASE_URL),
    // 配置路由规则
    routes: routers
});

// 导出路由
export default router;

3.) 理解app.vue

<!--
在script标签中，带setup，说明在该script中写的所有代码，就是在setup中写的
-->
<script setup>
    import {RouterLink, RouterView} from "vue-router";
    //在setup中，不需要手动注册组件，直接导入即可使用
    import HelloWorld from "./components/HelloWorld.vue";
</script>

<template>
    <header>
        <div class="wrapper">
            <HelloWorld msg="You did it!"/>

            <nav>
                <!--RouterLink表示声明式跳转-->
                <!--还有编程式跳转 通过js跳转-->
                <!--to属性指定需要跳转的路径-->
                <RouterLink to="/">Home</RouterLink>
                <RouterLink to="/about">About</RouterLink>
            </nav>
        </div>
    </header>
    <!--RouterView：路由出口，所有的组件页面，都可以通过RouterView来展示-->
    <RouterView/>
</template>
<!--
scoped该属性是用来标记当前样式只能在当前组件中使用
其存在的目的是为了防止样式冲突
-->
<style scoped>
    header {
        line-height: 1.5;
        max-height: 100vh;
    }

    .logo {
        display: block;
        margin: 0 auto 2rem;
    }

    nav {
        width: 100%;
        font-size: 12px;
        text-align: center;
        margin-top: 2rem;
    }

    nav a.router-link-exact-active {
        color: var(--color-text);
    }

    nav a.router-link-exact-active:hover {
        background-color: transparent;
    }

    nav a {
        display: inline-block;
        padding: 0 1rem;
        border-left: 1px solid var(--color-border);
    }

    nav a:first-of-type {
        border: 0;
    }

    @media (min-width: 1024px) {
        header {
            display: flex;
            place-items: center;
            padding-right: calc(var(--section-gap) / 2);
        }

        .logo {
            margin: 0 2rem 0 0;
        }

        header .wrapper {
            display: flex;
            place-items: flex-start;
            flex-wrap: wrap;
        }

        nav {
            text-align: left;
            margin-left: -1rem;
            font-size: 1rem;

            padding: 1rem 0;
            margin-top: 1rem;
        }
    }
</style>

三、搭建项目

3.1 置空项目

将不必要的文件都删除，最后的结构如图

启动项目后是个空的

3.2 安装css预编译less

安装

# 带上-D参数，表示安装到devDepencencies
npm install less

使用

<!--css预编译语言：less、sass-->
<!--webstorm不支持sass的代码提示，刚好我也不会-->
<style scoped lang="less">
</style>

3.3 安装全局初始化样式

normalize - npm

安装

npm install normalize

在main.js中全局引用

// 导入全局格式化标签样式
import "normalize.css/normalize.css";

3.4 安装element-plus

在element-plus中，元素名恰好是对应的class名称，可以直接配样式

快速开始 | Element Plus

安装

npm install element-plus

配置自动按需导入

npm install -D unplugin-vue-components unplugin-auto-import

按照官网要求修改vite.config.js

3.5 安装element-icon

Icon 图标 | Element Plus安装

npm install @element-plus/icons-vue

实际使用时，手动按需引入即可，如下

import {Fold, Expand} from "@element-plus/icons-vue";

3.6 安装axios

配置axios

Axios安装

npm install axios

封装通用request.js

import axios from "axios";

//封装baseUrl
//开发环境development 打包命令npm run dev
//生产环境production 打包命令npm run build
const isDev = process.env.NODE_ENV == "development";
const dev = "http://127.0.0.1/api/";
const pro = "http://121.89.205.189:3000/";
const request = axios.create({
    baseURL: isDev ? dev : pro,
    timeout: 60000,//单位毫秒
    headers: {"X-Custom-Header": "foobar"}
});


// 添加请求拦截器
request.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
request.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
});


// 自定义各种数据请求
export default function ajax(config) {
    //解构赋值 https://www.cnblogs.com/tfxz/p/12838739.html
    // let node = {
    //     type: "Identifier"
    // };
    // // 使用解构来创建两个字段，type、name，如果node中该字段有值，则覆盖掉
    // ({type = 'type', name = 'name'} = node);
    // console.log(type); // "Identifier"
    // console.log(name); // "name"
    const {url = "", method = "GET", data = {}, headers = {}} = config;

    //判断请求类型
    switch (method.toUpperCase()) {
        case "GET":
            return request.get(url, {
                params: data
            });
        case "POST":
            //表单形式
            if (headers["content-type"] == "application/x-www-form-url-encoded") {
                //格式化数据
                const obj = new URLSearchParams();
                for (let key in data) {
                    obj.append(key, data[key]);
                }
                return request.post(url, data, {headers});
            }
            //文件形式
            if (headers["content-type"] == "multipart/form-data") {
                //文件处理对象
                let obj = new FormData();
                for (let key in data) {
                    obj.append(key, data[key]);
                }
                return request.post(url, data, {headers});
            }
            //json形式
            return request.post(url, data);
    }
}

配置vite跨域

开发服务器选项 | Vite 官方中文文档

server: {
    port: 80,
    open: false, //自动打开
    base: "./ ", //生产环境路径
    /*配置代理转发，开发环境使用https://www.cnblogs.com/tik2012/p/16866356.html*/
    proxy: { // 本地开发环境通过代理实现跨域，生产环境使用 nginx 转发
        // 正则表达式写法
        '^/api': {
            target: 'http://121.89.205.189:3000/', // 后端服务实际地址
            changeOrigin: true, //开启代理
            rewrite: (path) => path.replace(/^\/api/, '')
        }
    }
}

3.7 安装vuex

配置vuex

Vuex 是什么？ | Vuex安装

npm install vuex@next

封装通用vuex.js

// 使用vuex进行全局状态管理

import {createStore} from "vuex";

const store = createStore({
    //严格模式，在生产环境中，不能打开
    strict: process.env.NODE_ENV !== "production",
    //全局状态
    state() {

        return {
            count: 100,
            //用户信息
            userInfo: {}
        };
    },
    //项目中唯一修改数据的方法
    //严格模式中，不允许在这里做异步，要在actions里面做。比如setTimeout等
    mutations: {
        add(state) {
            state.count++;
        },
        addNum(state, amount) {
            state.count += amount;
        },
        //保存用户数据
        updateUserInfo(state, value) {
            state.userInfo = value;
        }
    },
    //异步修改数据的地方
    actions: {
        addAction(context) {
            setTimeout(function () {
                /*所谓异步，也还要调用同步的方法进行修改数据*/
                context.commit("add");
            }, 5000);
        },
        addActionNum(context, amount) {
            setTimeout(function () {
                /*所谓异步，也还要调用同步的方法进行修改数据*/
                context.commit("addNum", amount);
            }, 5000);
        }
    },
    //vuex中的计算属性
    getters: {},
    //全局状态模块
    modules: {}
});


//导出创建好的实例
export default store;

vuex数据持久化

持久化vuex数据，方便在页面重新加载时，恢复数据。

1. 通过自己手动存储需要持久化的数据
2. 通过插件进行自动持久化

自动持久化，需要安装vuex插件

npm install vuex-persistedstate

添加plugins，如下图

使用生命周期函数验证登录

export default {
    //生命周期函数
    mounted() {
        //用户没有登录
        if (!this.$store.state.userInfo.adminname) {
            this.$router.push("/login");
            return;
        }
    }
}