詳解Nuxt.js中使用Element-UI填坑
Nuxt.js是Vue進(jìn)行SSR的一個(gè)優(yōu)選開(kāi)源項(xiàng)目，可免去繁瑣的Webpack、nodejs后臺(tái)服務(wù)配置等操作，方便的搭建一個(gè)支持SSR的VUE項(xiàng)目。Element-UI則是一個(gè)機(jī)遇Vue2.0+開(kāi)發(fā)的一套UI框架，實(shí)現(xiàn)了常用的組件，可幫助開(kāi)發(fā)者快速搭建一個(gè)如CMS系統(tǒng)、后臺(tái)管理系統(tǒng)等基于Vue的系統(tǒng)。
由于Element-UI目前在SSR支持方面還是不夠完善，且Nuxt.js在文檔方面也有欠缺，所以在Nuxt.js中使用Element-UI也是一段坑路，需要去將查看Nuxt源碼與Element-UI文檔相結(jié)合才可以填完坑。
1、創(chuàng)建Nuxt.js的項(xiàng)目
Nuxt.js提供了一個(gè)vue-cli的模板，可以快速的開(kāi)始coding的工作。
vue init nuxt/starter \
2、添加Element-UI
與其他組件一樣，直接通過(guò)npm或者yarn即可添加。
yarn add element-ui
在Nuxt.js中使用Element-UI需要通過(guò)plugins的方式引入，所以我們需要配置nuxt.config.js文件。
css: [
'~assets/css/main.css',
'element-ui/lib/theme-default/index.css'
],
build: {
vendor: [
'axios',
'element-ui'
],
babel: {
plugins: [['component', [{
libraryName: 'element-ui',
styleLibraryName: 'theme-default'
}]]]
},
loaders:[
{
test: /\.css$/,
loader: 'vue-style-loader!css-loader'
},
{
test: /\.(png|jpe?g|gif|svg)$/,
loader: 'url-loader',
query: {
limit: 1000, // 1KO
name: 'img/[name].[hash:7].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 1000, // 1 KO
name: 'fonts/[name].[hash:7].[ext]'
}
}
],
postcss: [
require('autoprefixer')({
browsers: ['last 3 versions']
})
]
},
plugins: ['~plugins/element-ui'],
同時(shí)，我們需要在根目錄下新建一個(gè)plugins的目錄，添加一個(gè)element-ui.js的文件，文件內(nèi)容如下：
import Vue from 'vue'
if (process.BROWSER_BUILD) {
Vue.use(require('element-ui'))
}
通過(guò)此種方式即可實(shí)現(xiàn)在Nuxt.js中使用Element-UI。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
VUE中computed 、created 、mounted的先后順序說(shuō)明
這篇文章主要介紹了VUE中computed 、created 、mounted的先后順序說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue3項(xiàng)目中配置TypeScript和JavaScript的兼容
在Vue3開(kāi)發(fā)中,常見(jiàn)的使用JavaScript（JS）編寫代碼,但也會(huì)有調(diào)整編寫語(yǔ)言使用TypeScript（TS）的需求,因此,在Vue3項(xiàng)目設(shè)置中兼容TS和JS是刻不容緩的重要任務(wù),2023-08-08
vue中eventbus被多次觸發(fā)以及踩過(guò)的坑
這篇文章主要介紹了vue中eventbus被多次觸發(fā)以及踩過(guò)的坑，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
本篇文章主要介紹了vue中component組件的props使用詳解，這里整理了詳細(xì)的用法，具有一定的參考價(jià)值，有興趣的可以了解一下2017-09-09
vue運(yùn)行項(xiàng)目時(shí)network顯示unavailable的問(wèn)題及解決
這篇文章主要介紹了vue運(yùn)行項(xiàng)目時(shí)network顯示unavailable的問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要給大家介紹了關(guān)于vue中Axios的封裝與API接口的管理的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08
這篇文章主要介紹了Vue的子父組件傳值之小白必看篇，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue?import?from省略后綴/加載文件夾的方法/實(shí)例詳解
本文介紹Vue在import時(shí)省略后綴以及import文件夾的方法，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue實(shí)現(xiàn)戶籍管理系統(tǒng)，戶籍信息的添加與刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
vue+ElementUi+iframe實(shí)現(xiàn)輪播不同的網(wǎng)站
需要實(shí)現(xiàn)一個(gè)輪播圖,輪播內(nèi)容是不同的網(wǎng)站,并實(shí)現(xiàn)鼠標(biāo)滑動(dòng)時(shí)停止輪播,當(dāng)鼠標(biāo)10秒內(nèi)不動(dòng)時(shí)繼續(xù)輪播,所以本文給大家介紹了用vue+ElementUi+iframe實(shí)現(xiàn)輪播不同的網(wǎng)站,需要的朋友可以參考下2024-02-02