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 26 Vue.js
vue element实现表格合并行数据
Nov 30 Vue.js
详解Vue中的自定义指令
Dec 07 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
如何管理Vue中的缓存页面
Feb 06 Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
vue router 动态路由清除方式
May 25 Vue.js
vue实现在data里引入相对路径
Jun 05 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
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
PHP中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
基于initPHP的框架介绍
2013/04/18 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
js时间戳格式化成日期格式的多种方法
2013/11/11 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
Python实现的归并排序算法示例
2017/11/21 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
银行服务明星推荐材料
2014/05/29 职场文书
环保宣传标语
2014/06/12 职场文书
单位委托函范文
2015/01/29 职场文书
成本会计岗位职责
2015/02/03 职场文书
小学生手册家长意见
2015/06/03 职场文书
网络妈妈观后感
2015/06/08 职场文书
基层党建工作简报
2015/07/21 职场文书
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python