基于element-ui的Vue项目-01环境搭建部分

---

检查node.js 和 npm 的版本

• 打开终端，输入

node -v  #查看node版本  
npm -v   #查看npm版本

检查git版本

• 打开终端，输入

git --version  #查看git版本

配置淘宝镜像源

• 打开终端，输入配置，这里是旧的淘宝镜像源，新的镜像源地址为 registry.npmmirror.com/
• 中国镜像站 npmmirror.com/

$ npm config set registry  https://registry.npm.taobao.org/  #设置淘宝镜像地址
$ npm config get registry  #查看镜像地址



$ yarn config set registry  https://registry.npm.taobao.org/  #设置淘宝镜像地址
$ yarn config get registry  #查看镜像地址

拉取项目代码

• 根据公司业务，从github 或者 gitlab 或者 gitee 仓库中拉取代码，下面演示地址，是无效的

git clone https://github.com/qingmuziyuan/vue-admin-template.git  demo #拉取基础模板到demo目录 (github)
# 拉取到代码之后 不要动master分支和develop分支的内容，这是公司的固定代码，是架构师操作的部分
# 先切换到develop分支上，新建一个自己feature-（开发的模块或者功能名）的分支并切换上去，在这个分支上进行操作代码
# 保存 git add .
# 提交 git commit -m '提交说明'
# 提交说明是具有一定规范的：http://t.csdn.cn/20M6v
# 项目提测需要合并代码，先在自己的分支上git pull 一下dev分支上的代码，看看是否有合并冲突，有的话先处理，检查无误之后再pull一次，通知组长是否需要自己合并还是交给公司专门负责合并的人
# 最后切换到develop分支，pull一下， git merge develop

安装项目依赖

• 使用yarn 进行安装或者npm，总的来说yarn快一点,直接输入yarn就自动检索package.json里面的包并进行逐个安装

yarn # 安装项目依赖  或者  npm i

启动项目

• 这里的启动指令是在package.json文件里配置自定义的，大部分是dev跟serve，dev一般表示开发模式

yarn dev 或者yarn start 或者 yarn serve

了解项目的运行机制，配置好对应的基础架构

├── 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            # 配置文件

main.js的运行机制

APP.vue的运行机制

permission.js 文件

• permission.js 文件是控制页面登录权限（路由访问）的文件。后期可以在这里进行身份验证的配置，比如说公司不同员工拥有不同的软件管理权限

setting.js 文件

• 则是对于一些项目信息的配置，里面有三个属性 title(项目名称)，fixedHeader（固定头部），sidebarLogo（显示左侧菜单logo）

Vuex结构

• 展示架构：根据项目规划配置具体架构

scss

• 该项目使用了scss作为css的扩展语言，在styles目录下

icons

• icons结构