vue-shop电商管理后台

第一天 - 项目创建

在gitee上创建仓库
安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

全局安装vue-cli

cnpm install --global vue-cli

创建一个基于 webpack 模板的新项目

vue init webpack vue-shop

根据package.json文件,启动项目

npm run dev

vue项目如何引入element-ui ???

第一步:下载element-ui到项目node_modules

npm i element-ui -S

第二步:将element-ui引入到项目中,只需在main.js中编辑如下代码

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)

在vue项目中引入less

npm install less less-loader --save-dev
npm install less-loader@4.1.0 --save

安装完成后打开 build目录，修改 webpack.base.conf.js 中的相关配置：
在 module.exports 中找到 module 中的 rules 数组
添加如下代码：

module.exports = {......module: {rules: [{...},{...},{test: /\.less$/,loader: 'style-loader!css-loader!less-loader'}]
}

补充说明:
一般直接安装less会报错[ npm install less less-loader --save-dev ],因此我直接安装指定低版本的less.

疑惑点

@符号的使用?
在vue项目中 @ 符号代表的是根目录，即 src 目录。

登录模块

在assets文件夹下创建了css文件夹,在css文件夹下,创建了global.css全局样式文件.在main.js入口文件引入.
中央盒子,图像区域,表单区域
引入阿里巴巴图标库参考链接:https://blog.csdn.net/junshangshui/article/details/82193922
表单数据的双向绑定
表单验证 1)表单绑定验证规则对象2)在data中指定验证规则3)porp给不同的表单项指定验证规则
表单重置
表单登录前预校验
在main.js中配置axios.发起登录请求,参考链接:https://www.jianshu.com/p/02e7279046cf
配置弹框提示: Elementui Message 消息提示 (忽略)
完善登录成功之后的操作:1)保存token; 2)编程式路由跳转
路由导航守卫控制访问权限 router.beforeEach(to,from,next)
退出功能:1)清空token; 2)重新跳转到登录页

vue-shop电商管理后台相关推荐

电商管理后台功能介绍
电商管理后台功能介绍管理员登录.退出用户管理 1.查看用户列表.可以使用分页跳转页码查看 2.查询指定用户 3.添加用户 4.修改用户信息 5.删除用户权限管理角色列表 1.添加角色 2.查看 ...
黑马VUE电商管理后台笔记记录
电商后台项目遇到的问题 1..eslintrc.js 中 '@vue/standard' 需要删掉或者注释掉 2.不能直接在 vue ui 里面安装 less-loader和less依赖,因为版本问题 ...
电商管理后台Vue实例
一.安装Mysql 二.安装navicat Navicat 是一套快速.可靠并价格相宜的数据库管理工具, 专为简化数据库的管理及降低系统管理成本而设.它的设计符合数据库管理员.开发人员及中小企业的需 ...
电商管理后台的登录流程
**一登录的流程 1.登录的form表单 <el-form class="wzl_ ...
Vue电商系统后台API接口
项目演示入口 ===> 1. 电商管理后台 API 接口文档 1.1. API V1 接口说明接口基准地址:http://127.0.0.1:8888/api/private/v1/ 服务端已 ...
前端学习（1857）vue之电商管理系统电商系统之配置api接口服务器并用postman调试接口
# 1. 电商管理后台 API 接口文档## 1.1. API V1 接口说明- 接口基准地址:`http://127.0.0.1:8888/api/private/v1/` - 服务端已开启 COR ...
Vue 电商PC后台管理(ElementUI)
Vue 电商PC后台管理(ElementUI) 1.项目概述 1.1电商项目基本业务概述根据不同的场景,电商系统一般都提供了PC端.移动 APP.移动 Web.微信小程序等多种终端访问方式. 1.2 ...
java计算机毕业设计Vue框架电商后台管理系统源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计Vue框架电商后台管理系统源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计Vue框架电商后台管理系统源码+mysql数据库+系统+lw文档+部署本源码技术栈 ...
java计算机毕业设计Vue框架电商后台管理系统源码+数据库+系统+lw文档
java计算机毕业设计Vue框架电商后台管理系统源码+数据库+系统+lw文档 java计算机毕业设计Vue框架电商后台管理系统源码+数据库+系统+lw文档本源码技术栈: 项目架构:B/S架构开发语 ...

vue-shop电商管理后台

第一天 - 项目创建

疑惑点

登录模块

vue-shop电商管理后台相关推荐

最新文章

热门文章