导入项目
打开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组件已经成功引入了。