![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 63
zyyyyyy24
这个作者很懒,什么都没留下…
展开
-
vue电商后台管理系统--部署上线篇
项目上线相关配置通过 node 创建 web 服务器。开启 gzip 配置。配置 https 服务。使用 pm2 管理应用。上线——通过node创建Web服务器创建 node 项目,并安装 express,通过 express 快速创建 web 服务器,将 vue 打包生成的 dist 文件夹,托管为静态资源即可,关键代码如下:const express = require(‘express’)// 创建 web 服务器const app = express()// 托管静态资源ap原创 2021-08-16 09:16:00 · 381 阅读 · 0 评论 -
vue电商后台管理--现目优化篇
介绍项目优化的策略生成打包报告第三方库启用CDNElement UI组件按需加载路由懒加载首页内容定制优化——通过nprogress添加进度条效果安装:npm install --save nprogress在main.js进行导入与配置// 导入NProgress包对应的js和cssimport NProgress from ‘nprogress’import ‘nprogress/nprogress.css’// 在request拦截器中,展示进度条 NProgress.st原创 2021-08-16 08:51:50 · 375 阅读 · 0 评论 -
vue电商后台管理系统--订单管理篇
安装Echarts并渲染Demo表图第一种:npm指令:npm install echarts --save第二种:在vue-ui中选择安装运行依赖 直接搜索echarts然后点击安装即可获取折线图并渲染图表源码<template> <div> <!-- 面包屑导航区 --> <el-breadcrumb separator="/"> <el-breadcrumb-item原创 2021-08-15 09:56:05 · 742 阅读 · 0 评论 -
vue电商后台管理系统--订单管理篇
渲染订单table表格 <!-- 订单列表数据 --> <el-table :data="orderList" border stripe> <el-table-column type="index" label="#"></el-table-column> <el-table-column label="订单编号" prop="order_number"></el-table原创 2021-08-15 09:44:07 · 1592 阅读 · 0 评论 -
vue电商后台管理系统--商品列表篇
渲染商品列表数据<template> <div> <!--面包屑导航区--> <el-breadcrumb separator="/"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcrumb-item>商品管理</el-breadcrumb-item&原创 2021-08-15 08:54:35 · 2411 阅读 · 0 评论 -
vue电商后台管理系统--分类参数篇
通过路由加载分类参数组件页面渲染分类参数页面的基本UI结构<!-- --><template> <div> <!--面包屑导航区--> <el-breadcrumb separator="/"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcru原创 2021-08-14 12:52:05 · 579 阅读 · 0 评论 -
vue电商后台管理系统--商品分类篇
通过路由加载商品分类组件调用API获取商品分类列表数据// 获取商品分类数据 async getCateList(){ const {data : res} = await this.$http.get('categories',{params: this.queryInfo}) if(res.meta.status !== 200) return this.$message.error('获取商品分类列表失败')原创 2021-08-14 10:02:57 · 988 阅读 · 0 评论 -
vue电商后台管理系统--用户列表篇2
添加用户渲染添加用户的表单<!--el-dialog是弹出面板;@close是用来关闭此面板时触发事件;:visible.sync是控制面板是否展示(主要和后边的addDialogVisible有关) --> <el-dialog title="添加用户信息" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed"> <!-- 内容主体区 --> <原创 2021-08-12 10:15:20 · 190 阅读 · 0 评论 -
vue电商后台管理系统--用户列表篇1
用户列表区域面包屑导航和搜索框<el-breadcrumb separator="/"> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item>用户管理</el-breadcrumb-item> <el-breadcrumb-item>用户列表</el-breadcrumb-it原创 2021-08-12 09:46:58 · 277 阅读 · 0 评论 -
vue电商后台管理系统--主页布局开发
页面布局整体布局实现导航栏布局结构左侧菜单布局菜单分为二级,并且可以折叠。<el-menu> <!-- 这个 template 是一级菜单的内容模板 --> <el-submenu> <i class="el-icon-menu"></i> <span>一级菜单</span> &原创 2021-08-11 20:09:04 · 333 阅读 · 0 评论 -
vue电商后台管理系统--登录页面
登陆页面的效果图梳理页面结构3.2 梳理项目结构在终端中输入npm run serve启动我们刚刚导入进去的项目正常情况下,会出现以下界面:于是,我们需要对我们的项目进行梳理,删去一些没有必要的文件删除以下文件的代码,最后格式如下:App.vue<template> <div id="app"> App 根组件 </div></template><script>export default { nam原创 2021-08-11 10:06:59 · 1796 阅读 · 0 评论 -
vue电商后台管理系统--概述和初始化
项目概述介绍和初始化项目整体架构前端项目技术栈:VueVue-routerElement-UIAxiosEcharts项目初始化步骤① 安装 Vue 脚手架—需要Vue3.0或者以上—先安装cli:(终端输入)npm install -g @vue/clioryarn global add @vue/cli—安装cnpm(可选装)由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像—cnpm。在命令行中输原创 2021-08-10 11:11:42 · 147 阅读 · 0 评论