vue.js hello world - Githubissues

akinoriosamura commented 6 years ago

公式ドキュメント https://jp.vuejs.org/v2/guide/#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB

akinoriosamura commented 6 years ago

vue-cliはインストール済とする

vue init webpack vue_sample01 NPMの代わりにYarnを使う以外は全てデフォルト

cd vue_sample01/ yarn dev http://localhost:8080

vi src/router/index.js -- vi --

import Top from '@/components/Top'
...
      path: '/',
      name: 'Top',
      component: Top

-- /vi --

環境変数定義

vi config/dev.env.js -- vi --

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_URL: '"https://rails-api-sample01-stg.herokuapp.com/"'
})

-- /vi --

vi src/components/Top.vue -- vi --

<template>
  <div class="top">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'Top',
  data () {
    return {
      msg: process.env.API_URL
    }
  }
}
</script>

-- /vi --

akinoriosamura commented 6 years ago

コンパイル

普通はwebpackとかｂなんとかとかを使っているようです。今回もそれを使っています。それをNODE_ENV=testing yarn build　とか NODE_ENV=production yarn build　とかすることで各環境の静的ファイルにコンパイル

Vue.jsはコーディングの仕方によって、プリコンパイルとJIT（Just in time)コンパイルと２種類あるようですが、今回は<template＞を使っているのでプリコンパイル http://www.aocomme.com/entry/2017/03/08/213000 └vueの始める上で重要 Vue+VuexでMVVMなWebApplicationを設計するときに考えたいこと https://aloerina01.github.io/javascript/vue/2017/08/29/1.html

akinoriosamura / QaAppServer

vue.js hello world #28

環境変数定義

コンパイル