vue脚手架搭建

前言

现在vue真的是大火，好多热门的项目前端界面都是用vue搭建的，是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。 2016年一项针对JavaScript的调查表明，Vue有着89%的开发者满意度。在GitHub上，该项目平均每天能收获95颗星，为Github有史以来星标数第3多的项目。如果你听说过AngularJs的话，那么你可以把vue看成是Angular的轻量版。Vue关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。

最近我也尝试了一把，如果你是直接看的vue教程的话，大部分新手教程是说的直接引入vue.js文件到页面中，这就像直接引入jQuery一样，这时候就很纳闷，和见过的开源项目的vue架构不一样，如vue-admin项目的架构：

，这种和直接引入vue.js的区别是什么呢？或许你又看到了很多人写vue用到了webpack,vue-cli，他们又是干什么的呢？

vue构建方式

直接引入vue.js文件只能使用一些基础的API和局限的功能，一般主要用于学习vue特性和小型web项目，所以当在实际工程中，尤其是如今强调的大前端时代，前端实现工程化，和后端独立开，所以说前端的项目架构也很复杂，而webpack就是一种前端项目的架构工具，而vue-cli是vue官方提供的架构工具。

webpack构建方式

在vue-cli没有出现之前，大多数vue项目都是用vue+webpack的工作流方式来构建，需要自己来配置vue-loader （loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件，因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！）和 css-module（Less、SASS、PostCSS）怎么配置，如何安装使用eslint（规范编程）和editorconfig（编辑器进行设置）等，这些内容都是需要手动配置一个具体项目的webpack打包文件。

vue-cli构建方式

而vue-cli出现后，只要按照官网敲几行命令就可以新建一个基本的vue项目框架，可以快速的直接进入业务代码的开发阶段，可以说是vue-cli 里面包含了webpack， 并且配置好了基本的webpack打包规则。

demo

如果使用vue-cli脚手架来构建vue项目，首先需要安装node.js,node是一个服务器端语言，是以js为基础的服务端语言，而npm是node的一个组件，他可以说是前端文件包的组合管理器，安装完node.js，并且将node添加到系统环境变量中，然后打开命令行，输入：

npm -v

如果出现如下图的显示，说明已经安装正确：

安装webpack

安装好 npm 之后，就可以通过 npm 命令来下载各种工具了。安装打包工具 webpack，-g 表示全局安装。

npm install webpack -g

安装vue-cli

安装 vue 脚手架项目初始化工具 vue-cli，-g 表示全局安装。

npm install vue-cli -g

创建项目

环境已经搭建完成，现在我们通过 vue-cli 来生成一个项目，名称为 vue-demo。

vue init webpack vue-demo

然后命令行会提示信息，一路根据提示输入项目信息，不懂的化直接默认，等待项目生成。

依赖管理是 npm 的核心功能，原理就是执行 npm install 从 package.json 中的 dependencies, devDependencies 将依赖包安装到当前目录的 ./node_modules 文件夹中。

所以进入项目根目录用命令 npm install安装，最终会生成如下项目结构：

安装完成之后，执行应用启动命令，运行项目。

npm run dev

命令执行之后，如果显示 “I Your application is runing here …”，就表示启动成功了。

浏览器访问对应地址，如: http://localhost:8080，会出现 vue 默认的介绍页面。