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了
目前全局变量也就完事了,下一步开始搞请求的封装。