搭建本地VUE + Element UI脚手架工程

搭建自己的工程之前，首先在电脑安装node.js以及npm。npm 为node的包管理工具。

第一步：安装node
node 官网：nodejs.org/en/，下载安装即可，安装完成之后，如下图所示即安装成功，npm会随着node一起安装

第二步：安装cnpm,cnpm为淘宝共享的npm库的操作命令

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

第三步：安装vue-cli. vue-cli为vue脚手架工具，帮助使用者快速搭建自己的脚手架工程

cnpm install -g vue-cli
第四步：利用vue-cli初始化自己的工程

初始化成功之后，在目录下可以看到生成的文件，如下图所示：

此时，运行npm run dev，整个工程即可运行起来

在浏览器中打开可以看到初始化页面，这时本地的脚手架工程已经搭建Ok

下来引入elementUI ,首先安装 cnpm install element-ui，安装完成之后，在工程的main.js中加入下面代码：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

此时，elementUI就已成功的引入到我们工程中了，下面我们尝试在页面中使用，在hellowworld的组件文件中，加入如下代码

 <div>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</div>

运行npm run dev ,如下图所示，可以看到，elementUI 元素已经正确显示在了页面中。

至此，我们的脚手架工程就搭建好了