使用vue-cli搭建vue项目完整版

一、vue介绍

vue是一个用来构建用户界面的框架，vue只专注于视图层，属于主流的MVVM前端框架，关于MVVM的具体介绍不在本章讨论范围之内。它很方便的与现有的第三方组件库或现有项目进行集成，另外vue提供各种脚手架模块来方便项目的开发，本章讲解的vue-cli就是其中之一。

二、vue-cli介绍

vue-cli是vue提供的一款脚手架，集成了webpack环境及主要的依赖，对于项目的搭建、打包、维护等都非常方便快捷。它的特点有：

1、有一套成熟的vue项目架构设计，能够快速初始化一个vue项目。

2、vue-cli是官方支持的一个脚手架，维护性比较好。

3、vue-cli提供了一套本地的node测试服务器，使用vue-cli自己提供的命令，就可以启动服务器。

4、集成打包上线方案。

5、还有一些优点，包括：模块化，转译，预处理，热加载，静态检测和自动化测试等，等大家深入使用下去就会发现vue-cli的强大之处。

三、开始

1、安装nodejs

在nodejs官网下载最新版本的nodejs，需要选择4.0以上版本。安装完成之后输入node -v查看安装是否成功。

如果本机已经安装老版本的nodejs，建议安装nvm或者n模块进行切换node版本，具体的nvm的使用自行搜索。

2、配置淘宝npm镜像

由于需要通过npm下载各种模块，默认npm是从国处服务器下载，对于网络条件一般的用户可能很难下载成功，所以需要配置成淘宝的镜像。

打开命令行，输入：npm config set registry https://registry.npm.taobao.org

以后下载模块会自动从淘宝地址进行下载。

3、安装webpack

打开命令行，输入npm install webpack -g。安装完成后输入webpack -v，如果显示版本号，则说明安装成功。

4、安装vue-cli

打开命令行，输入npm install vue-cli -g。安装完成后输入vue -V查看版本事情，现在应该是2.8.2版本。

5、通过vue-cli初始化项目

打开命令行，进入指定的目录，输入vue init webpack 项目名，一路回车即可

成功之后如图：

6、安装依赖

项目建好之后还不能运行，因为还需要安装各种依赖，进入项目目录中，在命令行输入npm install -d即可，安装依赖需要大概3~5分钟。至此通过vue-cli构建项目成功，项目目录结构如下：

7、启动项目

在命令行中输入npm run dev启动服务，启动完成后会默认打开一个欢迎页面，默认端口是8080，如图：

8、结束

至止整个构建、安装、运行过程已经完成，如果大家在过程中出现错误，一般需要检查本地nodejs的版本是不是比较新的版本，另外检查网络联通情况，大部分可能在npm install webpack和npm install这两个步骤会出现错误，具体错误大家可以在网上搜索。接下来的文章会主要介绍使用vue来开发项目。

转载请注明来源：http://www.16boke.com/article/detail/212

  vue   npm   JavaScript