vue.jsの簡単な始め方。

1642 ワード
Vue.js vue-cli Vue.js テキストリンク

方針

vue単体ではなく、vue-cliからvueが導入済みのプロジェクトを生成する

事前準備

yarnとnpmが入っていることを確認する

yarn -v
npm -v

vue-cliを導入する

npm install -g @vue/cli

vue-cliのvueというコマンドで、ディレクトリを作成する

vue create hoge

色々聞かれるけど、全部デフォルト設定でOK

サーバ起動

yarn serve

localhost:8080にアクセスする

こうなればOK

ディレクトリ構造について

- node_modules      # nodeモジュールが入っています
- public            # なんやこれは
- src               # アプリのソースコードが入っています。
  - assets          # 画像とか
  - components      # App.vueから呼ばれるコンポーネント
  - App.vue         # main.jsから呼ばれるvueファイル 
  - main.js         # 最初に実行されるJavaScript
- .gitignore　　　　　 
- babel.config.js
- package.json
- README.md
- yarn.lock