最初のコミット

Author: kaorun343

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_size = 2

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "vue-typescript-example-2",
+  "version": "1.0.0",
+  "description": "",
+  "main": "main.js",
+  "scripts": {
+    "build": "webpack",
+    "watch": "webpack --watch"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "tslib": "^1.2.0",
+    "vue": "^2.1.3",
+    "vue-class-component": "^4.3.1",
+    "vue-property-decorator": "^3.2.0",
+    "vue-router": "^2.1.0",
+    "vuex": "^2.0.0"
+  },
+  "devDependencies": {
+    "extract-text-webpack-plugin": "^2.0.0-beta.4",
+    "html-webpack-plugin": "^2.24.1",
+    "ts-loader": "^1.2.2",
+    "typescript": "^2.1.1",
+    "vue-template-compiler": "^2.1.3",
+    "vue-template-loader": "^0.1.2",
+    "webpack": "^2.1.0-beta.27"
+  }
+}

src/Form/Form.template.html

@@ -0,0 +1,16 @@
+<modal @close="cancel" title="メッセージを書く">
+  <template slot="body">
+    <div class="form-group">
+      <label for="title">タイトル</label>
+      <input type="text" class="form-control" id="title">
+    </div>
+    <div class="form-group">
+      <label for="message">メッセージ</label>
+      <textarea class="form-control" id="message" rows="4"></textarea>
+    </div>
+  </template>
+  <template slot="footer">
+    <button class="btn btn-secondary" @click="cancel">キャンセル</button>
+    <button class="btn btn-primary" @click="save">保存する</button>
+  </template>
+</modal>

src/Form/Form.ts

@@ -0,0 +1,19 @@
+import * as Vue from 'vue'
+import Component from 'vue-class-component'
+import * as template from './Form.template.html'
+import Modal from '../modal/modal'
+
+@Component(template<Form>({
+  components: {
+    Modal
+  }
+}))
+export default class Form extends Vue {
+  title = ''
+
+  save() {}
+
+  cancel() {
+    this.$router.back()
+  }
+}

src/Home/Home.template.html

@@ -0,0 +1,12 @@
+<div>
+  <jumbotron></jumbotron>
+  <div class="container">
+    <h2>これまでに寄せられたメッセージ</h2>
+    <div class="card card-block" v-for="massage in messages">
+      <div>{{ message.date }}</div>
+      <h4>{{ message.title }}</h4>
+      <p class="card-text">{{ message.message }}</p>
+    </div>
+  </div>
+  <router-view></router-view>
+</div>

src/Home/Home.ts

@@ -0,0 +1,13 @@
+import * as Vue from 'vue'
+import Component from 'vue-class-component'
+import * as template from './Home.template.html'
+import Jumbotron from '../jumbotron/jumbotron'
+
+@Component(template<Home>({
+  components: {
+    Jumbotron
+  }
+}))
+export default class Home extends Vue {
+  messages = []
+}

src/Links/Links.template.html

@@ -0,0 +1 @@
+<div></div>

src/Links/Links.ts

@@ -0,0 +1,8 @@
+import * as Vue from 'vue'
+import Component from 'vue-class-component'
+import * as template from './Links.template.html'
+
+@Component(template({}))
+export default class Links extends Vue {
+  links = []
+}

src/Settings/Settings.template.html

@@ -0,0 +1 @@
+<div></div>

src/Settings/Settings.ts

@@ -0,0 +1,6 @@
+import * as Vue from 'vue'
+import Component from 'vue-class-component'
+import * as template from './Settings.template.html'
+
+@Component(template({}))
+export default class Settings extends Vue {}

src/index.template.html

@@ -0,0 +1,4 @@
+<div>
+  <navbar></navbar>
+  <router-view></router-view>
+</div>

src/index.ts

@@ -0,0 +1,13 @@
+import * as Vue from 'vue'
+import * as template from './index.template.html'
+import router from './router'
+import Navbar from './navbar/navbar'
+
+const vm = new Vue(template({
+  components: {
+    Navbar
+  },
+  router
+}))
+
+vm.$mount('#app')

src/jumbotron/jumbotron.template.html

@@ -0,0 +1,17 @@
+<div class="jumbotron jumbotron-fluid">
+  <div class="container">
+    <h1 class="display-3">Happy Birthday!!</h1>
+    <p class="lead">12月4日は香風智乃の誕生日です。</p>
+    <hr class="my-2">
+    <p>
+      <span v-if="!isBirthday">今日は{{ today }}ですが</span>
+      <span v-else>今日は{{ today }}、誕生日当日です！！</span>
+      <span>メッセージを書いてみましょう！</span>
+    </p>
+    <p class="lead">
+      <router-link class="btn btn-primary btn-lg" :to="{ name: 'new' }" role="button">
+        メッセージを書く
+      </router-link>
+    </p>
+  </div>
+</div>

src/jumbotron/jumbotron.ts

