Vue-cli创建项目步骤

一. 使用 vue-cli 搭建项目

下面整个过程是基于已经安装node.js和cnpm的基础上，node.js如何安装就不在这里详说了。

如何全局化安装cnpm，这里简单提一下：

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

其实对于安装vue-cli，使用npm命令和cnpm命令都是可以的，个人觉得使用npm安装的比较慢，而且很可能会因为网络问题而出错，所以还是觉得使用cnpm稳一点。

（1）全局安装 vue-cli ，在命令提示窗口执行：

cnpm install -g vue-cli 

安装vue-cli

 

出现以上提示表示vue-cli正常安装成功，可以正式创建vue-cli工程项目了。

（2）安装vue-cli成功后，通过cd命令进入你想放置项目的文件夹

（3）创建项目执行命令“vue init 模板 项目名称”

init后跟想要用的模板，六种模板可选如下图，之后跟项目名称，项目名称不能有大写

init后跟模板且有6种模板可写 

例如：

vue init webpack vue_demo

Project name —> 项目名称 （非必填，默认上面的项目名）
Project description —> 项目描述 （非必填）
Author —> 作者（非必填）

Install vue-router—> 路由器 

Use ESLint to lint your code—> 单元测试包 

Set up unit tests—> 单元测试包

最后一个是选择下载方式

确认创建项目后，后续还需输入一下项目名称、项目描述、作者、打包方式、是否使用ESLint规范代码等等，详见上图。

安装顺利执行后会，生成如下文件目录：

 

(4) 最后需要执行命令： npm run dev 来启动项目，启动完成后会自动弹出默认网页：

运行测试

输入：npm run dev

一般流览器会自动跳转出界面 http://localhost:8080/，也可以手动打开流览器器输入地址
下面是浏览器显示效果：

运行输入

 

 

 

 这样项目就搭建完成了。

文件引入vue.js路径
​​​​​