vue-cli -- > 项目基本构建的方法

本文档目的在于让对vue了解比较少的同学，能够快速搭建属于自己的vue项目。（window）

 

一、构建项目的前提条件

 

　　1、确保本机安装了node.js ^6 --> javascript 的服务端的运行环境

　　2、确保本机安装了npm ^2     --> npm的包的管理工具

　　注意：如果你装了node.js 和 npm 请检查它们对应的版本号。

 

　　　　1、win + r 打开cmd，键入 node -v 回车

　　　　

　　　　2、键入 npm -v

　　　　

　　　　符合vue的开发环境，我们不多啰嗦直接进入项目构建。

 

二、构建自己的vue-cli应用

　　1、因为vue脚手架的一些好用的功能是基于webpack模块的，所以首先你应该全局安装webpack模块（安装成功后应该会出现版本号）

 

　　　　 npm install webpack -g //全局安装webpack 

　　　　 webpack -v //检查webpack是否安装成功， 成功即出现版本号。 

　　　　 

 

 

　　2、全局安装vue-cli

 

　　　　  npm install vue-cli -g 

　　　　  vue -V // 检查vue-cli是否安装成功 成功出现如下提示 

　　　　  

 

 

　　3、构建一个名字叫做report的项目

 

　　　　  vue init webpack report // 在cmd当前目录下，创建一个名字叫做report的项目

 

　　         回车后，会出现很多yes/no的选项，这里根据个人需求选择是否安装。在这里个人建议先全部都选择no不安装，后期需要那个模块我们自己安装。这样印象深刻并且能够

　　　  学会如何自己配置项目中应用的模块。

　　　  　注意：在这里最后的 npm install 选择上，这是安装vue-cli基本的包。等待安装结束后。

 

 

　　4、进入项目文件夹，启动项目

 

　　　　　cd report // 进入文件夹  

　　　　　npm run dev // 启动项目 

　　　　　

 

 

　　　  　最后出现localhost:8080字样便可放入浏览器地址栏中进行访问vue-cli的默认组件

　　　　  注意：

　　　　　　　后面的端口可能不是8080，因为8080是vue-cli默认配置的端口号。如果本机开启了其他服务，webpack会自动检测，并且分配一个新的端口，有可能是8081、

　　　　  8082。这个不要在意，字节使用就可以了。

 

个人邮箱：wangweizhangweb@163.com

姓名：王维璋

有问题随时交流，不怕打扰。

最后：

　　本文档意在与帮助初学者快速构建vue项目，虽没什么技术含量。但不要随意转载，如需转载保存。需署名。谢谢配合。