Webpack+vue+element逐步搭建开发环境

                                                                        作者：H先生 （转载请注明出处）

转载于: http://yiweifen.com/html/news/WaiYu/20433.html

在搭建整个环境之前，首先默认你已了解了node.js、npm（cnpm）【注：npm与cnpm使用方式一样，npm是国外镜像，下载速度较慢。cnpm是国内镜像，下载速度相对快些。】、webpack、vue、element相关的基础知识。如不了解，请先阅读以下文档：

Node.js：http://www.runoob.com/nodejs/nodejs-tutorial.html

Npm(cnpm)：http://www.runoob.com/nodejs/nodejs-npm.html

Webpack：http://www.cnblogs.com/-walker/p/6056529.html

Vue：https://cn.vuejs.org/v2/guide

element：http://element.eleme.io/#/zh-CN/guide/design

有了以上的认识与基础知识，就可以开始搭建整个开发环境了。下面分别以纯手动搭建与用veu的脚手架vue-cli搭建。(注：在windows环境下)

一、纯手动搭建

如果你本地已安装了node与npm请直接路过第一二步。

第一步：

检查本地环境是否安装了node。在命令窗口下键入node -v，如果有提示版本信息表示已安装（如图1），否则安装node环境。下载地址：http://nodejs.cn/download/

第二步：

检查本地环境是否安装了npm（一般node都自带了npm），在命令窗口键入npm -v，如果有提示版本信息表示已安装（如图2），否则安装npm（此处省略）。

cnpm的安装：在命令行窗口键入以下命令

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

安装成功后就可以与npm一样的使用了，只是将npm换成cnpm即可。

第三步：

有了以上两步必要的环境就可以安装webpack了。

1、首先全局安装，在命令窗口下键入以下命令：

npm install -g webpack

安装成功与否可以键入webpack -version来查看，如图3：

2、其次是安装到你的项目目录。你的项目目录结构由你定，图4为我所建的项目目录结构：

目录结构描述：

test: 项目名称

       src: 放写好的组件及其其它资源

              App.vue: vue组件

              main.js : 入口js文件

        index.html : html文件

        webpack.config.js: webpack配置文件

以上目录结构为最基础的目录结构，至于里面的配置及用法后面将会一一讲解。

手动建立好项目目录结构后就可以在该项目中安装webpack了。

3、在当前目录根目录下打开命令窗口，键入以下命令，将webpack安装到项目中。

npm install --save-dev webpack

此时会在项目根目录生成一个node_modules文件夹，如图5。此后所有的依赖工具包都会安装到这个文件夹下。

4、生成npm安装包依赖关系配置文件，在此项目目录下命令行窗口键入以下命令：

npm init

按提示填入相应信息，也可以一步步跳过，最后会在根目录生成一个package.json文件。如下图6所示：

生成好文件后修改配置文件，将scripts 里的test替换成如下图7所示

下次我们就可以直接在命令行键入npm run dev来启动了。

打开webpack.config.js文件，配置入口文件与出口文件，如图10的entry与output。main.js可以什么也不用写，index.html引入配置好的出口文件的js。如下图8：

到此时，webpack的最小环境已搭建完毕，在命令行键入npm run dev 。打开浏览器，地址栏输入http://localhost:8080你将会看到hello world。（注：如果报端口冲突，可以修改scripts ，如： "dev": "webpack-dev-server --open --hot --port 8081" ）

但想要开发项目还远远不够。因为你编写的css、js（ES6）等webpack还无法识别，所以得先把其依赖的编译工具包引入到webpack项目中来。以下将讲解各个工具模块的安装及其作用。

第四步:

安装Vue（如果不用vue开发当然不用安装）

在命令窗口键入如下命令下载vue 模块：

npm install --save vue

下载完成后会将vue下载到node_modules 目录下，同时会在package.config文件的 dependencies下加入vue模块。如下图9所示：

第五步:

1、安装相关的loader

需要安装的loader如下：

vue-loader ： 装载vue

vue-html-loader ： 由于html页面有许多vue 的标签，所以需要引入这个loader才能识别。

css-loader ： 装载css

style-loader ： 装载style

vue-hot-reload-api : 热重载Vue组件的API

vue-template-compiler : 装载vue模板

如果要使用ES6语法，还需要安装babel（简单简介：babel就是将高版本的js语法编译成低版本语法的工具包）。Babel相关的loader 如下：

babel-loader

babel-core

babel-plugin-transform-runtime

babel-preset-es2015

babel-runtime

安装方式与上面安装vue一样，使用npm或是cnpm，安装可以一次性跟多个，如

cnpm install --save-dev  vue-loader  vue-html-loader ……

（注：其中--save-dev 与 --save的区别是：--save-dev会将安装包信息写入package.config文件里的devDependencies里，--save会将安装包信息写入dependencies里。至于区别，顾名思义。）

