VUE(6)--引入elementUI到项目中

最新推荐文章于 2024-12-07 20:55:49 发布

原创最新推荐文章于 2024-12-07 20:55:49 发布 · 362 阅读

0 ·

CC 4.0 BY-SA版权

VUE 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了两种在Vue项目中引入Element UI的方式：通过npm安装并配置，以及使用cdn链接直接加载。对于npm方式，提供了从下载到在main.js中引入和使用的全过程；对于cdn方式，则展示了如何在index.html中加入相关链接，并在webpack配置中声明外部资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. npm下载方式引入

下载命令：npm install element-ui --save

main.js中引入：

import ElementUI from 'element-ui' //引入脚本文件
import 'element-ui/lib/theme-chalk/index.css' //引入样式
Vue.use(ElementUI); //使用组件

2. cdn形式引入（脚手架搭建项目）

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-cdn</title>
	  <link rel="stylesheet" href="static/elementUI/elementUI.css">    
  </head>
  <body>
   <script src="static/vue/vue.js"></script>
    <script src="static/elementUI/elementUI.js"></script>
    <div id="app"></div>
    <!-- 这里一定要引入vue.js否则会报错，记住本地静态资源要放于static文件夹下 -->
  </body>
</html>

webpack.base.conf.js

 externals: { 
    'vue': 'Vue', //外部引入的资源在这里要定义
    'element-ui': 'element-ui',
  }

main.js

要有 import Vue from 'vue' 不用再引入elementUI