新版Vue3踩坑

---

前言

这几天心血来潮，想试试新版Vue3+vite+ts+Element-Plus，真的是踩了不少坑啊。

---

Pinia的使用

Pinia介绍

	在今年2月7号之前就看到不少文章说Pinia是做为Vuex5的试用版，最近又看到一篇文章说尤大为了Pinia作者的成果，
不准备把Pinia作为Vuex5了，而是一个独立的版本，以前开发都是一直用的Vuex状态管理，Pinia放弃了Mutations，
把同步异步都放在了Actions里执行，这无疑大大减少了多余的操作。Pinia极大简化了Vuex的使用，对TS支持更好，性能
更优，体积更小。Pinia支持Vue DevTools、热模块更新和服务端渲染

Pinia基础

Vuex和Pinia对比

• Vuex中的核心部分：State、Actions（异步）、Mutations（同步）、Getters
• Pinia中的核心部分：State、Getters、Action ( 同步、异步 )

Pinia各部分作用

• State：类似组件中的data，用于存储全局状态
• Getters：类似于组件的computed计算属性，根据已有的State封装派生数据，也具有缓存的特性，内部可以使用this，箭头函数时不能使用，会指向上下文
• Actions：类似于组件的methods，用于封装业务逻辑，同步异步均可执行

Pinia官方基本示例

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 }
  },
  // 也可以定义为
  // state: () => ({ count: 0 })
  actions: {
    increment() {
      this.count++
    },
  },
})

在组件内使用

import { useCounterStore } from '@/stores/counter'

export default {
  setup() {
    const counter = useCounterStore()

    counter.count++
    // 带自动补全 ✨
    counter.$patch({ count: counter.count + 1 })
    // 或使用 action 代替
    counter.increment()
  },
}

个人使用

//在src下创建一个store/index.ts
import { defineStore } from 'pinia'

// defineStore第一个参数 唯一id标识
export const usePinia = defineStore('usePinia', {
    state: () => {
        return {
            msg: '第一个状态数据 Pinia'
        }
    },
    getters: {
        
    },
    actions: {}
})




//在main.ts引入
import { createPinia } from 'pinia'
const pinia = createPinia()
const app = createApp(App)
app.use(router).use(pinia).mount('#app')




//在需要使用的组件内引入是用
<script setup lang="ts">
/* 引入pinia */
import { usePinia } from "@/store";
import { storeToRefs } from "pinia";
import { ref, reactive, defineProps, defineEmits, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
const props = defineProps({});
const emit = defineEmits([""]);
const pinia = usePinia();
const { msg } = storeToRefs(pinia);//为了实现响应式需要使用storeToRefs
</script>
<template>
  <div class="Category">{{ msg }}</div>
</template>
<style lang="scss" scoped>
.Category {
}
</style>

可以去看这篇文章Pinia使用

Vite中如何使用@替代src

//在Viteconfig.json内
{
  "compilerOptions": {
    "target": "esnext",
    "baseUrl": "./",//这个需要配置静态资源地址
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": [
      "esnext",
      "dom"
    ],
    "skipLibCheck": true,
    "paths": {//这个就是配置@路径
      "@/*": [
        "src/*"
      ]
    },
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}
// npm @types/node
//在vite.config.ts内
import * as path from 'path'
plugins:[
	...
	
],
 resolve: {
			alias: {
				 '@': path.resolve(__dirname, 'src')
		}
	},

vite中如何配置本地跨域

//vite.config.ts
export default defineConfig({
  plugins: [
  	  ...,
	
  ],
  server: {
	    open: true,//启动项目自动弹出浏览器
	    port: 8080,//启动端口
	    proxy: {
	      '/api': {
	        target: 'http://backend-api-02.newbee.ltd/manage-api/v1/adminUser/',	//实际请求地址
	        changeOrigin: true,
	      },
	    }
	  }

vite 中Elemen-Plus按需引入

npm install element-plus --save
npm install -D unplugin-vue-components unplugin-auto-import
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

//Element-Plus按需引入会有一个小BUG就是Loading 加载不会显示
//这时候就可以在main.ts内引入
import 'element-plus/theme-chalk/el-loading.css'

vite使用Router

//先下载 npm install vue-router@4
import { nextTick } from 'process';
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
/* 引入home路由 */
import Dashboard from '../view/Dashboard/route';
import Home from '../view/Home';
import Model from '../view/Model/route';
import System from '../view/System/route';
const routes: Array<RouteRecordRaw> = [

    {
        path: "/",
        name: "Layout",
        component: () => import("../view/Layout.vue"),
        redirect:"/introduce",
        children: [
            ...Dashboard,
            ...Home,
            ...Model,
            ...System
        ],
        meta: {
            title: "首页",
            routingAuthority: false
        }
    },
    {
        path: "/login",
        name: "Login",
        component: () => import("@/view/Login.vue"),
        meta: {
            title: "登录",
            routingAuthority: true
        }
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes
})
router.beforeEach((to: any, from: any, next) => {
    document.title = to.meta.title
})
export default router