零、代码文件用于快速搭建项目
https://wwvh.lanzouw.com/i2J0W16ta4lc
一、安装less
yarn add less less-loader
二、安装router
yarn add vue-router@4
1.src下创建文件夹router及views
- views下创建文件Home.vue及About.vue(里面随便写点什么)
- router下创建文件index.js
// router 下的 index.js 文件
import { createRouter, createWebHashHistory } from "vue-router";
const router = createRouter({
history: createWebHashHistory(),
routes: [
{path: '/', name: "home", component: () => import('../views/Home.vue')},
{path: '/About', name: "about", component: () => import('../views/About.vue')},
]
})
export default router
2.更改一些对应配置
- App.vue
<template>
<router-view></router-view>
</template>
- vite.config.js（此文件更改后需重启项目）
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
// 配置别名
alias: [
{
find: '@',
replacement: path.resolve('./src')
}
]
},
base:'./', //设置打包路径
server: {
host: true // 启用本机ip
}
})
- mian.js
import { createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router/index'
const app = createApp(App)
app.use(router)
app.mount('#app')
三、安装pinia 并开启本地存储
yarn add pinia pinia-plugin-persist
在 src 下创建文件夹 stores
- 添加state.js文件
import { defineStore } from 'pinia'
export const useStateStore = defineStore({
id: 'state',
state: () => {
return {
projectId: "",
projectName: ""
}
},
getters: {},
actions: {},
// 开启数据缓存
persist: {
enabled: true,
strategies: [{
key: 'my_project',
storage: localStorage,
}]
}
})
- 添加index.js文件
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)
export default store
- 修改mian.js
import { createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router/index'
import store from "@/stores"
const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')
- 编辑 Home.vue 测试一下 pinia
<template>
Home
<h1>projectName：{{ projectName }}</h1>
<h1>projectId：{{ projectId }}</h1>
<input type="text" v-model="value1">
<br>
<input type="text" v-model="value2">
<br>
<button @click="inputPinia">写入pinia</button>
</template>
<script setup>
import { ref } from "vue"
import { storeToRefs } from "pinia"
import { useStateStore } from "@/stores/state.js"
const stateStore = useStateStore()
const { projectId, projectName } = storeToRefs(stateStore)
const value1 = ref("")
const value2 = ref("")
const inputPinia = () => {
stateStore.$patch({
projectName: value1.value,
projectId: value2.value
})
}
</script>
<style lang='less' scoped>
</style>
image.png
image.png
