vueのコンポーネント化

vueの記事をポツポツ上げてきましたが、コンポーネント化した書き方に関して。

既存のvueの記事

今まではCDNで読み込んだり、HTMLの中に直接vueを入れてきましたが、コンポーネント化することで、vueのロジック、テンプレート、スタイルを切り分けることが可能になります。

ファイル構成

├── dist
│   └── build.js
├── index.html
├── package-lock.json
├── package.json
├── src
│   ├── CheckPref.vue
│   ├── app.js
│   ├── js
│   │   └── checkpref.js
│   └── template
│       └── checkpref.html
└── webpack.config.js

├── dist

│ └── build.js

├── index.html

├── package-lock.json

├── package.json

├── src

│ ├── CheckPref.vue

│ ├── app.js

│ ├── js

│ │ └── checkpref.js

│ └── template

│ └── checkpref.html

└── webpack.config.js

src/app.js

エントリーポイントとなるJavaScriptで役割としては

npmで管理されたモジュールの読み込み
vue自体のコンポーネントの読み込み

などです。

import Vue from 'vue'
import axios from 'axios';
//読み込見たいvueのコンポーネント
import checkPref from './CheckPref.vue'

window.$ = window.jQuery = require('jquery');
window.Vue = Vue
window.axios = axios
Vue.component('pref-component', checkPref)

new Vue({
    el:'#app'
})

import Vue from 'vue'

import axios from 'axios';

//読み込見たいvueのコンポーネント

import checkPref from './CheckPref.vue'

window.$ = window.jQuery = require('jquery');

window.Vue = Vue

window.axios = axios

Vue.component('pref-component', checkPref)

new Vue({

el:'#app'

})

src/CheckPref.vue

ここがvueのコンポーネント自体になります。

コンポーネント自体をここでファイル分割してまとめています。

小規模なものだったら読みこまずにここでやってしまった方がいいかもしれません・・・

<template src="./template/checkpref.html"></template>
<script scoped src="./js/checkpref.js">

1 2	<template src="./template/checkpref.html"></template> <script scoped src="./js/checkpref.js">

htmlは普通のhtmlにvueを読みこませればOKです。

src/js/checkpref.js

実際のvueの処理を書くところです。

export default {
  name: 'App',
  methods:{
     func1(){
        //何らかの入れたい処理を書きます。
     }
  },
  data(){
    return {
       prefs:['東京','千葉', '神奈川']
    }
  }
}

export default {

name: 'App',

methods:{

func1(){

//何らかの入れたい処理を書きます。

}

data(){

return {

prefs:['東京','千葉', '神奈川']

}

index.html

コンポーネント化したvueを読み込むhtmlです。

<html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>vue</title>
</head>
<style type="text/css">
[v-cloak] {
  display: none;
}
</style>
<body>
	<div id="app" v-cloak>
        <pref-component></pref-component>
    </div>
<script src='./dist/build.js'></script>
</body>
</html>

<html>

<head>

</head>

[v-cloak] {

display: none;

}

</style>

<body>

<pref-component></pref-component>

</div>

</body>

</html>

webpack.config.js

const VueLoaderPlugin = require('vue-loader/lib/plugin')

var src =  __dirname + '/src';  // ソースディレクトリ
var dest = __dirname + '/dist'; // 出力先ディレクトリ

module.exports = {
  mode: 'development',
  //読み込みファイル
  entry: src + '/app.js',
  //出力ファイル
  output: {
    path: dest,
    filename: 'build.js'
  },
  //コンパイルするときにモジュールが必要な場合
  //ここに記述
  module: {
    rules: [
      {
        //vueとい拡張子ファイルに対して
        //vue-loaderを使うよという意味
        test: /\.vue$/,
        loader: "vue-loader"
      }
    ]
  },
  //これがないと→のエラーがでる[Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
  resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
      }
  },
  //template使うにはこれ入れないとだめ
  plugins: [
    new VueLoaderPlugin()
  ]
}

const VueLoaderPlugin = require('vue-loader/lib/plugin')

var src = __dirname + '/src'; // ソースディレクトリ

var dest = __dirname + '/dist'; // 出力先ディレクトリ

module.exports = {

mode: 'development',

//読み込みファイル

entry: src + '/app.js',

//出力ファイル

output: {

path: dest,

filename: 'build.js'

//コンパイルするときにモジュールが必要な場合

//ここに記述

module: {

rules: [

{

//vueとい拡張子ファイルに対して

//vue-loaderを使うよという意味

test: /\.vue$/,

loader: "vue-loader"

}

]

//これがないと→のエラーがでる[Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

resolve: {

alias: {

'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1

}

//template使うにはこれ入れないとだめ

plugins: [

new VueLoaderPlugin()

]

}

参考URL

https://github.com/umanari145/vue