前端工程化

前端工程化

高效的开发离不开基础工程的搭建。

Vue-cli

Vue脚手架指的是Vue-cli，它是一个专门为单页面应用快速搭建繁杂程序的脚手架，它可以轻松地创建新的应用程序而且可用于自动生成Vue和Webpack的项目模板。
Vue-cli是一个基于Vue.js进行快速开发的完整系统，其提供以下功能：

（1）通过@vue/cli实现交互式的项目脚手架。
（2）通过@vue/cli+@vue/cli-service-global实现零配置原型开发。
（3）一个运行时的依赖（@vue/cli-service），该依赖：
·　可升级。
·　基于Webpack构建，并带有合理的默认配置。
·　可以通过项目内的配置文件进行配置。·　可以通过插件进行扩展。
（4）一个丰富的官方插件集合，集成了前端生态中最好的工具。
（5）一套完全图形化的创建和管理Vue.js项目的用户界面。
Vue-cli致力于将Vue生态中的工具基础标准化。它确保各种构建工具能够基于智能的默认配置即可平稳衔接，这样开发者可以专注在撰写应用上，而不必花费好几天时间去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，而无须eject。
利用Vue-cli脚手架构建Vue项目需要先安装Node.js和NPM环境。

Node.js

Node.js是一个基于Chrome V8引擎的JavaScript运行环境。Node.js使用了一个事件驱动、非阻塞式I/O的模型。
Node是一个让JavaScript运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。Node发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。
Node对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。V8引擎执行JavaScript的速度非常快，性能非常好。Node是一个基于Chrome JavaScript运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。Node使用事件驱动，采用非阻塞I/O模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

Node.js的安装

Node.js的安装比较简单，大家需要在Node.js官网（https://nodejs.org/en/download/）下载并安装Node.js环境，Windows系统推荐下载Windows Installer（.msi）。同时，大家会得到一个附送的NPM工具。
（1）安装Node.js，双击下载好的node安装文件安装过程比较简单，一直单击“下一步”按钮即可。
（2）环境变量配置。安装完成后需要设置环境变量，即在Path中添加安装目录（例如：D：\java\nodejs）
（3）单击“开始”按钮，然后单击“运行”按钮，在输入框内输入cmd命令，最后输入node-v，

NPM

NPM代表npmjs.org这个网站，这个站点存储了很多Node.js的第三方功能包。
NPM的全称是Node Package Manager，它是一个Node.js包管理和分发工具，已经成为非官方的发布Node模块（包）的标准。它可以让JavaScript开发者能够更加轻松地共享代码和共用代码片段，并且通过NPM管理需要分享的代码也很方便、快捷和简单。
NPM最初用于管理和分发Node.js的依赖，它自动化的机制使得层层嵌套的依赖管理变得十分简单，因此后来被广泛应用于前端依赖的管理中。

npm install -g cnpm – registry=http://registry.npm.taobao.org
这样就可以使用淘宝定制的CNPM（gzip压缩支持）命令行工具代替默认的NPM，当然大家也可以选择不安装，不代替NPM。

基本使用

在用Vue构建大型应用时推荐使用NPM安装。NPM能很好地和诸如WebPack或Browserify模块打包器配合使用。Vue-cli脚手架快速建立项目，步骤如下：
（1）搭建第一个完整的Vue-cli脚手架构建的项目。
Vue-cli是用Node编写的命令行工具，我们需要进行全局安装。打开命令行终端，输入如下命令：

  npm install -g vue-cli

然后等待安装完成

图片:

（2）安装完成后，在命令行输入vue-V，如果出现相应的版本号，则说明安装成功

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。
（3）我们可以使用Vue-cli快速生成一个基于Webpack模板构建的项目，
首先需要在命令行中进入项目目录，然后输入如下命令：

//cd $ 自定义路径$(如:D:\Web前端\VueCode)
    vue init webpack vue-project

（4）配置完成后，可以看到目录下多出了一个项目文件夹，里面就是Vue-cli所创建的一个基于Webpack的Vue.js项目。
然后进入项目目录（如：cd　vue-project），使用npm install安装依赖

依赖安装完成后，我们来看一下项目的目录结构，代码如下：

App.vue文件解释：
App.vue是一个Vue组件，包含三部分内容：页面模板、页面脚本、页面样式，代码如下：
index.js文件解释：
（5）在命令行输入npm run dev命令启动项目

运行成功后在浏览器输入http://localhost:8080，访问项目结果如图