Vue-cli脚手架2.0和3.0创建项目的区别?
摘要:一、生成项目命令 1、安装3.x版本的Vue脚手架: npm install -g @vue/cli 创建Vue项目命令: vue create 项目名称 或基于ui界面创建Vue项目,命令:vue ui 2、安装了vue-cli 3.x 后如何使用 vue-cli 2.x 创建项目 需要安装一个桥
阅读全文
posted @
2020-03-09 14:55
JoeYoung
阅读(3158)
推荐(2) 编辑
Vue + ElementUI的电商管理系统实例11 商品分类
摘要:1、创建商品分类分支goods_cate并push到远程 查看分支: 创建分支: 推送到远程:(以前码云中没有该分支,所以要加-u,如果码云中有该分支,则不需要加-u) 2、通过路由加载商品分类组件 新建goods文件夹和Cate.vue文件: 添加路由: 点击左侧菜单的商品分类的效果如图: 3、绘
阅读全文
posted @
2020-01-17 11:05
JoeYoung
阅读(6022)
推荐(1) 编辑
Vue + ElementUI的电商管理系统实例10 用户列表-分配角色
摘要:1、用户列表页面,点击分配角色按钮,弹出分配角色对话框 给分配角色按钮添加点击事件,并传递当前行的信息: setRole事件: // 展示分配用户角色的对话框 setRole(userInfo) { this.setRoleDialogVisible = true } 添加分配角色的对话框: <!-
阅读全文
posted @
2020-01-09 15:01
JoeYoung
阅读(1824)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例09 分配角色权限
摘要:1、弹出分配权限的对话框并请求权限数据 先给分配按钮添加点击事件: 添加分配权限对话框: 2、分配并使用el-tree树形控件 先把Tree添加引入到element.js,这里就不写了。 然后找到el-tree的实例代码:show-checkbox 节点是否可被选择 效果图: 3、优化树形控件的显示
阅读全文
posted @
2020-01-07 16:28
JoeYoung
阅读(4862)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例08 角色列表
摘要:1、通过路由展示角色列表组件 新建roles.vue文件: 添加角色列表路由: 点击左侧菜单的角色列表,效果如图: 2、绘制基本布局并获取角色列表数据 先实现基本布局,还是面包屑和卡片视图: 添加获取方法: 通过调用api接口获取角色列表,请求路径:roles,请求方法:get 3、渲染角色列表数据
阅读全文
posted @
2020-01-06 16:25
JoeYoung
阅读(2182)
推荐(2) 编辑
Vue + ElementUI的电商管理系统实例07 权限列表
摘要:1、创建新的rights权限分支并推送到云端: 新建分支: 推送到远程: 2、通过路由展示权限列表组件 在components里新建power文件夹和rights.vue文件 添加权限列表路由: 现在点击页面左侧菜单的权限列表,就可以显示出权限列表组件页面了。 3、绘制面包屑导航和卡片视图 先添加面
阅读全文
posted @
2020-01-03 17:09
JoeYoung
阅读(903)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例06 删除用户
摘要:1、弹出提示框询问是否删除数据 MessageBox 弹框组件 确认消息:提示用户确认其已经触发的动作,并询问是否进行此操作时会用到此对话框。 $confirm需要先进行挂载: 在element.js里引入 import { MessageBox } from 'element-ui'; Vue.p
阅读全文
posted @
2020-01-02 16:09
JoeYoung
阅读(1325)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例05 修改用户
摘要:1、展示修改用户的对话框 给修改按钮添加点击事件: 添加修改对话框代码: 此时,点击修改按钮已经可以弹出对话框了。 2、显示对应的用户信息 通过作用域插槽获取row信息 新建editForm: 也可以通过ID查询对应的用户信息: 3、渲染修改用户信息的表单 用户名为禁止修改状态 修改用户信息表单的验
阅读全文
posted @
2019-12-31 11:28
JoeYoung
阅读(1349)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例04 添加用户
摘要:1、Dialog 对话框组件 把Dialog添加导入到element.js中 visible:是否显示Dialog,支持 .sync 修饰符 默认falsebefore-close:关闭前的回调,会暂停 Dialog 的关闭 function(done),done 用于关闭 Dialog 添加代码:
阅读全文
posted @
2019-12-30 17:18
JoeYoung
阅读(1786)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例03 用户列表
摘要:1、通过路由展示用户列表页 新建user文件夹,里面新建Users.vue文件: 修改路由文件,添加Users路由: 这时点击左侧菜单的用户列表,就可以看到跳转到了用户列表页: 2、小bug:刷新后左侧菜单的高亮没有了 Menu Attribute里有个default-active属性: 表示当前激
阅读全文
posted @
2019-12-20 17:12
JoeYoung
阅读(3103)
推荐(1) 编辑
Vue + ElementUI的电商管理系统实例02 主页
摘要:1、打开Element网站,找到主页需要的布局格式 修改Home.vue: 效果图如下: 2、美化Header区域布局样式 3、左侧导航菜单 菜单分为二级,并且可以折叠 找到Element里的导航菜单代码: 然后在element.js里添加: 简单修改导航菜单代码: 4、通过axios拦截器添加to
阅读全文
posted @
2019-12-19 16:41
JoeYoung
阅读(4081)
推荐(0) 编辑
Vue 项目中的ESlint语法报错问题
摘要:在项目中的""和;经常会报错,真的很纠结,今天看到一个解决方法,可以不用卸载删除 在项目根目录中,新建一个.prettierrc文件,来移除分号,和替换为单引号。 这样就可以了,格式化也不会变为""了。 也可以禁用语法规则,修改.eslintrc.js文件:把报错的项禁用
阅读全文
posted @
2019-12-17 17:06
JoeYoung
阅读(1085)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例01 登录表单
摘要:效果图: 1、首先来根据Element网站实现布局: 2、加入表单验证规则 loginForm:是数据绑定对象,loginFormRef:是引用名称,loginFormRules:是验证规则,label-width:是表单域标签的宽度 loginForm:是数据绑定对象,loginFormRef:是
阅读全文
posted @
2019-12-17 16:55
JoeYoung
阅读(4091)
推荐(0) 编辑
VueX 基本使用(vue状态管理)及简单小实例
摘要:1、安装vuex依赖包 npm install vuex --save 2、导入vuex包 import Vuex from 'vuex' Vue.use(Vuex) 3、创建 store 对象 export default new Vuex.Store({ // state 中存放的就是全局共享的
阅读全文
posted @
2019-12-12 15:34
JoeYoung
阅读(1501)
推荐(0) 编辑
Vue简单基础 + 实例 及 组件通信
摘要:vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通
阅读全文
posted @
2019-12-11 17:51
JoeYoung
阅读(832)
推荐(0) 编辑
基于vue-cli、elementUI的Vue简单入门例子
摘要:vue-cli、elementUI的安装教程请看: https://www.cnblogs.com/joe235/p/12013818.html 把HelloWorld.vue文件修改为: 在运行就可以看效果了。 接下来在components文件夹内新建一个NewContact.vue 文件,添加如
阅读全文
posted @
2019-12-10 10:41
JoeYoung
阅读(2372)
推荐(0) 编辑
vue-cli3.0和element-ui及axios的安装使用
摘要:一、利用vue-cli3快速搭建vue项目 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create 、vue serve 、vue ui 等命令) CLI 服务:@vue/c
阅读全文
posted @
2019-12-10 08:29
JoeYoung
阅读(6868)
推荐(1) 编辑