使用vue-cli搭建简单的vue+webpack热更新项目

近年来，前端的发展速度惊人的快，要想跟上前端的进军速度，每时每刻都要学习。各种框架开发是相当流行，今天，带大家使用vue-cli搭建简单的vue+webpack热更新项目。

准备工作：你的电脑要安装node（自带npm），这一点就不多说了,作为前端必备，哈哈。

第一步：使用npm全局安装webpack和vue-cli（如果安装速度慢，可以使用cnpm淘宝镜像安装,直接百度就有）

$ npm install webpack vue-cli -g

这几行warn是警告，自动忽略即可，这样代表安装成功

第二步：使用vue init命令创建模板文件（如果这时报错vue不是指定命令，请看后文报错总结）
vue init 你用的模板工具 项目名称 (这里采用webpack作为模板工具)

$ vue init webpack sharismSpace-personel

这样，我们就创建好了一个vue+webpack项目，目录结构如下

第三步：如果想要运行，请cd到这个目录下，然后npm run dev即可

然后，浏览器打开对应网址：http://localhost:8080,出现如下画面，恭喜，说明安装成功！

报错总结：

一：使用vue init命名报错（vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称…），如下图:

原因：这是因为第一次安装vue-cli，但是并没有更新到环境变量中导致的，需要我们手动配置一下。
解决步骤：
1． 找到系统磁盘中安装npm的根路径，然后查找vue.cmd

2.右键找到相应的目录，然后将npm根目录添加到系统环境变量中

3.添加完成后一路确认，之后重新打开vscode控制台或者powershell，再次输入命令，就好使了。