如何搭建一个Vue脚手架（vue-cli）并创建一个项目？

今天尝试着自己重新下载node和npm，并配置环境；搭建vue脚手架，实现并创建一个vue项目。所以，把整个操作流程详细的记录一下，方便后期自己参考。

---

一、 安装nodejs环境

官网下载地址：https://nodejs.org/en/

具体安装步骤见地址：NodeJS、NPM安装配置步骤(windows版本)

安装完成后，打开cmd，输入指令：

node -v

npm -v

如果正确输出版本号，说明我们的nodejs和npm安装好了。

注意：node版本最好高一点，保险的话直接安装最新版本的。因为vue运行需要基于npm一定的版本，版本低了有可能会出错，而npm是随node的安装自动安装的，直接安装最新的node，npm的版本号也会变高的，不用再做更多的操作，当然也可以手动升级npm版本号。

---

二、安装vue-cli

1. 我们还需要做的一个工作是，将npm的模块下载仓库从默认的国外站点改为国内的站点，这样下载模块的速度才能比较快，只需要一个命令即可，命令是：

npm --registry https://registry.npm.taobao.org install cluster

如果想一直使用这个源的地址，那么可以使用下面这个命令来配置。

npm install cnpm -g --registry=https://registry.npm.taobao.org

 2. 安装完成，输入命令如下：

cnpm -v

可以查看当前cnpm版本，这个和npm的版本还是不一样的：

3. 全局安装vue-cli

输入命令如下：

cnpm install -g vue-cli

 注意：此命令只需要运行一次即可。安装上之后，以后就不用安装了。

4. 查看vue版本号

输入命令：

vue -V  

注意：V是大写字母

 如果报错：

vue : 无法加载文件 D:\Program Files\nodejs\node_global\vue.ps1，因为在此系统上禁止运行脚本
。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_P
olicies

 解决办法：  进入D:\Program Files\nodejs\node_global\目录，把vue.ps1删掉；

 再次输入指令：

---

三、使用vue-cli来创建一个基于webpack模板的新项目

1. 打开cmd，进入到保存项目的文件夹下，然后输入命令如下：

vue init webpack

// vue init webpack my-project

此命令为：创建一个基于webpack 模板的新项目，此项目放到my-project文件夹里面。

2.  填写相关配置项：

? Generate project in current directory? (Y/n)    //是否在当前目录中生成项目? 选择Y

? Project name    //项目名字叫什么呢？  若不填，默认为tradepromo(注：不能包含大写字母)

? Project description    //描述是什么呢？ 若不填，默认

? Author (****** <******@******.com>)    //作者是什么呢？ 若不填，则默认

Runtime + Compiler: recommended for most users
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
//采用哪种编译形式呢？  (1)运行时编译；(2)运行时和普通时编译；   建议默认选择第一种.

? Install vue-router? (Y/n)    //你是否要安装vue-router，我们需要用到路由，所以选择Y

? Use ESLint to lint your code? (Y/n)    //你是否要用ESLint对代码工整度进行检查呢？ 默认为Y

> Standard (https://github.com/standard/standard)
  Airbnb (https://github.com/airbnb/javascript)
  none (configure it yourself)        // 选择一种代码检测规范，默认第一个选项Standard

? Set up unit tests (Y/n)    //是否需要自动化测试？ 默认选No

? Setup e2e tests with Nightwatch? (Y/n)    //是否需要e2e端到端的测试？ 默认选No

? (recommended) (Use arrow keys)
> Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself        //你是使用NPM还是Yarn来做项目的包管理？ 默认选NPM

配置项结果：

 3. 项目初始化成功：

 4. 输入命令：npm  run  dev

---

四、如何把线下的代码提交到gitlab中？

1. 在终端的命令行中退出，并clear

2. 输入命令

git status  //查看目录

git add .   //先把所有文件增加到本地git的缓冲区

git commit -m 'project initialized'    //提交内容的描述

git push    //把本地的代码推送到线上仓库中

3. 查看gitlab中的内容，可以发现本地的代码已经提交到线上gitlab中

4. 若代码找不到，可以从gitlab上重新克隆一份代码，保证代码不会丢失。 

---

五、分析项目代码结构？

项目代码结构如图所示：

README.md    //项目说明文件

package.json    //很多依赖包，表示开发项目的时候第三方模块依赖

package-lock.json    //package的一个锁文件，帮助我们确定安装的第三方包的版本，保持团队编程的统一

LICENSE    //开源协议的说明

index.html    //项目默认的首页模板文件

.postcssrc.js    //是对postcss的一个配置项

.gitignore     //忽略不想提交到线上的文件(不会提交到仓库之中)

.eslintrc.js    //对代码做一个检测，看是否标准

.eslintignore    //在当前这些根目录文件夹下，所有js文件不会受到eslint检测工具检测的

.editorconfig    //帮助我们配置编辑器中的一些语法。例如：index_size = 2,表示tab为2个字符的缩进；可自行添加

.babelrc    //需要通过babel语法解析器做语法上的转换，转换为浏览器可以编译执行的代码

static        //该目录下放的是静态资源，例如：静态图片，模拟的json数据
    .gitkeep

node_modules    //放置的是我们项目依赖的node第三方依赖的包


src            //放置整个项目的源代码(注：业务代码的开发)
    assets        //项目中要用的一些图片资源
        logo.png
    components    //放置项目中要用的小组件
        HelloWorld.vue
    router        //项目所有的路由都放在此文件夹下index.js中
        index.js
    App.vue        //是我们项目最原始的根组件
    main.js        //整个项目的入口文件


config        //放置项目的配置文件
    dev.env.js      //开发环境配置信息
    index.js        //基本配置信息
    prod.env.js    //线上环境配置信息

build        //放置项目打包的webpack配置内容，自动构建生成(注：不需要修改)
    build.js    
    check-versions.js
    logo.png
    utils.js
    vue-loader.conf.js
    webpack.base.conf.js    //基础的webpack配置项
    webpack.dev.conf.js     //开发环境中的webpack配置项
    webpack.prod.conf.js    //线上环境中的webpack配置项
  

---

六、项目代码如何初始化？