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 相关文章推荐
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
Vue详细的入门笔记
May 10 Vue.js
vue+springboot实现登录验证码
May 27 Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
vue使用echarts实现折线图
Mar 21 Vue.js
vue+iview实现手机号分段输入框
Mar 25 Vue.js
vue ref如何获取子组件属性值
Mar 31 Vue.js
vue的项目如何打包上线
Apr 13 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
如何删除多级目录
2006/10/09 PHP
php数组应用之比较两个时间的相减排序
2008/08/18 PHP
解析PHP中intval()等int转换时的意外异常情况
2013/06/21 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
CI框架常用函数封装实例
2016/11/21 PHP
php中this关键字用法分析
2016/12/07 PHP
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
详解在vue-cli中使用路由
2017/09/25 Javascript
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
南京某公司笔试题
2013/01/27 面试题
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
经典禁毒标语
2014/06/16 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
python flask框架快速入门
2021/05/14 Python
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python