vue基础（二）-vue集成Element

导入项目

打开Visual Studio Code，选择File-add Folder to Workspace，导入我们的项目，如图所示

安装Element

Element 是国内饿了么公司的一套开源框架，简洁优雅，提供了Vue、React、Angular多个版本，这里使用Vue版本搭建我们的界面。
对于Element的安装教程，官网上有详细的教程，我们可以参考官网上的教程。访问地址https://element.eleme.cn/#/zh-CN/component/installation，按照安装指南，我们选择npm安装方式，cd进入到我们的项目下，执行下面命令：

npm i element-ui -S

如下所示，代表我们的Element安装成功：

引入Element

我们可以引入整个Element，或是根据需求仅引入部分组件。在这里我们选择引入整个组件，如果需要其他的引用方式可以具体查看官网。
在 main.js 中写入以下内容：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.config.productionTip = false;

Vue.use(ElementUI)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

引入Element之后，在原有的HelloWorld.vue页面加入一个Element的按钮，测试一下，如图所示：
如下图所示，说明Element组件已经成功引入了。