vite + vue3 环境搭建

零、代码文件用于快速搭建项目

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

完结撒花