Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@wakky_404

[個人メモ]docker × Vueで開発環境を作る記事を読んで実際に手を動かしてみた

概要

Vue.js、dockerに初めて挑戦する記録です。

1.Docker環境を作る

 参考「ローカルを汚さずdockerを使ってvue.jsの開発環境を作る」
 https://qiita.com/rh_taro/items/ca08b930f704275286a4

 1.Dockerfileを作成する
 2.コンテナイメージをビルドする
 3.イメージからコンテナを起動する
 4.起動確認
 5.コンテナに入りnpm/webpackをインストール
  ・npm→Nodeのパッケージ管理ツール
  ・Webpack→JS,CSSを1つにまとめる
 6.サーバ設定をlocalhostから書き換える
  ・コンテナ内のため書き換えないとアクセスできない
 

2.Vueファイルを概要で把握

 参考「VueCLIからVue.js入門①【VueCLIで出てくるファイルを概要図で理解】」
 https://qiita.com/po3rin/items/3968f825f3c86f9c4e21

 「vue-cliで始めるVue.jsチュートリアル (1)」
 https://qiita.com/sin_tanaka/items/29769266b3b078ea0f7c

 index.html
  webpackでビルドされたデータが注入される。main.js読み込み。
 main.js
  Vueインスタンスが生成される(Vueアプリの起動)。
  dataが持つ値を変更するとビューが再構築される。
 App.vue
  にHTML
  

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
3
Help us understand the problem. What are the problem?