vue全家桶资料
_筱龙
这个作者很懒,什么都没留下…
展开
-
[Vue]实战---电商项目(订单管理模块及数据统计)【九】
订单管理订单管理概述用于维护商品的订单信息可以查看订单的商品信息、物流信息,并且可以根据实际的运营情况对订单做适当的调整。 订单列表订单列表展示订单数据加载订单列表布局const { data: res } = await this.$http.get('orders', { params: this.queryInfo })if (res.meta.status !== 200) { return this.$message.error('获取订单列表失败!')原创 2020-11-15 08:38:52 · 1402 阅读 · 3 评论 -
[Vue]实战---电商项目(商品管理模块)【八】
商品管理商品管理概述用于维护电商平台的商品信息,包括商品的类型、参数、图片、详情等信息。通过商品管理模块可以实现商品的添加、修改、展示和删除等功能 商品列表实现商品列表布局效果调用后台接口获取商品列表数据const { data: res } = await this.$http.get('goods', { params: this.queryInfo })if (res.meta.status !== 200) { return this.$message.er原创 2020-11-15 08:37:29 · 964 阅读 · 1 评论 -
[Vue]实战---电商项目(参数管理模块)【七】
参数管理参数管理概述商品参数用于显示商品的固定的特征信息,可以通过电商平台商品详情页面直观的看到 商品分类选择选择商品分类页面布局<div> <!-- 面包屑导航区域 --> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-bread原创 2020-11-15 08:36:08 · 349 阅读 · 0 评论 -
[Vue]实战---电商项目(分类管理模块)【六】
分类管理商品分类概述商品分类用于在购物时,快速找到所要购买的商品,可以通过电商平台主页直观的看到 商品分类列表基本布局与数据获取基本布局面包屑导航区域<!-- 面包屑导航区域 --><el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item&原创 2020-11-15 08:34:45 · 299 阅读 · 0 评论 -
[Vue]实战---电商项目(权限管理模块)【五】
权限管理权限管理业务分析通过权限管理模块控制不同的用户可以进行哪些操作,具体可以通过角色的方式进行控制,即每个用户分配一个特定的角色,角色包括不同的功能权限 权限列表展示创建对应规格在components文件夹下创建power文件夹,在此文件夹下创建Rights.vue(此vue用于开发权限管理的权限列表内容)在index.js文件下导入import Rights from "../components/power/Rights";{ path: '/right原创 2020-11-15 08:33:38 · 445 阅读 · 1 评论 -
[Vue]实战---电商项目(用户管理模块)【四】
用户管理模块用户管理概述通过后台管理用户的账号信息,具体包括用户信息的展示、添加、修改、删除、角色分配、账号启用/注销等功能用户信息列表展示添加用户修改用户删除用户启用或禁用用户用户角色分配 用户管理 - 列表展示用户列表布局面包屑导航 el-breadcrumbElement-UI 栅格系统基本使用 el-row表格布局 el-table、el-pagination创建Users.vue在index.js中添加import Users fro原创 2020-11-15 08:32:09 · 409 阅读 · 0 评论 -
[Vue]实战---电商项目(页面的布局)【三】
主页布局整体布局主页布局开始引入官网的框架时,首先要在element.js中添加import { Container, Header, Aside, Main} from 'element-ui'Vue.use(Container)Vue.use(Header)Vue.use(Aside)Vue.use(Main)<template> <el-container class="home-container">原创 2020-11-15 08:29:42 · 1059 阅读 · 1 评论 -
[Vue]实战---电商项目(登录与退出功能)【二】
登录/退出功能登录概述登录业务流程在登录页面输入用户名和密码调用后台接口进行验证通过验证之后,根据后台的响应状态跳转到项目主页登录业务的相关技术点http是无状态的通过cookie 在客户端记录状态(不存在跨域问题)通过session在服务器端记录状态(不存在跨域问题)通过token方式维持状态(存在跨域问题) 登录 – token原理分析 登录功能实现登录页面的布局通过Element-UI 组件实现布局el-formel-for原创 2020-11-15 08:26:53 · 368 阅读 · 0 评论 -
[Vue]实战---电商项目(项目的概述及初始化)【一】
项目实战项目目录项目概述项目初始化登录/退出功能主页布局用户管理模块权限管理模块分类管理模块参数管理模块商品管理模块订单管理模块数据统计模块 项目概述电商项目基本业务概述 电商后台管理系统的功能用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能。 电商后台管理系统的开发模式(前后端分离)前端项目是基于Vue技术栈的SPA项目 电商后天管理系统的技术选型前端项目技术栈VueVue-rout原创 2020-11-15 08:22:54 · 655 阅读 · 1 评论 -
[Vue]---Vue脚手架与Element-UI的基本使用与配置
文章目录Vue脚手架Vue脚手架的基本用法使用安装Vue脚手架生成的项目结构分析脚手架的自定义配置第一种方法(两种方法只能选一个)第二种方法(两种方法只能选一个)Element-UI的基本使用Vue脚手架Vue脚手架的基本用法Vue脚手架用于快速生成Vue项目基础架构使用安装安装3.x版本的Vue的脚手架:npm install -g @vue/cli基于版本的脚手架创建vue项目//1.基于交互式命令行的方式,创建新版vue项目vue create my-project//2原创 2020-11-07 08:29:43 · 678 阅读 · 0 评论 -
[Vue]---Vue单组件的配置与使用
Vue单文件组件传统组件的问题和解决方案问题:全局定义的组件必须保证组件的名称不重复字符串模板缺乏语法高亮,在HTML有多行的时候,需要用到丑陋的\不支持CSS意味着当HTML和JavaScript组件化时,CSS明显被遗漏没有构建步骤限制,只能使用HTML和ES5 JavaScript,而不能使用预处理器解决方案针对传统组件的问题,Vue提供了一个解决方案——使用Vue单文件组件。Vue单组件的基本用法template 组件的模板区域script业务逻辑区域style样式区域原创 2020-11-07 08:26:59 · 413 阅读 · 0 评论 -
[Vue]---webpack的配置与使用
文章目录webpack概述webpack的基本使用配置打包文件的入口与出口配置webpack的自动打包功能配置html-webpack-plugin生成预览页面配置自动打包相关的参数webpack中的加载器通过loader打包非js模块loader的调用过程打包处理css文件打包处理less文件打包处理scss文件配置postCSS自动添加css的兼容前缀打包样式表中的图片和字体文件打包处理js文件中的高级语法webpack概述webpack是一个流行的前端项目构建工具(打包工具),可以解决当前web开原创 2020-11-07 08:25:34 · 551 阅读 · 0 评论 -
[Vue]---模块化相关的规范
文章目录什么是模块化浏览器端模块化规范服务端模块化规范ES6模块规范Node.js中通过babel体验ES6的模块法ES6模块化的基本语法默认导出与默认导入按需导入与按需导出什么是模块化为了解决传统开发模式的主要问题:命名冲突和文件依赖,从而采取模块化模块化:就是把单独的一个功能封装到一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块模块化的好处:方便代码的重用,从而提升开发效率,并且方便后期的维护浏览器端模块化规范AMD(已经落伍/淘汰)—原创 2020-11-07 08:22:52 · 533 阅读 · 0 评论 -
[Vue]---vue路由的基本概念和使用
文章目录路由的基本概念与原理Vue Routervue-router的基本使用基本使用步骤路由重定向vue-router嵌套路由嵌套路由用法vue-router动态路由匹配基本用法路由组件传递参数vue-router命名路由命名路由的配置规则vue-router编程式导航页面导航的两种方式编程式导航基本用法编程式导航参数规则路由的基本概念与原理后端路由概念 : 根据不同的用户URL请求,返回不同的内容本质 : URL请求地址与服务器资源之间的对应关系SPA后端渲染(存在性能问题)原创 2020-11-04 16:50:18 · 566 阅读 · 0 评论 -
[Vue]---Vue组件化开发基础
组件化开发思想现实中的组件化思想体现标准分治重用组合组件注册全局组件注册语法Vue.component(组件名称,{ data:组件数据, template:组件模板内容})组件用法<div id='app'> <button-counter></button-counter></div><button-counter></button-counter>可以重复使用<scrip原创 2020-11-03 16:55:04 · 134 阅读 · 0 评论 -
[Vue]---Vue常用特性讲解
文章目录Vue常用特性常用特性概览表单操作表单域修饰符自定义属性**带参数的自定义指令****局部指令**计算属性侦听器过滤器生命周期Vue常用特性常用特性概览表单操作自定义指令计算属性过滤器侦听器生命周期表单操作基于Vue的表单操作Input 单行文本textarea 多行文本select 下拉多选radio 单选框checkbox 多选框示例代码如下:<!DOCTYPE html><html lang="en"><h原创 2020-11-03 16:43:05 · 366 阅读 · 0 评论 -
[Vue]---vue选项卡案例
选项卡案例实现步骤实现静态UI效果用传统的方式实现标签结构和样式基于数据重构UI效果将静态的结构和样式重构为基于Vue模板语法的形式处理事件绑定和js控制逻辑声明式编程模板的结构和最终显示的效果基本一致我们先把每组数据作为对象存储在数组中list: [{ id: 1, title: 'apple', path: 'images/苹果.jpg' }, { id: 2, title:原创 2020-11-01 19:03:01 · 552 阅读 · 0 评论 -
[Vue]---Vue的模块语法知识点(二)
文章目录Vue模板语法属性绑定Vue动态处理指令`v-model`底层原理分析样式绑定class样式处理数组语法语法细节style样式处理对象语法数组语法分支循环结构分支结构`v-if`与`v-show`区别循环结构``v-for``遍历数组``key的作用``︰Vue模板语法属性绑定Vue动态处理指令v-bind指令用法<a v-bind:href="url">跳转</a>缩写形式<a:href='url'跳转</a><!DO原创 2020-11-01 15:32:36 · 664 阅读 · 0 评论 -
[Vue]---Vue的模块语法知识点(一)
文章目录Vue模块语法模块语法的概述如何理解前端渲染?前端渲染方式指令v-clock指令用法数据绑定指令数据响应式双向数据绑定事件绑定Vue如何处理事件?事件函数的调用方式事件函数参数传递事件修饰符按键修饰符自定义按键事件修饰符Vue模块语法模块语法的概述如何理解前端渲染?把数据填充到HTML标签中前端渲染方式原生js拼接字符串基本上就是将数据已字符串的方式拼接到HTML标签中缺点:不同开发人员的代码风格差别很大,随着业务的复杂,后期的维护变得逐渐困难起来前端模块引擎优点:大原创 2020-11-01 15:31:04 · 580 阅读 · 0 评论 -
[Vue]----Vue的基本使用和概述
Vue1.Vue的概述Vue:渐进式JavaScript框架声明式渲染→组件系统→客户端路由→集中式状态管理>项目构建2.Vue的基本使用Vue的基本使用步骤需要提供标签用于填充数据引入vue.js库文件使用vue的语法做功能吧vue提供的数据填充到标签里面2.1Vue.js之HelloWorld细节分析实例参数分析el:元素的挂载位置(值可以是css选择器或者DOM元素)data:模型数据(值是一个对象)1、提供标签用于填充数据<div id="app原创 2020-10-31 15:11:25 · 162 阅读 · 0 评论