소개

pug, postcss가 어떤 것인지 알기 위해서, vue.js에 도입해 사용해 보았습니다.
이 기사에는 소개하는 부분만 쓰고 있습니다.

vue.js 시작

사전 준비

npm에서 global에 다음 패키지를 설치합니다.
이번에는 vue-cli를 사용하고 싶습니다.

npm install -g vue-cli webpack

vue-cli를 사용하여 시작

우선 vue.js를 사용하고 싶은 사람은 vue-cli 사용하지 않고 만져 보는 것이 좋을지도 모릅니다.
htps : // jp. 아 js. rg/v2/구이데/

vue-cli로 만들 수 있는 template가 4개 정도 있습니다만, 이번은 webpack-simple 를 사용하고 싶습니다.
htps : // jp. 아 js. rg/2015/12/28/ゔ에-cぃ/

우선 template를 가져옵니다.

vue init webpack-simple vue-test-project

이런 느낌의 프로젝트가 만들어졌다고 생각합니다.

- vue-test-project
   |- .babelrc
   |- .gitignore
   |- README.md
   |- index.html
   |- package.json
   |- src
   |- webpack.config.js

npm install하고 빌드 해 봅시다.

npm install
npm run dev

그러면 마음대로 브라우저에서 다음과 같은 페이지가 열릴 것입니다.

pug 사용

pug란?

pug는 HTML을 쉽게 작성할 수있는 사람입니다.
css에서 말하는 sass적인 녀석이라고 생각합니다.

예

<!-- html -->
<div class="hoge">
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
  </ul>
</div>

// pug
  div.hoge
    ul
      li item 1
      li item 2
      li item 3
      li item 4

변수나 루프도 걸리는 것 같습니다.
vue.js 등에서 사용하는 경우 사용할지 모르겠습니다. .

pug 추가

방금 전 프로젝트에 추가합시다.

npm install --save-dev pug

webpack에서 pug를 컴파일 할 수 있도록 pug-loader도 추가합니다.

npm install --save-dev pug-loader

html을 pug로 해보기

설치가 끝나면 실제로 html 부분을 pug로 해 봅시다.
여기서 webpack 설정을 괴롭힐 필요는 없습니다.
vue-loader가 잘 해주고있는 것 같습니다.

./src/App.vue를 엽니다.
다음 template 부분을 다시 씁니다.

<!-- before -->

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div></template>

<!--after -->

<template lang="pug">
  div#app
    img(src="./assets/logo.png")
    h1 {{ msg }}
    h2 Essential Links
    ul
      li: a(href="#" target="_blank") Core Docs
      li: a(href="#" target="_blank") Forum
      li: a(href="#" target="_blank") Gitter Chat
      li: a(href="#" target="_blank") Twitter
    h2 Ecosystem
    ul
      li: a(ref="#" target="_blank") vue-router
      li: a(ref="#" target="_blank") vuex
      li: a(ref="#" target="_blank") vue-loader
      li: a(ref="#" target="_blank") awesome-vue
</template>

빌드하면 같은 화면이 열립니다. (link 대상의 url은 생략하고 있습니다)

npm run dev

PostCSS 사용

PostCSS란?

css의 전처리기입니다.
자신이 좋아하는 플러그인을 조합해 컴파일하므로, 커스터마이즈성이 높다고 생각합니다.
아래의 기사 읽으면 구체적으로 알 수 있다고 생각합니다.
ぃ tp // m / r / ms / 4 a 04 b144 bf49f41d7d
htps : // bg. 미스 th th rt 후오오. 코 m / ぇ b / 20160911 포 stcs

PostCSS 추가

방금 전 프로젝트에 추가합시다.

npm install --save-dev postcss

webpack에서 postcss를 컴파일 할 수 있도록 postcss-loader도 추가합니다.

npm install --save-dev post-loader

우선 이번에는 postcss-custom-properties를 사용하여 변수를 이용할 수 있도록 하고 싶습니다.
htps //w w. 음 pmjs. 코 m / Pac 가게 / Po Stc S - s 및 Mp Roper Chie s

npm install --save-dev postcss-custom-properties

webpack 설정 변경

다음 부분을 다시 작성합시다.

// before

// ~~ 省略 ~~
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // ↓↓↓↓ 修正箇所 ↓↓↓↓
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this nessessary.
            'scss': 'vue-style-loader!css-loader!sass-loader',
            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
          }
            // ↑↑↑↑ 修正箇所 ↑↑↑↑
          // other vue-loader options go here
        }
      },
// ~~ 省略 ~~

// after

// ~~ 省略 ~~
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // other vue-loader options go here
          postcss: [require('postcss-custom-properties')()]
        }
      },
// ~~ 省略 ~~

이 시점에서 빌드해도 아무것도 변하지 않을 것입니다.

PostCSS의 postcss-custom-properties를 사용해보십시오.

실제로 변수를 사용할 수 있는 postcss-custom-properties를 이용해 봅시다.

./src/App.vue를 열고 style 부분을 변경해 봅니다.

/* before */
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

/* after */

<style>
/* -- 追加 -- */
:root {
  --modify-color: red
}
/* --------- */

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: var(--modify-color);    /* 変更 */
}
</style>

--modify-color로 빨간색을 설정하고 a 태그의 color를 --modify-color로 설정하면 링크 색상이 빨간색으로 바뀝니다.

사이고에게

이제 도입이 가능했기 때문에 앞으로 다양한 postcss 플러그인을 이용하면서 vue.js를 만져 가고 싶습니다.