从零开始vue后台搭建（边学边写，无原理，无废话，能run无错就行，有错再查系列）

vue项目创建

首先创建一个vue项目
脚手架那些应该没人不会用吧，新建文件夹都不会的话，也不用往下看了。。。
我这直接用的pycharm创建的

安装elementui库

npm install element-plus --save

配置自动导入功能

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

然后按照官方说法在vite.config.js中加两行自动导入的代码

插进去之后是这个样子的

// vite.config.js
import {fileURLToPath, URL} from 'node:url'

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'


export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
})

之后我们先试一下ui库是否成功进到项目中
复制一个组件的代码，放到app.vue中随便的位置

	<el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>

可以看到正常加载起来UI库了

UI库这样就算正常引入完成了，开始下一步了。

pinia安装使用

之前用过几次vuex，但是现在vue3都开始推荐pinia了，至于什么好不好怎么好那些自己去官网看自己去研究去吧，对于我来说就是一个公共变量，能用就行。

正常在脚手架创建项目的时候会提示是否安装pinia的，我这没选于是就需要手动安装了。
安装pinia和持久化插件（持久化就是把数据放在本地缓存中关掉页面数据还在）

npm install pinia  #安装pinia
npm install  pinia-plugin-persistedstate  #安装持久化插件

安装之后开始在代码中使用
第一步先main.js中引入注册使用，现有的代码中增加这些东西

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
app.use(pinia)

添加完成之后的代码是这个样子

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import App from './App.vue'


const app = createApp(App)

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
app.use(pinia)

app.mount('#app')

然后开始设置我们所需要的变量了，我这就要一个用户的数据就行，其他的你们照着弄一样的道理。
首先在src下面创建一个store文件夹，里面写一个user.js文件

然后user.js里的代码如下：

// user.js
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useStore = defineStore(
  'user',
  () => {
    const userinfo = ref('你好 pinia')
    return { userinfo }
  },
  {
    persist: true,
  },
)

这里我就设置了一个userinfo，想着之后直接扔个对象进去就完事了，下面的persist：true就是持久化存储整个内容。

我们先在app.vue里面引入测试一下，官网说用.$patch更好，反正我这性能没那么细致的要求，直接=最简单。

<script setup>

import {useStore} from "@/store/user.js";   //引入user

const userStore = useStore()  //创建一个实例
</script>

<template>

  {{ userStore.userinfo }}  //显示userstore的内容值
  {{ userStore.userinfo ? userStore.userinfo.name : '无数据' }}  //值内的值
  <el-button @click="userStore.userinfo = {name:'123',age:123}">Default</el-button>  //点击按钮修改内容

</template>

这个persist还能配置某一个数据是否需要持久化和其他配置，比如我只想存userinfo里面的name，就如下图这样

然后当页面对这个store对象操作改变值的时候在本地存储中就能看到这个值只存储了name了

目前全局变量也就完事了，下一步开始搞请求的封装。