vue引入element ui報錯

2021-10-05 08:17:43 字數 1346 閱讀 6178

1.引入css** 

import 'element-ui/lib/theme-chalk/index.css';
2.報錯資訊

./node_modules/element-ui/lib/theme-chalk/index.css 1:0

module parse failed: unexpected character '@' (1:0)

> @charset "utf-8";.el-pagination--small .arrow.disabled,.el-table .hidden-columns,.el-table td.is-hidden>*,.el-table th.is-hidden>*,.el-table--hidden.el-input__suffix,.el-tree.is-dragging

3.報錯原因,沒有loader處理vue的css檔案,導致css檔案內容沒被解析

4.解決:在webpack配置裡面加上如下資訊

,
二、引入element-ui報錯

1.引入vue**

import elementui from 'element-ui';

vue.use(elementui);

2.報錯資訊

"export 'default' (imported as 'elementui') was not found in 'element-ui'
3.解決

babel.config.js檔案的plugins去除』plugin-transform-runtime『這個外掛程式

三、引入message元件每次重新整理頁面都會展示乙個彈窗

1.引入**

import vue from 'vue'

import 'element-ui/lib/theme-chalk/index.css'

import from 'element-ui'

vue.use(message)

vue.prototype.$message = message

2.解決:改寫成如下寫法即可

import vue from 'vue'

import 'element-ui/lib/theme-chalk/index.css'

import from 'element-ui';

vue.component(message.name, message);

vue.prototype.$message = message;

vue專案引入element ui

先 npm 安裝element ui npm i element ui s然後分為 完整引入 和 按需引入 完整引入 我就不多說了,十分簡單,參照官網 官網位址 按需引入 首先npm安裝依賴 npm install babel plugin component d然後在babel.config.js...

VUE實戰之引入ElementUI

本文在完成初始化的vue專案中引入elementui,vue專案的搭建過程請在目錄中跳轉相應頁面。npm i element ui s如圖所示,則說明安裝成功 安裝ui後需要引入,引入的方式多種多樣,下面介紹一種常用的引入方式。在main.js中加入下面三行 引入element元素 import e...

在vue中如何引入element ui

element ui是餓了麼團隊為 vue提供的 ui元件 下面介紹如何在專案中引入與使用 借助 babel plugin component 我們可以只引入需要的元件,以達到減小專案體積的目的。首先 安裝 babel plugin component npm install babel plugi...