elementui java_ElementUI v2.13 使用手册 PDF 下载

最新推荐文章于 2024-09-05 23:03:22 发布

扯淡少年

最新推荐文章于 2024-09-05 23:03:22 发布

阅读量298

点赞数

文章标签： elementui java

本文链接：https://blog.csdn.net/weixin_35864328/article/details/114860032

版权

本教程详细介绍了如何在基于Vue的项目中使用ElementUI v2.13，包括通过npm安装、CDN引入、Hello world示例，以及如何在main.js中配置按需引入组件。还提供了ElementUI插件以快速搭建项目，特别是对于Laravel用户的模板。此外，提到了借助babel-plugin-component来减小项目体积的方法，并给出了相应的.babelrc配置示例。

摘要由CSDN通过智能技术生成

ElementUI v2.13 使用手册 PDF 下载

下载地址：

提取码：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 快速上手使用 [email protected] 使用 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. });