项目开始前的准备工作和项目启动

一、项目开始前的准备工作

1.查看node和npm的版本

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

2.查看git安装版本

$ git --version #查看git安装版本

3.npm淘宝镜像

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

4.查看vscode编辑器插件和配置

eslint需要在vscode中进行一些参数的配置

{ 
    "eslint.enable": true,
    "eslint.run": "onType",
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue",
            ".jsx",
            ".tsx"
        ]
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

二、项目模板启动

5.二次开发项目，首先git拉取项目的基础模板、安装项目依赖（定位到项目目录下）、启动项目；

①git拉取基础项目模板

$ git clone https://github.com/PanJiaChen/vue-admin-template.git hrsaas #拉取基础模板到hrsaas目录

②安装项目依赖（定位到项目目录下）

$ npm install #安装依赖

③启动项目

$ npm run dev #启动开发模式的服务

三、目录介绍

6.熟悉目录结构

├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── 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          # 配置文件（对于一些项目信息的配置）
├── 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

main.js和app.js

Vuex结构

四、建立远程Git仓库并完成初始提交

7.建立远程仓库
注意:如果项目是git拉取的基础项目模板，因为里面拥有原来的提交记录，避免冲突，需要先将原来的**.git**文件夹删除掉，并对项目进行git初始化；

$ git init  #初始化项目
$  git add . #将修改添加到暂存
$  git commit -m '项目初始化名称' #将暂存提到本地仓库

查看版本日志

$ git log #查看版本日志

推送到远程仓库

$ git remote add origin <远程仓库地址>  #添加远程仓库地址

当我们不清楚自己的仓库对应的origin地址时, 我们可以通过命令查看当前的远程仓库地址

$ git remote -v #查看本地仓库的远程仓库地址映射

推送master分支到远程仓库

$ git push -u origin master #将master分支推送到origin所代表的远程仓库地址