Vue以及整合ElementUI

初始化vue项目

bash 复制代码
#vue 脚手架使用 webpack 模板初始化一个 appname 项目
vue init webpack `appname`

启动 vue 项目

bash 复制代码
#项目的 package.json 中有 scripts,代表我们能运行的命令
npm start = npm run dev #启动项目
npm run build:将项目打包

项目结构


运行流程

编写一个自己的视图


做一个跳转效果

https://router.vuejs.org/zh/guide/


整合ElementUI

安装参考官网

https://element.eleme.cn/#/zh-CN/component/installation

bash 复制代码
npm install element-ui -S


使用一个页面布局并实现一个小需求

https://element.eleme.cn/#/zh-CN/component/container

复制官网提供的代码到App.vue中,将里的内容替换为路由视图

编写新的视图并加入到index.js里

根据官网https://element.eleme.cn/#/zh-CN/component/menu

的提示 NavMenu 导航菜单 可以点击进行页面跳转 router属性默认是false的,我们将它改为true。并且index且为路由地址

效果实现

相关推荐
晴殇i12 分钟前
🎉 TRAE 一年使用的过程体验 🎉
前端
GDAL17 分钟前
Tailwind CSS Flex 布局深入全面教程
前端·css·tailwindcss
qq. 280403398420 分钟前
react --> redux
前端·react.js·前端框架
前端不太难22 分钟前
用 RN 的渲染模型,反推 Vue 列表的正确拆分方式
前端·javascript·vue.js
JS_GGbond28 分钟前
防抖与节流:前端性能优化“双剑客”
前端
KLW7532 分钟前
vue v-if和v-show比较
前端·css·css3
梵尔纳多37 分钟前
使用 Electron 实现一个简单的文本编辑器
前端·javascript·electron
晴殇i39 分钟前
SPA首屏加载速度优化!
前端
ts97739 分钟前
Nginx + Vue History 模式刷新 404 的完整排查与解决方案
运维·vue.js·nginx
qq. 280403398440 分钟前
react 副作用探究
前端·react.js