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 相关文章推荐
详解Vue 的异常处理机制
Nov 30 Vue.js
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
vue路由实现登录拦截
Mar 24 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
vue组件vue-esign实现电子签名
Apr 21 Vue.js
vue实现登陆页面开发实践
May 30 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出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
解析php中的escape函数
2013/06/29 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
js获得参数的getParameter使用示例
2014/02/26 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
python使用urllib2提交http post请求的方法
2015/05/26 Python
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
Python GUI编程学习笔记之tkinter控件的介绍及基本使用方法详解
2020/03/30 Python
包装类的功能、种类、常用方法
2012/01/27 面试题
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
给客户的道歉信
2014/01/13 职场文书
2015年教研组工作总结
2015/05/04 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server
Python 键盘事件详解
2021/11/11 Python
SQL Server中锁的用法
2022/05/20 SQL Server