【图文】Webpack+vue+element-ui逐步搭建开发环境

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

Node.js
Npm/cnpm
Webpack
Vue
element

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

一、纯手动搭建

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

第一步:

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

图1

第二步:

检查本地环境是否安装了npm(一般node都自带了npm),在命令窗口键入npm -v,如果有提示版本信息表示已安装(如图2),否则安装npm(此处省略)。
cnpm的安装:在命令行窗口键入以下命令

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

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

图2

第三步:

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

1、首先全局安装,在命令窗口下键入以下命令:
npm install -g webpack

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


图3
2、其次是安装到你的项目目录。你的项目目录结构由你定,图4为我所建的项目目录结构:
图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文件夹,如图4。此后所有的依赖工具包都会安装到这个文件夹下。

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

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

图5

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

图6

下次我们就可以直接在命令行键入

npm run dev

命令来启动了。

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

图7

到此时,webpack的最小环境已搭建完毕,在命令行键入npm run dev 。打开浏览器,地址栏输入http://localhost:8080你将会看到hello world。(注:如果报端口冲突,可以修改scripts ,如: "dev": "webpack-dev-server --open --hot --port 8081" ;如果不能启动,根据报错提示查看是否还有依赖包没有安装,如有,则用

npm install --save-dev 包名 

命令安装需要的包。)

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

第四步:

安装Vue(如果不用vue开发当然不用安装)
在命令窗口键入如下命令下载vue 模块:

npm install --save vue

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


图8

第五步:

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文件如下图9所示


图9

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

2、配置webpack.config.js,如图10
图10-1

图10-2

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

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


图11

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


图12

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

图13

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,改为如下图14所示:

图14

再次,在index.html里引用这两个组件,如下图15:


图15

好了,现在,打开命令窗口键入如下命令:

npm run dev

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

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

第七步:

部署到生产环境。
现在,你也许会问,我要放在生产环境怎么办呢?好,下面将介绍如何将你写的代码部署到生产环境。
首先,修改package.json文件,在scripts位置加如图16的配置:


图16

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

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 项目名

安装完毕,在目录下会生成你的项目结构,项目结构如下图1:


图1

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

第三步:

在项目根目录打开命令窗口,键入以下命令:

npm install

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

第四步:

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

推荐阅读更多精彩内容