一、项目开始前的准备工作
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所代表的远程仓库地址