Element·引入使用

推荐使用npm的方式安装，他能更好的和webpack打包工具配合使用
npm i element-ui -S

Element使用文档地址
https://element.eleme.cn/#/zh-CN

在项目中引入Element

进入到当前项目，引入element

cd vue-manage-vue

#两种安装方式都可以
npm i element-ui -S
npm i element-ui --save-dev

element-ui不适配vue3，官方已将vue3版本的更新为element-plus
npm install element-plus --save

查询

npm list --depth 0 -S

卸载：

npm uninstall -S element-ui 

---

---

进入src找到min.js文件

vue2根据 https://element.eleme.cn/#/zh-CN 配置就可以，vue3需要使用下面配置（vue版本区分，@vue/cli指版本3， vue-cli指版本2）

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

查询App.vue的引入文件
\src\App.vue

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

修改引入HelloWorld文件 - 运行项目测试
\src\components\HelloWorld.vue

<template>
  <div class="hello">
     <el-button>按钮</el-button> 
  </div>
</template>

按需引入

下载组件（可选）
npm install babel-plugin-component -D

（vue2）将 .babelrc(指的是babel.config.js文件) 修改为：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

问题： 引入element失败

使用--force或--legacy-peer-deps可解决这种情况。
--force 会无视冲突，并强制获取远端npm库资源，当有资源冲突时覆盖掉原先的版本。
--legacy-peer-deps：安装时忽略所有peerDependencies，忽视依赖冲突，采用npm版本4到版本6的样式去安装依赖，已有的依赖不会覆盖。
建议用--legacy-peer-deps 比较保险一点
在终端重新安装即可解决
npm i element-ui --force --save-dev