15
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-12-21

もう古いので

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>

結果

image.png

感想

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

置き場

15
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?