二、基础环境搭建

1.vue-element Admin

• 基于vue技术栈的后台系统社区解决方案
• 线上demo地址：https://panjiachen.github.io/vue-element-admin/#/dashboard
• https://github.com/PanJiaChen/vue-element-admin.git
• 作用：更多的是一个参考价值，而不适合直接使用进行二次开发

2.vue-admin-template

• 精简版，适合二次开发
• 在线运行效果：https://panjiachen.gitee.io/vue-admin-template/#/login?redirect=%2Fdashboard
• https://gitee.com/panjiachen/vue-admin-template.git

3.将clone下来的vue-admin-template改成自己的项目

• 先将vue-admin-template下原来的.git文件夹删除掉 （这个文件夹里面拥有原来的提交记录，为了避免冲突，我们要先删除掉之前的提交，再做初始化）

• 修改项目信息

• • 重命名项目文件夹，把vue-admin-template的改成vue-hr(或者其它的名字)
  • 修改package.json中的说明。

• 项目进行git初始化（这就是我们自己的项目了）–git init

4.建立远程仓库

• 在gitee上创建一个与本地同名的、 空的 、公开的远程仓库。

5.推送到远程仓库

#两句命令
$ git remote add origin https://gitee.com/用户名/项目名.git
$ git push -u origin master #将master分支推送到origin所代表的远程仓库地址

6.目录结构

├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源  不会参与打包  直接直出
│   ├── components             # 全局公用组件 和业务不相关  上传组件
│   ├── icons                  # 项目所有 svg icons
│   ├── layout                 # 全局 layout 负责搭建项目的整体架子结构 html结构
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理 vuex管理数据的位置 模块化开发 全局getters
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法 request.js
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面 路由级别的组件
│   ├── App.vue                # 入口页面 根组件
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
│   └── settings.js            # 配置文件
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json

• 主要分两个部分：

• • src目录：在做项目时，最关注的就是**src**目录, 里面是所有的源代码和资源
  • 非src目录：一般都是对项目的环境和工具的配置

• src目录

├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── icons                  # 项目所有 svg icons
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
│   └── settings.js            # 配置文件

7.main.js文件

• main.js 入口文件---->new Vue(vue实例化)

8.permission.js

• 是控制页面登录权限的文件，在main.js中引入了它。

9.scss

• sass 、scss、less、css

• • sass scss less都是css预处理语言
  • .sass（没有{} ;）是老版本3.0版本之前的后缀，有严格的缩进格式
  • scss是3.0之后的后缀名

• 变量

• • $–定义变量

• 嵌套语法

• • 和less类似

• &父选择器

.a{
  color:red;
  &:hover{
    color:black;
  }
}

• 模块

• • @import “./xxxx.scss”-----导入

10.axios拦截器

• [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ogobw4vB-1618745723881)()]

11.mack

• mack 含义：真的假数据–接口功能是真的，数据是假的

• mock的实现方式：

• • 本地启mock服务器：
• • • 自己用express写接口
    • 本地用专门的mock服务
• • 线上的mock服务器–fastmock
• • • https://www.fastmock.site/

• mock是在前端中就是表示实现假接口；一般在开发阶段时使用，上线之后就不会用了；

12.删除mock（本项目不需要用到模拟数据）

• 分两步：

• • 1.注释掉mock数据的代码
• • • main.js中注释mock部分的功能

if（process.env.NODE_ENV==='production'){
  const {mockXHR} = require('../mock')
  mockXHR()
}

• • • vue.config.js中注释掉 before: require(’./mock/mock-server.js’)
• • 2.删除src/mock文件夹

13.公共资源图片和样式

• 处理图片资源

• • 将common文件夹拷贝放置到 assets目录即可

• 处理样式资源

• • 样式资源在 项目资源/样式 目录下，复制过来覆盖即可：
• • • 替换**variables.scss**
    • 新增**common.scss**
• • 我们提供了 一份公共的**common.scss**样式，里面内置了一部分内容的样式，在开发期间可以帮助我们快速的实现页面样式和布局
  • 将两个文件放置到styles目录下，然后在**index.scss**中引入该样式
  • @import ‘./common.scss’; -----引入common.scss样式表

14.环境变量

• 不同的环境可以设置不同的变量
  开发环境 - > development的文件 生产上线 -> production的文件
  文件放置到styles目录下，然后在**index.scss**中引入该样式
  • @import ‘./common.scss’; -----引入common.scss样式表

14.环境变量

• 不同的环境可以设置不同的变量
  开发环境 - > development的文件 生产上线 -> production的文件
• key = value —定义环境变量 process.env.环境变量名字----使用环境变量