实战 | Vue + Element UI 页面创建
这是小小本周的第六篇,本篇将会着重讲解关于Vue和Element UI 相关的内容
思维导图
网页版Vue Cli 基本使用
这里使用Vue Cli 进行基本的使用
安装
npm install -g @vue/cli
安装的界面如下
PS C:UsersAdministratorDesktop> npm install -g @vue/cli
npm WARN deprecated @hapi/joi@15.1.1: joi is leaving the @hapi organization and moving back to 'joi' (https://github.com/sideway/joi/issues/2411)
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/address@2.1.4: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
[..................] / loadDep:sha.js: sill resolveWithNewModule apollo-env@0.6.5 checking installable status
检查版本是否正确
vue -V
这里安装完成。
打开网页版vue-cli
进入Vue页面
选择目录
选择预设
选择功能
创建项目
项目创建完成
启动程序并运行
安装Element UI
npm i element-ui -S
这里就可以看到已经安装完成。
体验Element UI
main.js 如下
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'Vue.use(Element)
Vue.config.productionTip = falsenew Vue({router,store,render: h => h(App)
}).$mount('#app')
about.vue 如下
<template><div class="about"><i class="el-icon-edit"></i><i class="el-icon-share"></i><i class="el-icon-delete"></i><el-button type="primary" icon="el-icon-search">搜索</el-button></div>
</template>
router.js 如下
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'Vue.use(VueRouter)const routes = [{path: '/',name: 'Home',component: Home},{path: '/login',name: 'Login',component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue')},{path: '/about',name: 'About',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')}
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})export default router
文件目录如下
访问效果如下
总结
以上简单的完成了一个Element UI 的页面的创建
小明菜市场
推荐阅读
● 了解 | 你必须了解的Mysql 三大日志
● 实战 | GitLab + Docker 实现多环境部署
● 明晰 | Java序列化与反序列化
● 理论 | 三天两夜,万字长文,吃透TCP/IP
● 应用 | Redis实现 主从,单例,集群,哨兵,配置应用
实战 | Vue + Element UI 页面创建相关推荐
- vue+element ui 设置页面全屏 全屏和退出全屏的切换
vue+element ui 设置页面全屏 全屏和退出全屏的切换 方式1 screenfull 插件 // 属性 screenfull.isFullscreen; // 判断当前页是否全屏 返回类型 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Table表格增删查改、Pagination分页、搜索框
文章目录 目标 代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式 总 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-代码总结(已开源)
文章目录 前言 项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
- Vue + Element UI 实现 登陆注册基本demo实例
Vue + Element UI 实现权限管理系统 前端篇(二):Vue + Element 案例 导入项目 打开 Visual Studio Code,File --> add Folder ...
- 【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Form表单填写、Dialog对话框弹出
文章目录 目标 代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录 目标 代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题 总代码 本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
- vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
- 【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
- 基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
最新文章
- Nexus Repository Manager 3 远程命令执行漏洞 CVE-2019-7238
- Visual Studio 2010或者2012上安装VASSISTX
- 博图wincc连接数据块_西门子博途WINCC 可通过创建画面模板提高编程效率
- HashMap实现中文分词器
- Silverlight学习笔记(三):创建第一个Silverlight应用程序
- n.html id=198,YPE htmlhtml lang=enhead data-n-head-ssrtitle data-n-=true小程序获取不到unionid 微信开放社区...
- 测试交友软件哪个最好用,陌陌与比邻你觉得哪个好用?陌陌比邻两大交友软件对比...
- 话里话外:从信息系统两大特性理解信息化的实施难度
- Discuz常见小问题-如何关闭验证码
- 正确的使用URLClassLoader--ClassNotFoundException: com.mathworks.toolbox.javabuilder.internal.MWComponentI
- Python 修改图片的时候抗锯齿
- Latex符号对照表
- matlab色度椭圆,matlab画色度图
- Eastfax使用技巧
- avm.js跨端框架全介绍
- vipkid和vipjr比较,哪个更适合小升初学习?
- 戴尔U2520DR型号显示器连接MacbookPro突然不亮了
- 洛谷 P1426 小鱼会有危险吗
- 国产操作系统能不能完全替代windows,普及大众?
- Java中arraycopy()的使用说明