![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue 系列
文章平均质量分 80
Vue从零基础入门
一只蒻蒻
一只不知名的前端爱好者
展开
-
Vuex笔记
Vuex1 认识Vuex1.1 什么是VuexVuex 是一个状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。1.2 什么是状态管理模式?可以简单的看成多个组件共享变量存储在一个对象中。这个状态自管理应用包含以下几个部分:state,驱动应用的数据源;view,以声明方式将 state 映射到视图;actions,响应在 view 上的用户输入导致的状态变化。表示“单向数据流”理念的简单示意2 Vuex的使用2.1原创 2021-02-26 16:40:50 · 240 阅读 · 0 评论 -
Vue router笔记
Vue router1 认识路由1.1 什么是路由路由是通过互联的网络把信息从源地址传输到目的地址的活动路由器提供两种机制:路由和传送决定数据包从来源到目的地的路径转送就是将数据转移路由表本质是映射表,决定数据包的指向。1.2 前后端路由什么是后端路由浏览器发送请求url,由后端处理url与页面的映射关系,服务器渲染好整个页面后返回给浏览器进行显示。缺点:前后端没有分离,责任划分不明确。编写和维护麻烦。前端路由前端路由诞生背景:前后端分离 (原创 2021-02-26 16:38:18 · 645 阅读 · 0 评论 -
【超详细小白教学】Vue+nodejs电商项目部署指南
【超详细小白教学】Vue电商项目部署指南前言食用指南:推荐照着我的设置来走。在最前面,厚着老脸,跟大家要一个star。???? 本项目Github源码1 准备工作1.1 云服务器购买进入阿里云官网 找到上边导航栏的产品→云服务器ECS随后点击立即购买进入购买页面后,按照我的选择进行选择就好啦在实例中,选择当前带,筛选“1vCPU"然后选择这个最便宜的17.1的就好啦,够用。其他默认接下来选择镜像 公共镜像Alibaba 2.1903。接下来是选择存储和购买时长。存储的话,原创 2021-01-22 13:48:58 · 6398 阅读 · 21 评论 -
2021 Vue全家桶开发电商管理系统(Element-UI)10-项目优化上线
项目优化上线1 项目优化1.1 项目优化策略生成打包报告第三方库启用CDNElement-UI组件按需加载路由懒加载首页内容定制1.2 实现进度条1.安装依赖2.导入包和样式在main.js中:3.在拦截器中进行进度条控制1.3 Build命令后移除所有console安装并配置Babel插件官网可以查看该插件的文档:babel-plugin-transform-remove-console安装插件:可选择Vue UI界面下载 或 CLI下载配置插件找原创 2021-01-18 01:08:17 · 796 阅读 · 0 评论 -
vue-cli3进行路径自定义 (vue-cli3配置踩雷:These dependencies were not found:)
vue-cli3进行路径自定义总结(vue-cli3配置踩雷:These dependencies were not found:)今天弄这个弄了好久,于是想记录下来,方便自己也方便他人。vue-cli2首先vue-cli2要是想要修改自定义路径,需要到build文件夹下面的、base.conf.js文件里面修改如下部分代码,在alias中加入新的自定义键值对即可。vue-cli3在vuecli3中,推崇零配置,故不再存在build文件夹,所有的配置都需要在一个自己增加的文件vue.conf原创 2021-01-17 16:42:44 · 759 阅读 · 0 评论 -
2021 Vue全家桶开发电商管理系统(Element-UI)09 数据报表功能
09 数据报表功能渲染图表安装echarts运行时依赖echarts使用步骤:导入echarts和lodash创建Echarts容器Dom初始化Echarts实例设置配置项和数据 (使用lodash进行数据项合并)显示图表template中<!-- 卡片视图 --> <el-card> <!-- 2.为 ECharts 准备一个具备大小(宽高)的 DOM --> <div id="main" style="原创 2021-01-17 10:29:55 · 532 阅读 · 0 评论 -
2021 Vue全家桶开发电商管理系统(Element-UI)08 商品列表功能的实现
商品列表功能的实现1 自定义格式化时间的全局过滤器打开main.js,创建过滤器Vue.filter('dateFormat', function (originVal) { const dt = new Date(originVal); const y = dt.getFullYear(); const m = (dt.getMonth() + 1 + '').padStart(2, '0'); const d = (dt.getDate() + '').padStart(2, '原创 2021-01-17 15:07:12 · 1105 阅读 · 0 评论 -
2021 Vue全家桶开发电商管理系统(Element-UI)07 参数管理
参数管理1 参数管理概念2 基本UI布局略3 获取商品分类列表数据并渲染至级联选择框获取数据略,级联选择框与06类似。4 Tab标签页的使用<!-- 标签页 --><el-tabs v-model="activeName" @tab-click="handleTabClick"> <el-tab-pane label="动态属性" name="first">动态属性</el-tab-pane> <el-tab-pane原创 2021-01-16 09:38:32 · 286 阅读 · 1 评论 -
2021 Vue全家桶开发电商管理系统(Element-UI)06 商品分类
文章目录商品分类1 商品分类界面的基本布局2 调用API获取商品分类数据3 使用vue-table-with-tree-grid树形表格组件4 渲染添加分类的对话框和表单4.1 获取父级分类数据列表并使用级联选择器渲染Cascader 级联选择器的基本使用获取用户填写表单信息重置表单数据完成添加分类操作总结商品分类1 商品分类界面的基本布局效果图:基本布局:面包屑导航+卡片视图+第三方树形表格2 调用API获取商品分类数据注意,需要制定pagenum和pagesize才能实现分页效果。保存商品原创 2021-01-13 21:07:27 · 854 阅读 · 0 评论 -
2021 Vue全家桶开发电商管理系统(Element-UI)05 - 用户权限管理的实现
文章目录用户权限管理1 权限列表1.1 绘制权限列表的面包屑导航1.2 卡片视图1.3 调用API获取权限列表1.4 权限管理业务分析2 角色列表2.1 角色下权限数据的渲染3 分配权限4 分配角色用户权限管理1 权限列表1.1 绘制权限列表的面包屑导航方式与之前相同1.2 卡片视图与之前相同1.3 调用API获取权限列表步骤:生名周期钩子函数created时调用getRightsList方法,发起数据请求,将数据保存至本地data中使用表格渲染权限列表,添加:<el-t原创 2021-01-12 20:47:14 · 430 阅读 · 2 评论 -
2021 Vue全家桶开发电商管理系统(Element-UI)04- 系统主页和用户列表功能
电商管理系统主页1 主页布局1.1 布局容器的选择这里我们选择ElementUI中的布局容器复制代码即可。1.2 实现导航菜单的基本结构1.3 通过接口获取菜单数据通过axios拦截器添加token验证,保证拥有获取数据的权限。main.js//axios请求拦截axios.interceptors.request.use(config => { // console.log(config); config.headers.Authorization = window.原创 2021-01-12 20:43:51 · 961 阅读 · 0 评论 -
2021 Vue全家桶开发电商管理系统(Element-UI)03-实现登录退出功能
登录退出功能1 登陆概述1.1 登录业务流程输入用户名和密码调用后台接口验证根据响应状态跳转到项目主页1.2 登录业务的技术点http是无状态的通过cookie在客户端记录状态通过session在服务端记录状态通过token方式维持状态cookie、session、token的使用场景?前端与后台接口不存在跨域问题,建议使用cookie和session,否则使用token。1.3 登录——token原理分析服务器根据携带的token值去验证你是哪个用户,根据操作返回不同的原创 2021-01-07 22:08:37 · 1426 阅读 · 6 评论 -
Vue学习笔记——Vue router的基本使用
Vue router1 认识路由1.1 什么是路由路由是通过互联的网络把信息从源地址传输到目的地址的活动路由器提供两种机制:路由和传送决定数据包从来源到目的地的路径转送就是将数据转移路由表本质是映射表,决定数据包的指向。1.2 前后端路由什么是后端路由浏览器发送请求url,由后端处理url与页面的映射关系,服务器渲染好整个页面后返回给浏览器进行显示。缺点:前后端没有分离,责任划分不明确。编写和维护麻烦。前端路由前端路由诞生背景:前后端分离 (原创 2021-01-07 22:04:22 · 467 阅读 · 0 评论 -
2021 Vue全家桶开发电商管理系统(Element-UI)02-配置API接口服务器并调试接口
前期准备下载MySql、Navicat。在Navicat中创建一个mydb数据库,执行vueShop-api-server/db/mydb.sql,成功创建数据库。电商管理后台Node服务器接口下载地址:链接:https://pan.baidu.com/s/1oYsjFQzIxclvezljllbpkw提取码:qzp0复制这段内容后打开百度网盘手机App,操作更方便哦内含服务器所有东西及API文档。配置API接口并测试下载Postman调试工具,用于测试后台项目接口是否正常。自行注册原创 2021-01-06 20:14:48 · 1280 阅读 · 4 评论 -
2021 Vue全家桶开发电商管理系统(Element-UI)01-项目初始化
电商后台管理系统——项目初始化篇前言前端用到的技术栈VueVue-routerElement-UIAxiosEcharts1 项目初始化1.1 前端项目初始化步骤安装 Vue 脚手架通过 Vue 脚手架创建项目配置 Vue 路由配置 Element-UI 组件库配置 axios 库初始化 git 远程仓库将本地项目托管到Github或码云中在本项目中,使用可视化项目管理ui界面进行项目创建和管理,在cmd中输入vue ui即可开启UI界面。2 项目管理2.原创 2021-01-06 18:39:08 · 1353 阅读 · 0 评论