least_alone

ひとりごと。

vue-cliで作成したテンプレートでpug,scss,coffeescriptを使用する

概要

基本はvue-cliでテンプレートを作成してそれをいじいじしていきます。
生のhtmlなんて見てるの苦痛なのでPug(旧Jade)とSCSSとCoffeeScriptで楽しようかなぁって感じ

僕はWeb屋の人間ではないからモダンっていうとvueかな〜ってふわっとした感じで決めました。

手順

みんなnpmとかyarnって何?とか言わないよね

とりあえず下ごしらえをゴリゴリしていきます。
Githubリポジトリを作ってとりあえずcloneしてきた(&cdした)段階

雛形作成

$ vue init webpack .

? Generate project in current directory? Yes
? Project name sometrouble.net
? Project description In solitude, where we are least alone.
? Author @sometrouble
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) yarn

pug, scssの有効化

$ yarn install
$ yarn add pug-html-loader node-sass sass-loader --dev

なんとこれだけでpug+scssが使用可能!しゅごい…

coffeescriptの有効化

$ yarn add coffeescript coffee-loader babel-preset-env --dev

build/vue-loader.conf.jsの書き換え

長いけどそのままシェルにコピペしてください。(うまく行かなかったら後述の参考文献を見つつ手作業で)

sed -i '/  : config.dev.cssSourceMap/,/  cssSourceMap: sourceMapEnabled,/c\  : config.dev.cssSourceMap \
 \
const loaders =  utils.cssLoaders({ \
  sourceMap: sourceMapEnabled, \
  extract: isProduction \
}) \
 \
loaders.coffee = { \
  loader: "coffee-loader", \
  options: { \
    sourceMap: true, \
    transpile: { presets: ["env"]} \
  } \
} \
 \
module.exports = { \
  loaders: loaders, \
  cssSourceMap: sourceMapEnabled,' ./build/vue-loader.conf.js

処理の記述&表示確認

ここまで来たらあとはゴリゴリ書いていくだけ
試しにサンプルを書き換えてみましょうか。

src/App.vue

<template lang='pug'>
  div#app
    router-view
</template>

<script lang='coffee'>
export default
  name: 'App'
</script>

<style lang='scss'>
body {
  background-image: url(https://i.gyazo.com/23e4de1e8ff9efdb69db72448386b622.png); 
  background-position: center center; 
  background-repeat: no-repeat;
  background-attachment: fixed; 
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}
</style>

src/components/HelloWorld.vue

<template lang='pug'>
h1.hello {{url}}
</template>

<script lang='coffee'>
export default 
  data: () ->
    url: 'https://www.hellowork.go.jp/'
</script>

<style lang='scss' scoped>
.hello {
  margin-top: 50vh;
}
</style>

実行

開発用ローカルサーバの立ち上げ

$ yarn run dev

実行結果

f:id:sometrouble:20180703062328p:plain

ちゃんと成功していますね!
あとはひたすら書いて書いて書きまくるだけです!イェイ!

本番用にファイルを書き出すには、

$ yarn run build

でdist以下に出力することができます〜

以上!

参考文献

vue-cli 2.9.1 でのpug + sass環境構築

vue-client + CoffeeScript 2.0