网站建设座谈会上的发言,做盗版小说网站,徐州睢宁网站建设,总行网站建设银行报1.创建项目2.按需引入elementplus3.引入less安装vue-router安装 axios安装 piniapinia的持久化配置(用于把数据放在localStorage中)---另外增加的配置 1.创建项目
npm init vitelatest2.按需引入elementplus
npm install element-plus --save//按需引入
npm install -D unpl… 1.创建项目2.按需引入elementplus3.引入less安装vue-router安装 axios安装 piniapinia的持久化配置(用于把数据放在localStorage中)---另外增加的配置 1.创建项目
npm init vitelatest2.按需引入elementplus
npm install element-plus --save//按需引入
npm install -D unplugin-vue-components unplugin-auto-import配置icon库
npm install element-plus/icons-vue//然后把下列代码插入到你的 Vite 的配置文件vite.config.js中
import { defineConfig } from vite
import vue from vitejs/plugin-vue
import { resolve } from path
import AutoImport from unplugin-auto-import/vite
import Components from unplugin-vue-components/vite
import { ElementPlusResolver } from unplugin-vue-components/resolvers// https://vitejs.dev/config///
export default defineConfig({resolve: {alias: {: resolve(__dirname, ./src)}},css: {preprocessorOptions: {less: {math: always, // 括号内才使用数学计算globalVars: {// 全局变量mainColor: red,},},},},plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver(),],}),],// 配置前端服务地址和端口// server: {// port: 8991,// // 是否开启 https// https: false,// },})
3.引入less
npm install less
npm install less-loader在 vite.config.js中配置
css: {preprocessorOptions: {less: {math: always, // 括号内才使用数学计算globalVars: {// 全局变量mainColor: red,},},},},
安装vue-router
npm install vue-router4 --save
//安装最新的 npm i vue-routernext -S安装完成后在项目的入口文件中通常是main.js进行配置
import { createApp } from vue
import router from ./router
import App from ./App.vuecreateApp(App).use(router).mount(#app)router文件夹下创建index.js
import { createRouter,createWebHashHistory } from vue-router;
import {customerRouters} from ./customer
import Home from /views/home/index.vue
import HomeIndex from /views/home/home.vue//hash模式路由
const routes [{path:/,name:home,component:Home,meta: {title: 首页},redirect: /home-index,children:[{path: home-index,name: home-index,component: HomeIndex,meta: {title: 首页,}},customerRouters,]},{path:/login,name:login,component:() import(/views/login/index.vue),meta: {title: 登录},}
]
const router new createRouter({history: createWebHashHistory(), //vue3是用history控制路由模式vue2是moderoutes});
export default router安装 axios
npm install axios --save安装 pinia
npm install piniamain.js中配置
import store from ./store;
createApp(App)
.use(router)
.mount(#app)store文件夹下创建index.js
import { defineStore } from pinia;// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const userStore defineStore({// 用来存储全局数据id: usestore,state: () ({title: hello world,name: 安安,age: 18,school: {name: 嗷嗷,age: 15,errs: 保安,},}),// 用来监视或者说是计算状态的变化的有缓存的功能。getters: {},// 对state里数据变化的业务逻辑就是修改state全局状态数据的。actions: {},
});pinia的持久化配置(用于把数据放在localStorage中)—另外增加的配置
npm i -S pinia-plugin-persist使用 1、在src下创建store文件夹并在其内创建index.js文件文件内容如下
import { createPinia } from pinia
import piniaPluginPersist from pinia-plugin-persistconst store createPinia()
store.use(piniaPluginPersist)export default store在store目录下创建一个新的js文件比如info.js写入以下内容建议通过 actions 去修改 stateaction 里可以直接通过 this 访问
import { defineStore } from piniaexport const userStore defineStore({id: info, // id是唯一的如果有多个文件ID不能重复state: () {return {userinfo: null,bank_type: 1, }},actions: {setInfo(data) {this.userinfo data},setBankType(data) {this.bank_type data},// 用户退出清除本地数据logout() {this.userinfo nullsessionStorage.clear()localStorage.clear()},},// 开启数据缓存在 strategies 里自定义 key 值并将存放位置由 sessionStorage 改为 localStorage// 默认所有 state 都会进行缓存你可以通过 paths 指定要持久化的字段其他的则不会进行持久化如paths: [userinfo] 替换key的位置persist: {enabled: true,strategies: [{key: users,storage: localStorage,},],},
})页面中使用
script setup
import { getCurrentInstance, ref } from vue
import { userStore } from store/info // 引用js路径根据你们对应配置好的路径填写
const store userStore()function getinfo() {proxy.$axios.get(, {}).then((res) {if (res.data.code 0) {let result res.data.data// 调用info.js的actions中的setInfo方法// 跟vuex有所差别vuex是store.commit 或 store.dispatchpinia是省去了“.commit/.dispatch”步骤store.setInfo(result) } else {Toast(res.data.msg)}}).catch((err) {})
}/script
