PJCHENder 未整理筆記

[Nuxt] 起步走(Getting Started)

2018-05-03

[Nuxt] 起步走(Getting Started)

@(Vue)[nuxt, bootstrap, jquery]

目錄

[TOC]

建立專案

1
$ vue init nuxt-community/starter-template <project-name>

匯入第三方套件

Bootstrap

1
2
npm install --save bootstrap jquery popper.js
npm install --save-dev sass-loader node-sass

載入 SCSS

1
2
touch assets/scss/main.scss
touch assets/scss/_custom_bootstrap_variable.scss

main.scss

1
2
3
// assets/scss/main.scss
@import "custom_bootstrap_variable";
@import "~bootstrap/scss/bootstrap";

nuxt.config.js

1
2
3
4
5
6
7
8
// nuxt.config.js
module.exports = {
// ...
css: [
'~assets/scss/main.scss'
]
// ...
}

index.vue: 測試 Bootstrap 有無正確載入

1
2
3
4
5
6
7
8
9
10
<!-- pages/index.vue -->
<template>
<div class="alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
</template>

載入 JavaScript

nuxt.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// ./nuxt.config.js

const webpack = require('webpack')

module.exports = {
// ...
build: {
vendor: ['bootstrap'],
plugins: [
// 這麼寫可以在 .vue 中拿到 $
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
})
]
}
// ...
}

index.vue 測試有無正確載入 Bootstrap 即其相依的 jQuery, popper

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
// $('button') // 不能在這裡使用 jQuery,這裡屬於 Server 處理部分

export default {
// ...
mounted () {
// 測試能否使用 Bootstrap tooltip
// 在這裡可以使用 jQuery
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
}
}
</script>

測試時記得要在 export 內使用 jQuery,如果是在其他地方使用 $ ,會變成是在 Server 端使用 jQuery,將無法正確執行。

將 jQuery 暴露到全域

在前面 Bootstrap 的部分已經說明如何載入 jQuery,並且可在 .vuemounted(),但在 window 下仍無法使用到 jQuery,若想將 jQuery 暴露到全域,需要安裝 expose-loader

1
npm install expose-loader --save-dev

nuxt.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// nuxt.config.js
module.exports = {
// ...
build: {
extend (config, { isDev, isClient, isServer }) {
if (isDev && isClient) {
// expose jquery to global
config.module.rules.push({
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: '$'
}]
})
}
}
}
}

TODO:

  • Import FontAwesome 5 without blink

參考

掃描二維條碼,分享此文章