关键词:
附上源码地址: Vue3.0+TS+Element-plus 后台管理系统模板
准备工作
安装vue3.0,npm create vue3-project
选中这几项即可,不需要vuex, 我们自己封装状态管理。
setup函数使用
在.vue文件中, script 标签下代码都必须带有lang=“ts”。关于setup函数调用时间是在vue2的create之前触发,关于其他的生命周期相信大家都有所了解,这里就不做赘述了。setup有两种写法 ,
常规写法
<script lang="ts">
import defineComponent from 'vue'
export default defineComponent(
name: 'home',
setup()
return
)
</script>
需要在模板html中使用到的变量及方法名必须全部 return
简捷写法
<script lang='ts' setup>
import navbar from '@/components/Navbar'
</script>
无需 return 包括components,只要定义或引入后即可直接在html中使用,弊端是name无法定义,如果用到 name, 须:
<script lang="ts">
import defineComponent from 'vue'
export default defineComponent(
name: 'home',
)
</script>
<script lang='ts' setup>
import navbar from '@/components/Navbar'
// 此处编写业务代码 .......
</script>
此两种写法本人在项目中都有用到,我认为最好的使用场景是 components组件中使用第一种,views页面中使用第二种。原因是由于组件中会常用到props, emit,如此在第二种写法中就不太方便了,必须
import defineProps, defineEmits from 'vue'
状态管理Store
vue3.0是支持vuex的,而且vuex 是一个比较完善的状态管理库。它很简单,并与 Vue 集成的非常好。不使用vuex的原因是vue3 版本重新编写了底层的响应式系统(reactive,ref),并介绍了构建应用程序的新方法。新的响应式系统非常强大,它可以直接用于集中的状态管理,既然自身已经具备这样的功能,何必还要单独安装vuex舍近求远呢。于是我自定义了一套store。用法我结合了es6的class,具体实现项目中查阅更详细!
import reactive, readonly from 'vue'
export abstract class Store<T extends Object>
protected state: T
constructor()
const data = this.data()
this.setup(data)
this.state = reactive(data) as T
public getState(): T
return readonly(this.state) as T
protected abstract data(): T
protected setup(data: T): void
动态缓存(keep-alive)
在vue2中
<transition name="fade-transform" mode="out-in">
<keep-alive :include="cachedViews">
<router-view class="app-container" :key="key" />
</keep-alive>
</transition>
在vue3中
<router-view class="app-container" v-slot=" Component, route ">
<transition name="fade-transform" mode="out-in">
<keep-alive :include="cachedViews" :max="10">
<component :is="Component" :key="route.path" />
</keep-alive>
</transition>
</router-view>
Element Plus
全局汉化
在element-plus中, 默认是英文版的我们需要加一个汉化:
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import locale from 'element-plus/lib/locale/lang/zh-cn'
// 注册ElementPlus
app.use(ElementPlus,
locale, // 语言设置
size: Cookies.get('size') || 'medium' // 尺寸设置
)
主题风格
// 主题颜色风格逻辑引入
import theme from '@/utils/theme'
import getSetting from '@/utils/setting'
// 主题颜色风格初始化
theme(getSetting('theme'))
关于 theme 以及 getSetting 方法, git中有详细代码, 这里只说明重要代码
注意
关于菜单接口数据格式以下为例
children: [
alwaysShow: null
children: []
component: "systemManagement/menuManage"
hidden: false
meta: title: "菜单管理", icon: "", noCache: false
name: "menuManage"
path: "menuManage"
redirect: ""
]
component: "Layout"
hidden: false
meta: title: "系统管理", icon: "international", noCache: false
icon: "international"
noCache: false
title: "系统管理"
name: "systemManagement"
path: "/systemManagement"
redirect: "noRedirect"
感谢阅读~~
本篇文章及项目代码参考vue2.0版若依系统,特此说明并致谢!
如果对您有所帮助,请点个star,谢谢!
couldnotfindadeclarationfileformodule'element-plus'.
参考技术A在引入element-plus时报错Couldnotfindadeclarationfileformodule'element-plus'.环境是:vue3.0+element-plus+typescript原因:没有对变量声明类型解决方法:1、简单粗暴:在tsconfig.json里的compilerOptions加入noImplicitAny:false2、简单粗暴://@t... 查看详情
vue3.0中element-plus级联选择器——直接输出所选中的最后一级的数据(代码片段)
<el-cascaderplaceholder="试试搜索:北京":options="options":props="multiple:true"filterable@change="checkedData"collapse-tagsref="cascad 查看详情
vue3.0安装element-ui的方式
参考技术A在2.X的版本中,安装element是安装element-ui在3.0的版本中,安装element是安装element-plus然后按照3.0的element-plus官方文档进行操作就行了 查看详情
vue3.0中element-plus级联选择器——直接输出所选中的最后一级的数据
<el-cascaderplaceholder="试试搜索:北京":options="options":props="multiple:true"filterable@change="checkedData"collapse-tagsref="cascadeAddr"></el-cascader>checkedData()for(leti=0;i<this.$refs['cascade... 查看详情
vue3.0+vite实现移动端自适应布局
参考技术A然后再main.ts中引入amfe-flexible最后启动项目就会发现px已经是自适应的单位,如果想用原来的px只需改成大写的PX单位即可 查看详情
vue3.0中读取本地markdown文件的内容
参考技术A在使用md-editor-v3实现markdown显示的时候,需求是读取本地的md文件,直接显示在页面上,因为当前项目使用Vue3.0+TS+Vite实现的,所以就需要看下怎么读取本地.MD文件的内容,看了Vite官方文档,发现静态资源文件c处理有说... 查看详情
vue3.0+ts使用原生高德地图解决方法
参考技术A1.引入高德sdk2.为了防止打包时把高德纳入,我们需要在webpack中配置,这里以vue.config.js为例3.声明文件,用了typescript,那么就是想运用到它的类型提醒功能,那么必不可少地需要引入高德地图的声明文件,由于官方也... 查看详情
vue3.0+vite+router搭建项目
...项目创建成功。注意:使用vscode打开最好安装一个插件:Vue3snippets,方便模板建立。(1)、查看所有路由版本:(2)、安装路由(vue-router>=4.0.0)(3)、初始化路由情景一:打开main.js,初始化路由。情景二:(使用ts语法)... 查看详情
使用vite搭建vue3.0和ts项目过程(代码片段)
本篇豆芽主要也是分享怎么使用vite去搭建vue-ts项目,搭建之前先来说一说vite,vite是一种新型前端构建工具,能够显著提升前端开发体验。那么豆芽对它的感觉来说,就是快。搭建快,运行快。想了解比较详情的可... 查看详情
关于vue3+ts+element-plus项目的初次踩坑
参考技术A搭建一个vue3,ts,element-plus项目时,总有一些莫名其妙的问题。项目创建完成之后,elemen文件:src/plugins/element.js这个文件是选择了按需导入,之后脚手架自动创建的。脚手架在main.ts中引入的这个文件会报错,这时候我纳... 查看详情
快速进阶vue3.0(代码片段)
...3.0正式版。可以直接看 github源码。新版Vue3.0计划并已实现的主要架构改进和新功能:编译器(Compiler)使用模块化架构优化"Blocktree"更激进的statictreehoisting功能(检测静态语法,进行提升)支持Sourcemap内置标识符前缀(又名"s... 查看详情
vue3笔记(代码片段)
...染快133%内存减少54%1.1源码的升级使用proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking1.2拥抱TypeScriptvue3可以更好的支持ts1.3新的特性 1.Composi 查看详情
连尤大都说,vue3+scriptsetup+ts+volar真香…
...;可能会包含很多非侵入式的代码和服务,并不是功能实现了就万事大吉。但随着Vue3.0横空出世,字节跳动、腾讯等已经开始重点考察,前端程序员对 Vue框架的理解和应用能力。比如,在字节面试真题中,CSS... 查看详情
vue3.0源码系列响应式原理-reactivity(代码片段)
...92.com/vue该系列文章,均以测试用例通过为基准一步步实现一个vue3源码副本(学习)。文字比较长,如果不想看文字可直接转到这里看脑图简介reactivity是vuenext里面通过proxy+reflect实现的响应式模块。源码路径:packages/r... 查看详情
解决vue3+vite+ts中使用element-plus按需引入elloadingelmessage样式失效(代码片段)
...载到我们的可以看到下面使用的方式和效果图,vue3的element-plus遇到的问题,因为要测试一下,所以点的频率比较大,但可以明显的看到ElMessage样式显示在你浏览器的下面importElMessagefrom"element-plus";//点击登录... 查看详情
vue3.0再不学就out了!跟我入门第一天,含集成tsroutervuex等使用方法(代码片段)
1.如何在vue中集成tsvue-cli创建项目时选择ts依赖yarnaddtypescript进行安装vite安装tsvite—>vue/vue-ts就可以直接写ts代码了可以学习下typescript—》点击蓝色字体跟我一起快速入门ts哦学了typescript之后再用ts的写法来写vue组件代码2.composit... 查看详情
使用vue3.0和element实现后台管理模板
使用vue3.0和element实现后台管理模板:https://www.cnblogs.com/zhoulifeng/p/10123632.html 通过自己所学的这段时间,利用空余时间,使用vue3.0脚手架搭建的一个关于后台的管理模板,所实现功能也是模仿一个后台的界面,数据分为两种存... 查看详情
vue3.0实现数据懒加载(代码片段)
目录1.为什么使用数据懒加载? 2.实现数据懒加载3.封装复用技术手段Vue官方工具库 (仅限vue3.0使用)中的 useIntersectionObserver 核心API:IntersectionObserver(H5新增,不支持ie) 在没有这方法前使用 Element.getBoundi... 查看详情