[Day 11] 利用webpack安装Vuetify

昨天有讲到怎麽利用vue-router来设定路由了，

在开始切版之前，还需要先导入Vuetify套件

在 Day 9的时候，

有顺便安装Vuetify了，但是後来发现 vue add vuetify 是 vue-cli的安装法

这边要改成用 Webpack的方式来安装

先来看这篇 Vuetify的官方安装教学，需要先添加几个依赖

yarn add vuetify
# 或
npm install vuetify

yarn add sass@~1.32 sass-loader deepmerge -D
# OR
npm install sass@~1.32 sass-loader deepmerge -D

执行完後，找一下webpack.config.js档，贴上这段

// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            // Requires sass-loader@^7.0.0
            options: {
              implementation: require('sass'),
              indentedSyntax: true // optional
            },
            // Requires >= sass-loader@^8.0.0
            options: {
              implementation: require('sass'),
              sassOptions: {
                indentedSyntax: true // optional
              },
            },
          },
        ],
      },
    ],
  }
}

BUT ! ! 我找了一下 没看到 webpack.config.js 这个档案

我在估狗找了一下发现这篇，原因如下：

• 开发者一般不需要知道 webpack 做了什麽，所以没有把 wepback 的配置文件建立出来，
• 在 Vue 专案中，vue.config.js 就等同於 Webpack 的webpack.config.js，
• 那在vue-cli 3之後创建专案时，不会自动创建 vue.config.js，所以有需要修改的话，需要在自己手动建立。

那就在专案目录下建立一个 vue.config.js 档，并把上面那段贴上去

完成後，在 /src/plugins资料夹下面，创建一个 vuetify.js档

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

接下来回到 src/main.js，引用vuetify

// src/main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import vuetify from './plugins/vuetify'; // 增加这行，path to vuetify export

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  router,
  vuetify, // 增加这行
  components: { App },
  template: '<App/>',
});

好的~ 大功告成啦

明天就可以开始来规划布局了