0
1

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 3 years have passed since last update.

vue.jsの簡単な始め方。

Last updated at Posted at 2020-07-04

方針

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にアクセスする

スクリーンショット 2020-07-04 15.52.30.png

こうなれば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
0
1
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
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?