在搭建整个环境之前，首先默认你已了解了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组件了，如还不明白，请参考手动搭建。其余的工作与上面手动搭建完全一样，这里就不必多说了。
网友评论