Vue项目环境的搭建

实验目标

知识目标

1. 了解Node.js，掌握Node.js的安装；
2. 掌握利用npm安装vue以及vue cli的命令。

能力目标

1. 具备搭建Vue项目开发环境的能力；

实验内容

（一） Node.js的下载安装

下载地址：https://nodejs.org/en/，然后默认安装即可；

（二）利用npm命令安装vue和vue cli

Window系统：

1. 在开始菜单输入cmd，进入命令行窗口界面；
2. 在此界面中输入如下命令，安装vue，应该会安装一个package；

npm install vue

3. 然后在此界面中接着输入如下命令，安装vue cli，应该会安装600多个package；

npm install -g @vue/cli

Mac系统

1. 进入系统的终端界面
2. 在此界面中输入如下命令，安装vue，会提示输入密码，增加权限，应该会安装一个package；

sudo npm install vue

3. 然后在此界面中接着输入如下命令，安装vue cli，应该会安装600多个package；

sudo npm install -g @vue/cli

（三）创建vue项目

1. 新建一个文件夹然后命名，作为vue项目的工作空间；
2. 在windows的命令行界面或者mac的终端界面通过cd命令进入上述文件夹，然后输入如下命令：

vue create 项目名（英文，符合标记符的命名规则）

3. 在安装的过程一般情况下需要加入路由（router），所以不要选择默认安装，选择第二项：手动安装，注意把router选中即可，其他的都是默认安装；
4. 然后按照安装后的提示运行项目，查看项目的运行结果；
5. 最后熟悉vue项目的目录结构，了解大致的项目运行流程

（四）美团项目的创建

1. 利用自己的账号和密码登录码云，然后打开如下网址：https://gitee.com/wuwuzhishu/meituan_2017，fork项目到自己的账号下面；
2. 然后选中vue项目的工作空间，右键选择git bash进入git的命令行界面，输入如下命令： 4

git clone 码云中自己账号fork第一步中项目之后的地址

然后利用cd命令进入此项目文件目录下面，按照里面的文档说明，执行如下命令安装vue项目所需的modules；

npm install

3. 用vscode打开项目，然后更改项目的目录结构，使其更分明；此部分内容需要操作演示，过程中可能会有各种的问题；
4. 完成第3步之后，在git命令行界面中创建分支5-2，并切换到5-2分支下面；

git branch 5-2
git checkout 5-2

或一条命令实现上面两条命令的功能

git checkout -b 5-2

5. 然后分别利用如下命令把本次的修改上传到选程仓库

git add .    /*把修改的内容添加到暂存区*/
git commit -m '重构目录结构'     /*把暂存区添加到本地仓库*/
git push -u origin 5-2   /*把本地仓库的内容添加到选程仓库的5-2分支*/

6. 在自己的机器上，如果之前没有此项目，则需第1和2步操作；否则，如果已经有此项目，则只需执行如下git命令来下拉实验中上传到选程仓库的内容；

git pull

7. 由于git pull 默认下拉的是master分支，所以可能会看到自己机器的内容没有变化，需利用git切换分支命令来查看变化:

git checkout 5-2

即可发现本地内容已经更改为实验室中修改的内容，然后可以在本地做修改，之后执行第4和5步（再创建新的分支并提交到选程仓库）；

8. 然后在实验室的机器上执行第6和7步，即可把自己机器上的内容修改同步到实验室的机器，以此类推，即可实现多台电脑的数据上传及同步。

注意：上述的操作可以不创建新的分支，只有master一个主分支即可，相对来说用master一个分支更省事，不过让大家用多个分支的原因是方便后续的回顾知识，只需利用切换分支即可来回顾自己的学习过程，并方便项目的管理。