0、初始化項(xiàng)目

// 最終代碼文件用于快速搭建項(xiàng)目
// https://wwvh.lanzouw.com/i2J0W16ta4lc

 yarn create vite

一、安裝less

yarn add less 

二、安裝router

yarn add vue-router@4

1.src下創(chuàng)建文件夾router及views

• views下創(chuàng)建文件Home.vue及About.vue(里面隨便寫點(diǎn)什么)

<template>
  Home
</template>

• router下創(chuàng)建文件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.更改一些對應(yīng)配置

• App.vue

<template>
  <router-view></router-view>
</template>

• vite.config.js（此文件更改后需重啟項(xiàng)目）

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: {
    // 配置別名  設(shè)置 `@` 指向 `src` 目錄
    alias: [
      {
        find: '@',
        replacement: path.resolve('./src')
        // 或者 
        // '@': path.resolve(__dirname, 'src'), 
      }
    ]
  },
  base:'./',  //設(shè)置打包路徑
  server: {
    host: true // 啟用本機(jī)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 下創(chuàng)建文件夾 stores

• 添加state.js文件

import { defineStore } from 'pinia'

export const useStateStore = defineStore({
  id: 'state',
  state: () => {
    return {
      projectId: "",
      projectName: ""
    }
  },
  getters: {},
  actions: {},
  // 開啟數(shù)據(jù)緩存
  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

完結(jié)撒花