vue脚手架（vue-cli）搭建与工程化

（1）为了快速安装vue-cli,可以先安装淘宝镜像cnpm （如已经下载可忽略）：

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

（2）全局安装vue-cli（如果npm和node版本过低时会报错，下载新版本即可）：
cnpm install -g vue-cli
前提条件: Node.js (>=4.x, 6.x preferred), npm>version 3（必须安装Node.js）
（3）vue安装脚手架工具
脚手架：vue-cli是vue的脚手架工具，可以自动生成目录。

cnpm install -g vue-cli

（4）Vue脚手架搭建完毕后，即工地脚手架搭建好了。接下来开始生成工程—工程化。
语法：vue init <template-name> <project-name>
template-name是引用模板名称，project-name项目名称，在这引用的模板为webpack
目前可用的模板：
日常开发推荐使用webpack模块
（5）创建工程
①例如想把项目放到D盘下，切换到D盘

②然后输入vue init webpack +项目名称

③设置项目相关配置

④设置项目相关配置，设置完毕后点击回车，开始下载

⑤下载完毕后会出现以下提示

⑥此时，D盘下的项目工程便已经创建完毕

（6）初始化项目，安装依赖
在命令行进入项目路径，然后执行npm install命令，安装项目需要的依赖
输入指令npm install安装依赖


（7）运行项目此时，项目初始化完毕，执行npm run dev或cnpm run dev命令运行项目

接下来便可以在http://localhost:8080查看项目（可以手动配置端口，限制不能大于65535）
（8）目录分析（打开项目，依次分析下目录结构，项目目录结构如下）

（9）打包输出文件目录


常遇问题
vue项目端口号被占用 8080端口被占用，无法访问http://localhost:8080网址
解决方案：

打开项目，找到config中的index.js文件，打开并找到dev中的port:8080端口修改为4040或其他（随便写，只要这个端口号不被占用就行）
如何查看被谁占用的端口
cmd输入命令：netstat -ano，列出所有端口的情况。在列表中观察被占用的端口