移动互联网_4：Vue CLI安装，创建并编译运行Hello_Vue项目，安装express

Vue CLI，可快速建立Vue框架，并在此基础上创建（大型）Vue项目。

安装方法如下：

1. 到Node官网下载Node，并一路默认安装，但尽量不安装在C盘（以D:为例）。Node自带很多模块以及工具。

完毕后，运行CMD命令node -v会看到Node版本。

2. Node自带npm（Node Package Manager），在D:/nodejs打开cmd，输入npm命令npm -v可查看版本，接着配置全局模块和cache的存放路径 ：    

        npm config set prefix "C:\Program Files\nodejs\node_global"
        npm config set prefix "C:\Program Files\nodejs\node_cache"

3. 在D:/nodejs下运行npm命令npm install -g cnpm --registry=https://registry.npm.taobao.org，实现用cnpm代替npm以节省后面模块安装速度。

4. 在D:/nodejs下输入

vue create hello-world

创建hello-world项目。

备注：若添加电脑环境变量，则不用再到D:/nodejs下运行npm/cnpm命令。

5. 将D:\nodejs\hello_vue拖入HBuilderX中，然后选中hello_vue文件夹，点击顶部的“运行-运行到终端-npm run serve”进行编译与网站运行。在HBuilder终端窗口，会出现网页地址，如http://localhost:8080/, 如浏览器打开即出现hell_vue的运行效果。

        这里需要编译的原因是Vue CLI创建的项目自带单文件组件，后缀为.vue，是浏览器无法识别的。

6. 创建的hello_vue项目的结构如下：

        其中，public是最终用户可见的，如index.html；src下App.vue是项目入口，components下可创建新组件并在App.vue中引入使用；node_modules下是各种模块。

7. 安装最常用的express模块命令：

        cnpm install express -g