vue项目引入 element-ui框架

 

vue项目要用到 element-ui ,需要进行安装和引入

官方推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。

  • npm i element-ui -S

还需要引入 Element 才能使用。

你可以引入整个 Element,或是根据需要仅引入部分组件。

详情查看官方教程:https://element.eleme.cn/#/zh-CN/component/installation

element-UI 安装报错 ,是缓存问题,参考 这个链接

npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning ERR_STREAM_DESTROYED: Cannot call
 write after a stream was destroyed
npm WARN registry Using stale data from https://registry.npmjs.org/ due to a request error during revalidation.
npm ERR! code EPERM
npm ERR! syscall open
npm ERR! path C:\Program Files\nodejs\node_cache\_cacache\tmp\3ea1b65b
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, open 'C:\Program Files\nodejs\node_cache\_cacache\tmp\3ea1b65b'
npm ERR!  [OperationalError: EPERM: operation not permitted, open 'C:\Program Files\nodejs\node_cache\_cacache\tmp\3ea1b65b']
 {
npm ERR!   cause: [Error: EPERM: operation not permitted, open 'C:\Program Files\nodejs\node_cache\_cacache\tmp\3ea1b65b'] {
npm ERR!     errno: -4048,
npm ERR!     code: 'EPERM',
npm ERR!     syscall: 'open',
npm ERR!     path: 'C:\\Program Files\\nodejs\\node_cache\\_cacache\\tmp\\3ea1b65b'
npm ERR!   },
npm WARN locking Error: EPERM: operation not permitted, open 'C:\Program Files\nodejs\node_cache\_locks\staging-33f9775b7cd6ba50.lock'
npm WARN locking  C:\Program Files\nodejs\node_cache\_locks\staging-33f9775b7cd6ba50.lock failed [Error: EPERM: operation not permitted, open 'C:\Program Files\nodejs\node_cache\_locks\staging-33f9775b7cd6ba50
.lock'] {
npm WARN locking   stack: "Error: EPERM: operation not permitted, open 'C:\\Program Files\\nodejs\\node_cache\\_locks\\staging-33f9775b7cd6ba50.lock'",
npm WARN locking   errno: -4048,
npm WARN locking   code: 'EPERM',
npm WARN locking   syscall: 'open',
npm WARN locking   path: 'C:\\Program Files\\nodejs\\node_cache\\_locks\\staging-33f9775b7cd6ba50.lock'
npm WARN locking }
npm WARN ajv-keywords@3.4.1 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.

npm ERR! code EPERM
npm ERR! syscall open
npm ERR! path C:\Program Files\nodejs\node_cache\_locks\staging-33f9775b7cd6ba50.lock
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, open 'C:\Program Files\nodejs\node_cache\_locks\staging-33f9775b7cd6ba50.lock'
npm ERR!  [Error: EPERM: operation not permitted, open 'C:\Program Files\nodejs\node_cache\_locks\staging-33f9775b7cd6ba50.lock'] {

则到 C:\Users\{账户}\ 下 删除  . npmrc 文件。或控制台输入命令 npm cache clean --force 清理缓存。

 

引入element-ui 时报错 :Module build failed: Error: Couldn't find preset "es2015" relative to directory "D:\\code

则 在控制台运行:npm install --save-dev babel-preset-es2015

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
安装Element UI的步骤如下: 1. 首先,确保你已经安装了Vue CLI脚手架工具。如果没有安装,可以使用以下命令进行安装:\[1\] ``` cnpm install -g @vue/cli ``` 2. 在你的Vue项目中,打开`main.js`文件,并添加以下代码:\[2\] ```javascript import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementPlus from 'element-plus'; import 'element-plus/theme-chalk/index.css'; import locale from 'element-plus/lib/locale/lang/zh-cn' createApp(App).use(store).use(router).use(ElementPlus, { locale }).mount('#app') ``` 3. 接下来,你需要安装Element Plus库。可以使用以下命令进行安装:\[1\] ``` cnpm install element-plus ``` 4. 在你的Vue项目中,找到`App.vue`文件,并在需要使用Element UI的地方添加相应的组件。 现在,你已经成功安装了Element UI,并可以在你的Vue项目中使用它了。记得在使用Element UI组件之前,先在`App.vue`文件中引入需要的组件。 希望这个回答对你有帮助!如果还有其他问题,请随时提问。 #### 引用[.reference_title] - *1* *3* [搭建vue3项目+按需引入element-ui框架组件](https://blog.csdn.net/weixin_43861689/article/details/130063595)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [解决vue3使用element-ui](https://blog.csdn.net/xiaoyao_zhy/article/details/125298780)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值