Bulid Vue project from start

我最近看到從零開始建立 Vue 專案的文章。頗有趣的。只是我不懂為什麼要叫開發環境......所謂的「開發環境」，難道不是指如何把編輯器弄成自己喜歡的樣子之類的嗎？

總之幾點筆記：

vue-cli 的基礎就是 webpack：這玩意就是可以把各種想得到的東西，都用 webpack 包在一起：HTML、CSS、JavaScript、JPG、OGG、AVI......各種東西，只要想得到，都能包起來。怎麼做到把東西湊在一起的？就是靠 loader。

而在 .vue 檔案可以這麼寫：template lang="pug" 然後用 pug 把程式寫出來——這背後的原理正是 vue 使用 pug-loader 解析用 pug 寫出來的程式。因此，要用 pug 的話，必須事先裝好 pug-loader。其他處理器也是一樣。

開發時我碰上一個 Module build failed: Unknown word 的問題：

ERROR in ./src/components/...
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(2:1) Unknown word

看了无法读取css文件才發現 webpack 撰寫的 loader 順序，也會影響 webpack 的處理順序。我看了一下順序：

use: [
    "postcss-loader",
    "style-loader",
    "css-loader",
],

再按照網頁說明改的話：

use: [
    "style-loader",
    "css-loader",
    "postcss-loader",
],

就成功了。雖然有點詭異就是了。

Reference: