vue3.0+vue-router+element-plus初实践


Posted in Vue.js onDecember 02, 2020

Vue3中文文档

Vue3.0对比Vue2.x优势

  • 框架内部做了大量的性能优化,包括:虚拟dom,编译模板,Proxy的新数据监听,更小的打包文件等。
  • 新增的组合式API(即Composition API),更适合大型项目的编写方式。
  • 对TypeScript支持更好,去掉this操作,更强大的类型推导。

初始化项目

安装@vue/cli

npm install @vue/cli -g
 或 yarn global add @vue/cli

创建项目

vue create 项目名

可以选择Vue3的配置进行项目初始化

vue3.0+vue-router+element-plus初实践

初始化完成后,安装vue-router,目前安装的版本是^4.0.0-rc.2
在 /src/router/index.js 中创建路由配置:

import { createRouter, createWebHashHistory } from 'vue-router'

const Test = () => import(/* webpackChunkName: "Test" */ '@/views/test/index')

const constantRoutes = [
 {
  path: '/v3-demo',
  component: Test
 }
]

// https://www.npmjs.com/package/vue-router
const router = createRouter({
 history: createWebHashHistory(),
 routes: constantRoutes,
})

export default router

安装elment-plus(element-ui的3.x 版初体验), 目前版本是^1.0.1-alpha.14

main.js引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount('#app')

5.package.json的依赖包版本

"dependencies": {
  "core-js": "^3.7.0",
  "element-plus": "^1.0.1-alpha.14",
  "vue": "^3.0.0",
  "vue-router": "^4.0.0-rc.2"
 }

效果

vue3.0+vue-router+element-plus初实践

到此这篇关于vue3.0+vue-router+element-plus初实践的文章就介绍到这了,更多相关vue3.0 element-plus内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
springboot+vue实现文件上传下载
Nov 17 Vue.js
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
vue实现表格合并功能
Dec 01 Vue.js
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
vue+iview实现手机号分段输入框
Mar 25 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
vue el-table实现递归嵌套的示例代码
Aug 14 Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 #Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 #Vue.js
vue $router和$route的区别详解
Dec 02 #Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 #Vue.js
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 #Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 #Vue.js
Vue3+elementui plus创建项目的方法
Dec 01 #Vue.js
You might like
php面向对象的方法重载两种版本比较
2008/09/08 PHP
PHP排序算法的复习和总结
2012/02/15 PHP
php中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
Array.prototype 的泛型应用分析
2010/04/30 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
vue实现文件上传读取及下载功能
2020/11/17 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
Python的条件语句与运算符优先级详解
2015/10/13 Python
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
Python中join函数简单代码示例
2018/01/09 Python
python将回车作为输入内容的实例
2018/06/23 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
Python中实现输入一个整数的案例
2020/05/03 Python
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
主题实践活动总结
2014/05/08 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers