VUE脚手架使用

什么是vue脚手架？

 

他是一个快速构建vue项目的工具，经过他，咱们能够将vue所须要的文件安装完成。

vue-cli这个构建工具大大下降了webpack的使用难度，支持热更新，有webpack-dev-server的支持，

至关于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。

 

安装vue-cli脚手架

安装脚手架须要用cnpm(淘宝镜像)安装,直接用pip安装会失败,安装cnpm命令以下:

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

 

安装成功输入:cnpm-V,查看cnpm是否安装成功,

注意V必定要是大写.

安装vue脚手架命令去下:

cnpm install -g vue-cli

安装成功是下面这样的

 

而后使用vue-V查看是否安装成功.

 

 

若是安装失败多是cnpm版本太低,更新cnpm的版本便可.

cnpm更新必需要手动更新,更新命令以下:

npm install -g npm

 

使用vue init webpack myitem   这条命令，就能够建立一个vue

的脚手架。

解释一下命令:

vue init 即便用vue-cli初始化一个项目。

webpack 是说使用webpack做为构建工具。

firstvue 是项目名称。 注意： 项目名称推荐使用小写字母。

 

安装时会暂停一下,你点击Enter进行下一步就能够了,

Install vue-router?  是否安装vue的路由?若是你要作先后端的项目的话,就要选择yes,建议选择yes.

Pick an unit tester jest  是否单元测试

其余的更具本身的需求进行选择

 

 

安装成功会显示出这两个命令:

 

 

这个时候进入你新建的vue项目的目录下,你会发现他新建了一个mytime的文件夹

 

 

在运行项目前,须要安装依赖,命令以下:
cnpm install

 

 

Vue须要在黑窗口启动一下.

启动以前进入vue的项目根目录下.输入命令:

cd mytime  进入根目录

npm run dev  启动项目

启动成功效果以下:

 

 

复制路由: http://localhost:8081,在谷歌浏览器打开,会显示页面:

 

 

这个时候,一个完整的vue脚手架成功搭建成功.

 

 

把你新建的vue项目拖拽到你的编程软件的根目录下:

会出现这些文件,这个时候,你就能够进行编辑了