vue-shop电商管理后台

第一天 - 项目创建

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

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

3. 全局安装vue-cli

cnpm install --global vue-cli

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

vue init webpack vue-shop

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

npm run dev

6. 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)

7. 在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 目录。

登录模块

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