.net Core中Vue.js里如何使用Element-UI，相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

創(chuàng)新互聯(lián)主營四方臺網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶App定制開發(fā),四方臺h5成都微信小程序搭建,四方臺網(wǎng)站營銷推廣歡迎四方臺等地區(qū)企業(yè)咨詢

前言

每次自己嘗試用新東西時，所花的時間真的不是一般的多，以前剛開始學(xué)Vue的時候用VSCode直接引入ElementUI比較簡單，這次項(xiàng)目因?yàn)橛?net Core生成的Vue前端項(xiàng)目，然后照原來的方式一直是用不了，經(jīng)過了一天的反復(fù)試驗(yàn)，終于可以引入應(yīng)用了。

.net Core中Vue引入Element-UI步驟

其實(shí)用引入Element-UI按網(wǎng)上的正常流程應(yīng)該問題也不大，只不過我也因?yàn)槭浅鯇W(xué)Vue，所以自己也走了不少彎路，花了不少時間。話不多說，直接寫一下步驟吧。

1. 打開項(xiàng)目目錄，然后按Shift加鼠標(biāo)右鍵選擇--在此處打開Powershell窗口。

2.安裝Loader模塊

cnpm install style-loader -D
 cnpm install css-loader -D
 cnpm install file-loader -D

其實(shí)這三個模塊我們原來就已經(jīng)存在了，只不過我又得新安裝，可能算是最新版本吧，

可以看到原來是存在的，安裝完后的packages.json原來是有版本號的也改變一個http的鏈接了

3.安裝Element-UI

cnpm install element-ui --save

4.修改 webpack.base.conf.js 的配置

找到webpack.config.js文件，打開后看到原來的

我們需要進(jìn)行修改一下

首先把原來的第三行test:/\.css$/.use:IsDevBuild這里屏蔽，然后我們再寫入兩句

                {
                    test: /\.css$/,
                    loader: 'style-loader!css-loader'
                },
                {
                    test: /\.(eot|woff|woff2|ttf)$/,
                    loader: 'file-loader'
                }

然后保存即可。還是比較簡單的，可惜我花了一整天來回測試，其中遇到的坑就不說了，全是眼淚啊。。。。

使用效果

首先我們在首頁app.ts里引入Element-UI

import ElementUI from 'element-ui';
import "element-ui/lib/theme-chalk/index.css";

Vue.use(ElementUI);

然后在app.vue.html里加入兩個普通的按鈕，在其上面再加入兩個ElementUI的按鈕，如下圖

我們看一下運(yùn)行起來的效果

可以看到右上角普通按鈕和ElementUI的按鈕差別還是很大的。

看完上述內(nèi)容，你們掌握.net Core中Vue.js里如何使用Element-UI的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！