vue element-ui 搭建

前言

VueJS可以说是近些年来最火的前端框架之一，越来越多的网站开始使用vuejs作为前端框架，vuejs轻量、简单的特性使得前端开发变得更加简易，而基于vuejs的前端组件库也越来越多。我们今天使用的ElementUI，是众多vuejs组件库里面比较优秀的一款。

安装nodeJs和npm

由于我们要使用npm这个包管理器，所以要安装nodeJS。现在版本的nodeJS已经集成了npm，所以我们只需要安装一次即可。我们访问nodejs中文网，下载对应自己系统的版本就可以了。这里我们下载Windows系统的64位zip文件，下载完成后解压，可以看到里面有一个node.exe的可执行文件。

创建ElementUI工程

目前ES5仍属于主流写法，而我们要使用ES6，需要用到babel来将ES6的语法转换回ES5的写法，然后用webpack进行打包等等一些列操作。不过我们不需要自己去配置这些东西，如果是普通的vuejs工程，我们可以使用一个叫做vue-cli的脚手架工具生成vuejs工程，而我们现在使用的是vuejs+ElementUI，所以我们可以从ElementUI的官网里找到通用的项目模版。地址在ElementUI的GitHub，我们只要下载这个工程即可。

可以看到里面已经集成了bable、webpack等插件。不需要我们自己去配置。我们导入这个工程之后，需要做的一件事就是将npm模块安装到这个目录下。我们打开命令行，进入当前工程的根目录，然后输入

npm install

点击回车。

安装结束后我们可以看到工程目录下多了一个node_modules的文件夹，该文件夹就是工程的依赖包所在。以后我们如果想添加依赖包，就可以继续用上文的指令，例如如果想加入vue-router，那么需要输入

npm install vue-router --save

工程打包运行

安装好依赖后，我们就可以运行了

npm run dev

在项目的根目录webpack.config.js中，我们可以修改端口

devServer: {
    host: '127.0.0.1',
    port: 8010,
    proxy: {
      '/api/': {
        target: 'http://127.0.0.1:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },