上海网站建设解决方案郑州推广优化公司

1.创建项目

npm init vite@latest

2.按需引入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-router@4 --save
//安装最新的 npm i vue-router@next -S

安装完成后，在项目的入口文件中（通常是main.js）进行配置：

import { createApp } from 'vue'
import router from './router'
import App from './App.vue'createApp(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 pinia

main.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-persist"const store = createPinia()
store.use(piniaPluginPersist)export default store

在store目录下创建一个新的js文件，比如info.js，写入以下内容（建议通过 actions 去修改 state，action 里可以直接通过 this 访问）

import { defineStore } from "pinia"export 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.dispatch，pinia是省去了“.commit/.dispatch”步骤store.setInfo(result) } else {Toast(res.data.msg)}}).catch((err) => {})
}</script>