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 $attrs & inheritAttr实现button禁用效果案例
Dec 07 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
vue 实现图片懒加载功能
Dec 31 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
vue使用echarts实现折线图
Mar 21 Vue.js
Vue.Draggable实现交换位置
Apr 07 Vue.js
如何优化vue打包文件过大
Apr 13 Vue.js
ant design vue的form表单取值方法
Jun 01 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防止SQL注入详解及防范
2013/11/12 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
再谈Yii Framework框架中的事件event原理与应用
2020/04/07 PHP
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
对python抓取需要登录网站数据的方法详解
2018/05/21 Python
python语音识别实践之百度语音API
2018/08/30 Python
python url 参数修改方法
2018/12/26 Python
django云端留言板实例详解
2019/07/22 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
写给女朋友的道歉信
2014/01/08 职场文书
合作意向书模板
2014/03/31 职场文书
房屋所有权证明
2014/10/20 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
朋友聚会开场白
2015/06/01 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js