链接：https://pan.baidu.com/s/151EqsxlAAhk1OIFdXmVJCA 

提取码：89nt

npm 安装 CDN Hello world 安装本文档使用 书栈网 · BookStack.CN 构建 - 8 -

本节将介绍如何在项目中使用 Element。 我们为新版的 vue-cli 准备了相应的 Element 插件，你可以用它们快速地搭建一个基于 Element 的项目。 我们提供了通用的项目模板，你可以直接使用。对于 Laravel 用户，我们也准备了相应的模板，同样可以直接下载 使用。 如果不希望使用我们提供的模板，请继续阅读。 你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。 在 main.js 中写入以下内容： 1. import Vue from 'vue'; 2. import ElementUI from 'element-ui'; 3. import 'element-ui/lib/theme-chalk/index.css'; 4. import App from './App.vue'; 5.6. Vue.use(ElementUI); 7.8. new Vue({ 9. el: '#app', 10. render: h => h(App) 11. }); 以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。 借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。 首先，安装 babel-plugin-component： 1. npm install babel-plugin-component -D 快速上手 使用 vue-cli@3 使用 Starter Kit 引入 Element 完整引入 按需引入 快速上手 本文档使用 书栈网 · BookStack.CN 构建 - 9 -

然后，将 .babelrc 修改为： 1. { 2. "presets": [["es2015", { "modules": false }]], 3. "plugins": [ 4. [ 5. "component", 6. { 7. "libraryName": "element-ui", 8. "styleLibraryName": "theme-chalk" 9. } 10. ] 11. ] 12. } 接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容： 1. import Vue from 'vue'; 2. import { Button, Select } from 'element-ui'; 3. import App from './App.vue'; 4.5. Vue.component(Button.name, Button); 6. Vue.component(Select.name, Select); 7. /* 或写为 8. * Vue.use(Button) 9. * Vue.use(Select) 10. */ 11. 12. new Vue({ 13. el: '#app', 14. render: h => h(App) 15. });