如果你的项目还用到其它loader，直接npm下载安装即可。

安装完以上工具后package.config文件如下图10所示：

现在，webpack+vue要使用到的工具都已准备完毕了，但还不能开发vue的项目，因为只是下载下来而已，还需要配置webpack.config.js后才真正算是搭建完毕。

2、配置webpack.config.js，如图11

图11

到此，webpack+vue的环境就搭建完毕。下面将介绍怎么使用vue开发。

将index.html页面改成如下图12

<my-app></my-app>表示引用了一个vue的组件，但它是怎么渲染出来的，请看如下图13的main.js

上面的代码表示，引入了vue模块vue的组件模块，接下来这个页面就有了vue的所有环境，new Vue()里写自己的逻辑就行了。下面再来看App.vue模块怎么写的，如下图14

Vue的模板有三部分组成，template、style、script。至于怎么写，这里就不说明了。

好了，现在，在命令窗口键入以下命令

npm run dev

打开浏览器输入http://localhost:8080，如果没有报错，你将会看到hello world。如果报错，在代码及配置没出错的情况下可能出现的原因是lorder不全，下载的版本不兼容等。

第六步：

安装element

与之前一样，npm下载element

命令窗口键入以下命令：

npm i element-ui -S

安装file-loader

命令窗口键入以下命令：

npm install --save-dev file-loader

下载完成后就可以使用element的组件了。

下面，我将介绍如何在index.html页面中使用element不同的组件。首先，下载babel-plugin-component，在命令窗口键入以下命令：

npm install babel-plugin-component -D

然后，将.babelrc 修改为（如果没有该文件则手动创建，用开发工具创建）：

{

     "presets": [

          ["es2015", { "modules": false }]

     ],

    "plugins": [["component", [

    {

         "libraryName": "element-ui",

         "styleLibraryName": "theme-default"

    }

  ]]]

}

比如，index.html页面使用到element的TimePicker 时间选择器

及Cascader 级联选择器。

首先，新建两个vue模板TimePicker.vue、Cascader.vue。打开官网，将TimePicker与Cascader相关的组件代码copy到两个文件里（注意：vue的组件是由template、style、script三部分组成的，如果copy的组件代码部分没有template标签，则要自己加上去，而且最外层还应由一个div包裹。）。Enement ui官网：http://element.eleme.io/#/zh-CN/component/installation

其次，打开main.js,改为如下图15所示：

再次，在index.html里引用这两个组件，如下图16：

好了，现在，打开命令窗口键入如下命令：

npm run dev

打开浏览器，你将看到，两个组件已加载到了页面中。

至此，整个webpack+vue+element的开发环境就搭建完了，至于后面需要用到路由，ajax请求之类的组件时按上面的方式安装使用就是。

第七步：

部署到生产环境。

现在，你也许会问，我要放在生产环境怎么办呢？好，下面将介绍如何将你写的代码部署到生产环境。

首先，修改package.json文件，在scripts位置加如图17的配置：

在命令窗口输入以下命令：

npm run build

执行命令后，将会生成你webpack.config.js里配置的输出文件dist/build.js。

好了，现在，你只需把index.html页面与dist文件夹copy到你的生产服务器上就OK了。至于你的web服务器使用的是tomcat或是apache或是其它的都无所谓，就看你自己的需求了。

二、使用vue-cli脚手架搭建

如果你觉得上面手动搭建太麻烦，还好，vue提供了一种方式可以快速的搭建好webpack+vue的开发环境。下面将介绍如何使用vue-cli脚手架搭建环境。

第一步：

与安装其它模块一样，vue-cli也是一种工具模块，打开命令窗口，键入以下命令：

npm install vue-cli -g

这是全局安装，如果npm安装时间较长换成cnpm。安装完成后，就可以使用脚手架搭建环境了。

第二步：

vue-cli提供了几种模板，如下三种模式：

Simple（太简单，就一个index.html文件）、webpack-simple（比较实用）、webpack（较全，内置有方法检查、单元测试等。）

我这里只讲解webpack-simple模式，如果对其余两种感兴趣可以自己尝试。

在你要放项目的目录打开命令窗口，键入以下命令：

vue init webpack-simple项目名

安装完毕，在目录下会生成你的项目结构，项目结构如下图：

上面文件与我们手动创建的没啥区别，是不是很简单？但是，现在整个项目还不能跑起来，因为所有的第三方工具都还没下载呢，所以还需要安装项目所依赖的工具。

第三步：

在项目根目录打开命令窗口，键入以下命令：

npm install

输入这个命令程序会自动下载package.config下所依赖的工具包。耐心等待下载完毕，到此，webpack+vue的环境就搭建好了。

第四步：

现在element组件还没有引入进来，我想到此你已经知道如何引入element组件了，如还不明白，请参考手动搭建。其余的工作与上面手动搭建完全一样，这里就不必多说了。