Parcel+VueJS環境づくりまで(.vueファイル使用)


もう古いので

https://qiita.com/rururu3/items/ba58f5538804186a6d76
こっちみてね


https://qiita.com/rururu3/items/3a90858844e7b2a90e42
を書いた後、しばらくしてまた調べてみたら.vueファイル使えるっぽいので構築までしてみたら出来た。

parcelとは

https://parceljs.org/
コンフィグ無しでウェブアプリケーション作ろうぜ・・・って言う感じのビルドツール

環境構築

npm install --save-dev babel-preset-env parcel-bundler parcel-plugin-vue vue

各種ソース

package.json
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel index.html",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-env": "^1.6.1",
    "parcel-bundler": "^1.2.1",
    "parcel-plugin-vue": "^1.4.0",
    "vue": "^2.5.13"
  }
}
.babelrc
{
    "presets": ["env"]
}
index.html
<html>
<body>
  <div id="app"></div>
  <script src="./index.js"></script>
</body>
</html>
index.js
import Vue from 'vue/dist/vue.esm.js';
import MyApp from './MyApp.vue';

new Vue({
  el: '#app',
  components: {
    MyApp,
  },
  template: '<my-app></my-app>',
});
MyApp.vue
<template>
  <div>
    {{ title }}
  </div>
</template>

<style>
</style>

<script>
  export default {
    data() {
      return({
        title: 'Hello World',
      });
    },
  }
</script>

結果

感想

.vue出来たから、次作るものから移行しようかな

置き場