@@ -0,0 +1,20 @@
+import * as Vue from 'vue'
+import Component from 'vue-class-component'
+import * as template from './jumbotron.template.html'
+import { zero } from '../util'
+
+function format(y: number, m: number, d: number) {
+  return `${y}年${zero(m)}月${zero(d)}日`
+}
+
+const today = new Date()
+const year = today.getFullYear()
+const month = today.getMonth() + 1
+const date = today.getDate()
+
+@Component(template<Jumbotron>({}))
+export default class Jumbotron extends Vue {
+  today = format(year, month, date)
+
+  isBirthday = month === 12 && date === 4
+}

src/modal/modal.template.html

@@ -0,0 +1,19 @@
+<div>
+  <div class="modal fade in" style="display: block;">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button class="close" @click="close"><span aria-hidden="true">&times;</span></button>
+          <h4 class="modal-title">{{ title }}</h4>
+        </div>
+        <div class="modal-body">
+          <slot name="body"></slot>
+        </div>
+        <div class="modal-footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="modal-backdrop fade in"></div>
+</div>

src/modal/modal.ts

@@ -0,0 +1,13 @@
+import * as Vue from 'vue'
+import { Component, prop } from 'vue-property-decorator'
+import * as template from './modal.template.html'
+
+@Component(template({}))
+export default class Modal extends Vue {
+  @prop({type: null})
+  title: string
+
+  close() {
+    this.$emit('close')
+  }
+}

src/navbar/navbar.template.html

@@ -0,0 +1,16 @@
+<nav class="navbar navbar-light bg-faded">
+  <router-link class="navbar-brand" :to="{name: 'home'}">
+    Vue.jsとTypeScriptのサンプル2
+    </router-link>
+  <ul class="nav navbar-nav">
+    <router-link tag="li" :to="{name: 'home'}" class="nav-item">
+      <a class="nav-link">ホーム</a>
+    </router-link>
+    <router-link tag="li" :to="'/links'" class="nav-item">
+      <a class="nav-link">リンク一覧</a>
+    </router-link>
+    <router-link tag="li" :to="'/settings'" class="nav-item">
+      <a class="nav-link">設定</a>
+    </router-link>
+  </ul>
+</nav>

src/navbar/navbar.ts

@@ -0,0 +1,6 @@
+import * as Vue from 'vue'
+import Component from 'vue-class-component'
+import * as template from './navbar.template.html'
+
+@Component(template({}))
+export default class Navbar extends Vue {}

src/router.ts

@@ -0,0 +1,24 @@
+import * as Vue from 'vue'
+import * as VueRouter from 'vue-router'
+
+import Form from './Form/Form'
+import Home from './Home/Home'
+import Links from './Links/Links'
+import Settings from './Settings/Settings'
+
+Vue.use(VueRouter)
+
+export default new VueRouter({
+  routes: [
+    {
+      path: '/',
+      component: Home,
+      name: 'home',
+      children: [
+        { path: 'new', component: Form, name: 'new' }
+      ]
+    },
+    { path: '/links', component: Links, name: 'links' },
+    { path: '/settings', component: Settings, name: 'settings' }
+  ]
+})

src/template.d.ts

@@ -0,0 +1,8 @@
+declare module '*.html' {
+  import * as Vue from 'vue'
+  import { ComponentOptions } from 'vue'
+
+  var template: <V extends Vue>(options: ComponentOptions<V>) => ComponentOptions<V>
+
+  export = template
+}

src/util.ts

@@ -0,0 +1,7 @@
+export function toInt(n: number) {
+  return Math.floor(n)
+}
+
+export function zero(n: number) {
+  return ('0' + n).slice(-2)
+}

template.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <title>Vue.jsとTypeScriptのサンプル2</title>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>

tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "noImplicitAny": true,
+    "sourceMap": false,
+    "strictNullChecks": true,
+    "typeRoots": [
+      "./node_modules/@types"
+    ],
+    "lib": [
+      "dom",
+      "es5",
+      "es2015.promise"
+    ],
+    "noEmitHelpers": true,
+    "experimentalDecorators": true,
+    "importHelpers": true
+  }
+}

webpack.config.js

@@ -0,0 +1,24 @@
+const HTMLWebpackPlugin = require('html-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+module.exports = {
+  entry: './src/index.ts',
+  output: {
+    filename: '[name].js',
+    path: './dist'
+  },
+  module: {
+    loaders: [
+      { test: /\.tsx?$/, loader: 'ts-loader' },
+      { test: /\.scss$/, loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader']) },
+      { test: /\.template\.html$/, loader: 'vue-template-loader' }
+    ]
+  },
+  resolve: {
+    extensions: ['.ts', '.js']
+  },
+  plugins: [
+    new HTMLWebpackPlugin({ template: './template.html' }),
+    new ExtractTextPlugin('styles.css')
+  ]
+}