TypeScriptとSASSを使うVue.jsの開発環境を作成する。

TypeScriptとSASSを使うVue.jsの開発環境を作成する。

前提

• nodeがインストール済みである。
• npmコマンドをなんとなく知っている。
• なんとなく、vue.jsを知ってる。（https://www.youtube.com/watch?v=mZY1yyrlJWUのシリーズを見ておくといいかも）

早速やる

ライブラリのインストール

sassはタグに設定するだけで使えるようになるので、TypeScriptだけインストールする。

# とりあえず、 vue-cliをインストールする
$ npm i -g vue-cli

# webpackペースのプロジェクトを作成する
$ vue init webpack frontend_src

# typescriptで必要なものをプロジェクトにインストール
$ cd frontend_src
$ npm install
$ npm i -D typescript ts-loader vue-class-component

typescriptの設定

tsconfig.jsonファイルをfrontend_srcに作成して、下のように設定する。

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "module": "es2015",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "target": "es6",
    "lib": ["dom", "es6", "es2015.promise"]
  },
  "include": [
    "./src/**/*.ts"
  ]
}

build/webpack.base.conf.jsを書き換える。

module.exports = {
    entry: {
      // エントリポイントの拡張子を.js→.tsに変更
      app: './src/main.ts'
    },
    output: {
      path: config.build.assetsRoot

// ----- 略 -----

    },
    resolve: {
      // extensionsに'.ts'を追加
      extensions: ['.js', '.vue', '.json', '.ts'],
      // ----- 略 -----
    }

      // test: /\.js$/,の下あたりに追加する
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        include: [resolve('src'), resolve('test')],
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      },

// ----- 略 -----
}

jsファイルをtsファイルにする。

• ./src/main.js を ./src/main.ts
• ./src/router/index.js を ./src/router/index.ts に変更する。

Vueファイルで使用言語を指定する。

• src/App.vueとsrc/components/HelloWorld.vueのscriptタグにlang="ts"を追加する。

App.vue

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  name: 'app'
})
export default class App extends Vue {
}
</script>

HelloWorld.vue

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  name: 'HelloWorld'
})

export default class Hello extends Vue {
  msg = 'Welcome to Your Vue.js App'
}
</script>

<style scoped lang="scss">
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;

  .test {
    font-size: 80px;
  }
}
a {
  color: #42b983;
}
</style>

build結果をAPサーバーのディレクトリにしたかったので、設定する

config/index.js

  build: {
    // これを書き換える
    index: path.resolve(__dirname, '../../public/index.html'),

    // これも書き換える
    assetsRoot: path.resolve(__dirname, '../../public'),

// 略

  }

build出来るか試してみる

# サーバーが自動で立ち上がって画面が表示される。
$ npm run build

起動させてみる

# サーバーが自動で立ち上がって画面が表示される。
$ npm run dev

loaderでエラーになる場合

vue-cliでテンプレートを作成すると、webpack3.x系がインストールされるが、
ts-loaderは自前でインストールしているので4.x系がインストールされます。（2018/3）

ts-loader4.x系はwebpack4.x系で使ってね。webpack3.xで使いたいならts-loaderも3.x系を使ってとREADMEに書いてあるので、
package.jsonを編集して3.x系がインストールされるようにすると、コンパイルが通ります。

やってみて

コンパイルエラーが出てしまったところに詰まったけど、それ以外は結構すんなりできました。

RESTサーバーを作って、fetch apiを使ってデータ通信をしよう。 RESTじゃなくて、GraphQLがいいって話も聞くけど、とりあえずRESTだ。