Vue学习记录06--element-ui全局引入&按需引入

最新推荐文章于 2024-05-31 11:18:26 发布

原创最新推荐文章于 2024-05-31 11:18:26 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何在网页中通过CDN和脚手架两种方式正确引入Element-UI组件，包括先引入Vue再引入Element的重要性，以及按需引入的解决方案，包括配置Babel插件。遇到的问题及解决方法也一并分享。

1、引入
引入有两种方式：
1）、网页中直接使用 CDN方式
在这里插入图片描述
可能会出现通过cdn引入element-ui组件样式不显示问题：
必须先引入vue，再通过cdn引入element，否则element-ui组件与样式无效。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者利用本地的vue.js

<script src="../vue.js/vue.js"></script>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1. 引入vue -->
    <script src="../vue.js/vue.js"></script>
    <!-- 2. 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 3. 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>


<body>
    <div id="app">
        <el-button>按钮</el-button>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {}
        },
    })
</script>


</html>

2）、在脚手架中使用

全部引入
在项目中引入element-ui

可能会出现main.js首字母爆红问题，解决方法：
在package.json加入一句：“requireConfigFile”: false
在这里插入图片描述

此时已完成elment-ui全局引入，但是这种方式也有缺点：项目中会有一些没有用到的组件，占用项目体积。

按需引入
引入插件：cnpm install babel-plugin-component -D

在项目里引入

引入：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

在这里插入图片描述
此时运行项目出现： ERROR Error: Cannot find module ‘babel-preset-es2015’

解决方法：
https://blog.youkuaiyun.com/zy21131437/article/details/108029284

module.exports = {
    "presets": [
        '@vue/cli-plugin-babel/preset', ["@babel/preset-env", { "modules": false }]
    ],

    "plugins": [
        [
            "component",
            {
                "libraryName": "element-ui",
                "styleLibraryName": "theme-chalk"
            }
        ]
    ]

}

在这里插入图片描述
运行项目：cnpm run serve

成功