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 裡面就好,反正只會用一次。


閱讀量




技術文章與合作


有網站設計(UI/UX)、平面設計、網站工程外包需求,皆可以來信詢問,在 關於下方 有參考作品。

想定期收到技術文章,或想一起探討前後端程式的朋友,建議加入 line 群組,或是官方帳號,大家可以互相交流,一起學程式,歡迎加入:

Email: aaa24295234@gmail.com

Line 群組:入群組表單邀請

群組為了防止假帳號,不開放用 QR Code 掃描入群,如有需要,可以填寫表單,註記 line ID 告訴我,謝謝。

Line 官方帳號:@184railx

Line 官方帳號 QR Code: