vue scss router Vue CLI 2

May 21, 2019

Vue CLI 2 環境設定：全域 SCSS

Router 基本教學


文 / 西打藍 Siddharam

前言


最近被分配做「問卷機器人」的任務，需要有兩個語系、二十六則問題，有單選、複選。總之畫面很像在 line 聊天。

一共會有四個頁面，重點有兩個：

一是兩周完成。
二是用 Vue CLI 2 版本製作。

問題是，之前工作專案有用過 Vue，但環境不是我弄的，在更以前的練習是用 Vue CLI 3，連 webpack 都不用碰，所以光是版本 2 的環境就搞了一下午，厭世。索性就整理一下坑，讓有相似需求的同行參考。以下是會講的內容：

1. Vue CLI 2 安裝
2. router 處理
3. 共用 component header
4. 共用 SCSS Variables

初探 Vue CLI 2


Vue CLI 2 安裝：

npm install -g vue-cli
yarn global add vue-cli


Vue CLI 3 安裝：

npm install -g @vue/cli
yarn global add @vue/cli


啟用 Webpack，後面專案名稱自取：

vue init webpack analyze-robot


接著它會問你要安裝那些東西，如 vue-router、ESLint 標準、unit test、e2e、npm，看你需要哪些，反正之後要用也可以自己裝。

結束後，就可以切換到該專案，輸入： npm run dev 就可以開發了。

Router 怎麼寫


專案結構。

先看看我的專案結構後，直接上程式碼比較快：


# 以 question 為例
# Question.vue

<template>
  <div>
    <router-link to="/">首頁連結</router-link>
  </div>
</template>

<script>
export default {
  name: 'Question',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

# router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Header from '@/components/Header'
import Home from '@/components/Home'
import Question from '@/components/Question'

Vue.use(Router)

export {
  Header
}

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/question',
      name: 'Question',
      component: Question
    }
  ]
})

在 index.js 設定完後，就能引用 router 了。

Component 共用


以經常共用的 Header 為例：


# 我直接放在 App.vue 這隻程式裡，所以每個 component 上方都能看見 Header
# App.vue

<template>
  <div id="app">
    <Header></Header>
    <router-view/>
  </div>
</template>

<script>
import Header from './components/Header'
export default {
  name: 'App',
  components: {
    Header
  }
}
</script>

共用 SCSS Variables


SCSS 安裝：

npm install sass-loader@7.3.1 sass-resources-loader node-sass --save-dev

sass-loader 若安裝更高版本會報錯，所以建議 7.3.1 版本。



接著是我研究最久的 SCSS 共用，用那麼久是因為弄錯版本了，如果是 Vue CLI 3，只需要：


# 在 build/webpack.base.conf.js 設定就好

{
    test: /\.(sass|scss)$/,
    use: [
        'vue-style-loader',
        'css-loader',
        'postcss-loader',
        {
            loader: 'sass-loader',
            options:{
                data: `@import "./src/styles/global/_mixin.scss";`
            }
        }

    ]
},

如果是 Vue CLI 2，就有幾個地方要設定：



# 要在 build/util.js 中的 exports.cssLoaders 裡添加 function

  function resolveResource(name) {
    return path.resolve(__dirname, '../src/styles/global/' + name);
  }
  function generateSassResourceLoader() {
    var loaders = [
    cssLoader,
    'sass-loader',
    {
      loader: 'sass-resources-loader',
      options: {
      resources: [
        resolveResource('_mixins.scss'),
        resolveResource('_variables.scss'),
        resolveResource('_normalize.scss')
      ]
      }
    }
    ];
    if (options.extract) {
      return ExtractTextPlugin.extract({
      use: loaders,
      fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

# 下方的 sass 與 scss 的 return 要修改成：
...
...
sass: generateSassResourceLoader(),
scss: generateSassResourceLoader(),
...
...

教學到這裡告一段落。所以，可以共用的 style 會放在全域裡，而無法共用的，其實可以直接寫在 component 裡面就好，反正只會用一次。


閱讀量次



聯絡與合作


有文字採訪、網站開發，或是諮詢需求，皆可至個人網站參考作品，並聯繫 IG。

或是想分享心情、聊聊天、交朋友，可以來秘密通道找我唷。

Email: frank@siddharam.com

訂閱：