| 携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天 |
|---|
基于Vue3和Elementplus,一起开启后端管理系统开发的旅程吧~~
一、新技术体验、探索
Vite2 + Vue3+Elemnt plus + Vuex4 + Vue-touter4
1、Composition API + script setup 的代码组织方式
- setup使用：
<template>
{data}
</template>
<script setup>
import { reactive, ref } from "@vue/reactivity";
cosnt data = ref()
</script>
- 计算属性： 在 Composition API 的语法中，计算属性和生命周期等功能，都可以脱离 Vue 的组件机制单独使用 。
import { computed } from "vue";
const isCollapse = computed(() => store.state.app.sidebar.opened);
-
watch监听：
-
响应式： Vue 3 的 ref、reactive 函数可以把一个声明数据变成响应式数据
Vue 3 的响应式机制: reactive是基于 Proxy 实现的。 更多Proxy用法，查看文档
Vue 3 中还有另一个响应式实现的逻辑，就是利用对象的 get 和 set 函数来进行监听，这种响应式的实现方式，只能拦截某一个属性的修改，这也是 Vue 3 中 ref 这个 API 的实现。(这也是需要修改ref声明的数据时，需要使用给value属性重新赋值)
const pageSize = ref(10);
const getActiveList = () => {
api.getActivityType(dataSearch).then((res) => {
if (res.code === 200) {
pageSize.value = res.data.total;
}
});
};
响应式的区别：
| defineProperty | Proxy | value setter |
|---|---|---|
| Vue2 | Vue3 reactive | Vue3 ref |
- 组件化
组件封装提升开发效率：
在 Vue3 中，使用 emit 来对外传递事件
const emits = defineEmits(["subjectHandle"]);
const { props } = defineProps({
moduleName: {
typeof: String,
default: ""
},
});
function subjectHandle(val) {
emits("subjectHandle", { val: val });
}
通过 defineProps 定义传递数据的格式，通过defineEmits 定义监听的函数，最终实现了组件和外部数据之间的同步。
- 路由
const route = useRoute()
const router = useRouter()
使用addRoute
动态加载路由会用到addRoute
- 生命周期
created -> 不需要
beforeMount -> onBeforeMount
mounted -> onMounted （使用频率高）
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeUnmount -> onBeforeUnmount
unmounted -> onUnmounted
errorCaptured -> onErrorCaptured
renderTracked -> onRenderTracked
renderTriggered -> onRenderTriggered
实战技术方案实现
- 项目规范和基础库封装
图片、视频上传
富文本
可视化大屏
- 权限系统
RBAC 权限管理机制
- 集成第三方框架
二、开发中遇到的问题
- icon的正确使用：
<el-icon>
<notebook />
</el-icon>
使用遇到Mac 谷歌浏览器，点击导航栏，有多层子菜单,展开卡顿。改用svg不会卡顿。
文件名后缀.vue
控制台报错信息：
-
TypeError: Failed to fetch dynamically imported module #12806 !
-
Vite打包问题， 关于Vite rollup部署 import “/@/XXX” form “XXX“问题：
rollup本身不具备路径解析能力
安装依赖:
yarn add @rollup/plugin-alias
vite.config.ts
import alias from "@rollup/plugin-alias";
export default defineConfig({
plugins: [alias(),vue()],
resolve: {
alias: {
"/@": path.resolve(__dirname, "./src"),
},
},
})
- Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
当点击导航菜单，导航无法跳转
- [vue-router] uncaught error during route navigation()
(问题参考) [vue-router] uncaught error during route navigation_胡聊前端的博客-CSDN博客
三、总结
勿以器御心~~
Vue3还有很多黑科技待发掘和实践，比如：新的 Fragment、Teleport 和 Suspense 等组件、[Vueuse工具包]VueUse在 GitHub 关注 VueUse 的动态和功能
根据实际的项目需求合理选择技术以及技术方案会大大提升开发效率、为公司创造更大的价值。
四、关于源代码
待代码优化后会分享基础版本，敬请期待哦
