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-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 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实现自动对图片进行滚动显示的方法
2015/03/12 PHP
php防止sql注入简单分析
2015/03/18 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
javascript动画浅析
2012/08/30 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
Python性能优化技巧
2015/03/09 Python
wxPython使用系统剪切板的方法
2015/06/16 Python
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
python实现学员管理系统
2019/02/26 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
python实现Virginia无密钥解密
2019/03/20 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
pytorch数据预处理错误的解决
2020/02/20 Python
linux 下selenium chrome使用详解
2020/04/02 Python
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
关于元旦的广播稿
2014/02/16 职场文书
企业读书活动总结
2014/06/30 职场文书
会计学习心得体会
2014/09/09 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python