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 18 Vue.js
详解Vue的mixin策略
Nov 19 Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
Vue基本指令实例图文讲解
Feb 25 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
vue完美实现el-table列宽自适应
May 08 Vue.js
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 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
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
php强制运行广告的方法
2014/12/01 PHP
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2015/10/25 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
2017/03/08 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
Vue实现滑动拼图验证码功能
2019/09/15 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
python距离测量的方法
2018/03/06 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
正隆泰信息技术有限公司上机题
2012/06/14 面试题
大学生专科学习生活的自我评价
2013/12/07 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
营销总经理岗位职责
2014/02/02 职场文书
中学家长会邀请函
2014/02/03 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
民主评议党员工作总结
2014/10/20 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
Java Socket实现Redis客户端的详细说明
2021/05/26 Redis
java版 联机五子棋游戏
2022/05/04 Java/Android
Android studio 简单计算器的编写
2022/05/20 Java/Android