用Vue-cli从零开始搭建一个Vue项目

电脑环境准备

1、下载安装node.js。node中会默认安装npm。命令提示符中 npm -v可查看安装版本。

2、打开命令提示符，安装淘宝镜像cnpm。因为cnpm安装依赖包时会比npm速度快很多。安装命令：

npm install -g cnpm --registry=<a href="https://registry.npm.taobao.org" _src="https://registry.npm.taobao.org">https://registry.npm.taobao.org</a>

安装完毕后可以在命令提示符中输入cnpm -v查看cnpm版本

3、全局安装vue-cli。安装命令：

cnpm install –g vue-cli

项目搭建

1、选择将要搭建项目的目录。比如 d:/mycode

2、命令提示符进入该目录。

3、新建项目。在项目目录下输入命令:

vue init webpack myfirstvue

命令中的nyfirstvue是项目名称，不能含有大写字母。

提示可以都直接回车，这部分是package.json里面的项目说明。

具体说明如下：

Project name (myfirstvue)：项目名称。默认为命令后的名称，也可以自己重新起名

Author：项目作者

Runtime + Compiler: recommended for most users ：运行加编译，默认推荐，直接回车

Install vue-router? ：是否安装vue-router

Use ESLint to lint your code? (Y/n)：是否使用ESLint管理代码

Setup unit tests with Karma + Mocha? (Y/n) ：是否安装单元测试

Setup e2e tests with Nightwatch(Y/n)?    是否安装e2e测试

4、进入项目目录。

安装依赖模块

cnpm install 

5、运行项目

输入命令：

npm run dev 

在浏览器地址栏中输入 http://localhost:8080

可看到如下页面

恭喜你，一个vue项目已经搭建成功！