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且为路由地址

效果实现

相关推荐
用户841794814569 小时前
vxe-gantt vue table 甘特图子任务多层级自定义模板用法
vue.js
还算善良_9 小时前
【Vue】vue3实现文件预览组件(预览服务使用kkfileview)
javascript·vue.js·ecmascript
tangdou3690986559 小时前
AI真好玩系列-Three.js手势控制游戏开发教程 | Interactive Game Development with Three.js Hand Con
前端·人工智能·ai编程
七夜zippoe9 小时前
基于ReAct框架的智能体构建实战 - 从原理到企业级应用
前端·javascript·react.js·llm·agent·react
qinyuan159 小时前
使用husky和fabric规范git提交的注释
前端·后端
T___T9 小时前
偷看浏览器后台,发现它比我忙多了
前端·浏览器
alamhubb9 小时前
vue也支持声明式UI了,向移动端kotlin,swift看齐,抛弃html,pug升级版,进来看看新语法吧
前端·javascript·前端框架
毕设源码-邱学长9 小时前
【开题答辩全过程】以 基于web的心理测评系统的设计与实现为例,包含答辩的问题和答案
前端
北辰alk9 小时前
从零构建Vue项目的完全指南:手把手打造现代化前端工程
vue.js
Composure9 小时前
在 UmiJS + Vue 3 项目中实现 WebP 图片自动转换和优化
前端·javascript