.net Core中Vue.js里如何使用Element-UI

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

前言

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

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

其實用引入Element-UI按網上的正常流程應該問題也不大，只不過我也因為是初學Vue，所以自己也走了不少彎路，花了不少時間。話不多說，直接寫一下步驟吧。

1. 打開項目目錄，然后按Shift加鼠標右鍵選擇--在此處打開Powershell窗口。
   

2.安裝Loader模塊

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

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

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

3.安裝Element-UI

cnpm install element-ui --save

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

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

我們需要進行修改一下

首先把原來的第三行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的按鈕，如下圖

我們看一下運行起來的效果

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

看完上述內容，你們掌握.net Core中Vue.js里如何使用Element-UI的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！