VuePress(v1.x) Boilerplate

VuePress starter template for web site.

VuePress version v1.x

Preparation

vue-cli を使ってダウンロードできるようになっているので、もしなかったらグローバルインストールしてください。
(普段通りにクローン、ダウンロードとかでもいいです)

  $ npm i -g @vue/cli @vue/cli-init
  # OR
  $ yarn global add @vue/cli @vue/cli-init

Usage

  $ vue init cixocs/vuepress-boilerplate {my_project_name}
  $ cd {my_project_name}
  $ yarn install
  $ yarn dev

[Prerequisites]

• Node.js 10+
• Yarn Classic (Optional)*

*If your project is using webpack 3.x, you may notice some installation issues with npm. In this case, we recommend using Yarn.

reference by Getting Started - Prerequisites | VuePress

Note

1. pug 記法使えます。

2. ress (modern reset css)でブラウザ CSS をリセットさせてます。

3. autoplefixer, @babel/preset-env のお気持ち程度に設定しています。browserslist は package.json に含めているので必要なら適宜変更してください。

4. prettier, eslint も一応入れていて、vscode 限定で*.vue, *.js, *.stylを保存時などにオートフォーマットします。

   VSCodeプラグインをインストールして適用する必要があります！
   extensions.json 置いてあるので VSCode 上でアテンション出ると思います

5. VuePress プラグインについて
   以下の plugin をデフォルトでインストールするようにしています。
   基本コメントアウトして適用しないようにしているので、必要であれば使ってください。

   • @goy/vuepress-plugin-svg-icons（デフォルトで有効）
     svg-sprite-icon を使用できるようにするプラグインです。詳細はリンク先へ。

     yarn svgoで svgo を実行できるのですが、src/.vuepress/config.js内の plugins 箇所でこのプラグインが適用されてないといけないので注意！

   • @vuepress/plugin-google-analytics
     インストール時にプロンプトで必要かどうか聞かれるので "Y/n" で答えてください。
     vuepress 公式のプラグインです。詳細はリンク先へ。

6. GLSL 使いたいかもってときもあるかもしれないので、プロンプトで webpack-glsl-loader が必要かどうか聞かれるようにしてます。なので、任意でどうするか決めてください。

7. seo 関連の meta タグについて
   [LP のとき]：src/.vuepress/config.js内の head 箇所に追加しとけば良さそう。

   [複数ページサイト]：各ページの*.mdファイルに Frontmatter で追加する感じでいいかも。

8. vetur の path mapping について
   ./src/*, ./src/.vuepress/*, ./src/.vuepress/components/*,以下のものをデフォルトとして登録している。
   （たぶんフォルダと*.vue, *.jsくらいまでしか候補に出してくれない？っぽい...）

   [追加手順]

   • ./src/.vuepress/config.jsのwebpack aliasに任意のパスを追加する。
   • ailiasにそってjsconfig.jsonのcompilerOptions pathsにパスを追加。

9. jsconfig.json で ts syntax error でたときの対処法
   VSCode の BuildIn の TypeScript プラグインがなんか悪さしてるっぽいのはわかった。

   • VSCode を再起動してみる。（キャッシュの可能性）
   • なにかコードファイル開いている状態で、コマンドパレットからTypeScript : Restart TS server を実行してみる。

10. canonical url について
    1.7.1+ から Frontmatter で canonicalURL の設定が追加されたみたい。
    なにか特別なことしない限りは .md ファイルに記述する方針で良さそう。

License

MIT License