DAY6 起手式--Nuxt.js常用套件安装

前言

不论在哪个环境开发，都会使用到一些插件、套件，我们应该如何在 Nuxt.js 使用呢？又要如何配置呢？
今天将针对常用的一些套件，像是预处理器( SCSS 、 PUG )、 jQuery 、 Bootstrap 安装做简单说明。

如何在 Nuxt.js 使用预处理器？

Nuxt.js 超级方便，我们直接可以透过 lang 属性在组件中的 <template> ， <script> 或 <style> 上使用各种预处理器。
非常简单，直接加上 lang 属性就可以爽爽用。

<template lang="pug">
  h1.red Hello {{ name }}!
</template>

<script lang="coffee">
  export default data: ->
    { name: 'World' }
</script>

<style lang="sass">
  .red
    color: red
</style>

<style lang="scss">
  .red {
    color: red;
  }
</style>

** 可是千万记得，预处理器也要安装对应的 Webpack loader **

npm install --save-dev [email protected] pug-plain-loader coffeescript coffee-loader node-sass sass-loader@10

用了什麽就记得装什麽哦！
装完就可以用了，不用另外设定什麽，是不是很简单？

踩雷贴心提醒，因为 nuxt.js@2 使用的是 vue2 ，建议用 sass-loader@10

Vue.js 相关插件怎麽设定呢？

请先前往 plugins 资料夹，我们需要先创造一支 js 写入相关引用设定
例如 plugins/vue-notifications.js

import Vue from 'vue'
import VueNotifications from 'vue-notifications'

Vue.use(VueNotifications)

写完了记得要告诉 nuxt.config.js 我们要使用这支 plugins

module.exports = {
  plugins: ['~/plugins/vue-notifications']
}

关於在 nuxt.config.js 对 plugins 的配置，除了字串外，也可以使用物件增加额外配置
如果使用 Object， 其具有以下属性：
src: String (文件的路径)
ssr: Boolean (默认为 true) 如果值为 false，该文件只会在客户端被打包引入。

jQuery

首先我们需要透过npm安装

npm install jquery --save

然後我们想要全域使用 $ ，就需要添加 Webpack 插件设定
请洽 nuxt.config.js

import webpack from 'webpack'

module.exports = {
  build: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        // ...etc.
      })
    ]
  }
}

使用 ESLint 的捧由，记得在 .eslintrc.js 启用 jQuery 全局变量，就不会跳错罗！

module.exports = {
  env: {
    jquery: true
  },
}

Bootstrap

起手式，npm安装

npm install bootstrap

Bootstrap 有两个地方要配置，分别是 CSS 与 JS

• CSS 配置
  我习惯是会以 all.scss 为主档案，在此 import bootstrap 的变数与 scss 来使用
  首先先到 assets/scss/ 建立自己的 all.scss
  然後我们打开 node_modules/bootstrap/scss 就会看到一堆一堆的 scss 档案，先不用紧张。
  我们先取用 _variables.scss 到 assets/scss/helpers 里面，为什麽呢？
  因为我们要客制化自己的变数，而 _variables.scss 就是变数设定档，我们取出来改成自己的版本。
  有了我们自己的变数档之後，要怎麽做使用呢？
  请回到我们 assets/scss/all.scss

@import '~bootstrap/scss/functions';
@import './helpers/_variables';
@import '~bootstrap/scss/bootstrap';

这样 scss 就会透过 bootstrap 的functions整合我们自订义的_variables，编译後一起使用了唷！

最後要记得将 all.scss 套用到页面中，怎麽做呢？请洽 nuxt.config.js

export default {
  css: ['~assets/scss/all.scss'],
}

• JS 配置
  提醒，Bootstrap5 有用到 Popper ，Bootsrap4 另外还用到 jQuery，使用前请记得先安装哦。
  jQuery 请参考上方教学。

Popper 安装

npm install @popperjs/core

Bootsrap 设定
因为使用第三方插件，所以需要做些设定来启用。
一样请洽 nuxt.config.js，我们要做 plugins 设定

export default {
  plugins: [
    {
      src: '~/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js',
      ssr: false
    }
  ],
}

可能有些人会疑惑，上面这个 ssr:false 是什麽意思？
ssr: Boolean (默认为 true) 如果值为 false，该文件只会在客户端被打包引入。
设定了这个才能避免找不到文件的错误。
但实际会跳错的原因我也还没有想通，反正先设定false就不会有错误，可以正常使用罗！

如果谁知道为什麽一开始就打包引入会跳错的话，可以跟我说一声吗？哈哈