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

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
73
Help us understand the problem. What is going on with this article?
@magaya0403

vue-cliでVue.jsをインストールしたときのファイルについて

More than 3 years have passed since last update.

vue-cliでインストールを行うとVue.jsの環境をものすごく簡単に構築できます。構築できるのは良いのですが、やはり中身を知っておいた方が良いと思うので、どの様なファイルができるのか簡単に書いていきます。

Vue.jsのインストール

公式に書いてある通り、vue-cliを使うのが一番簡単です
https://jp.vuejs.org/v2/guide/installation.html

$ npm install --global vue-cli
$ vue init webpack test-project
? Project name test-project
? Project description A Vue.js project
? Author xxxxxxxxxxxxxxxxx
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

   vue-cli · Generated "test-project".

   To get started:

     cd test-project
     npm install
     npm run dev

プロジェクトネームの入力や、lint、テストライブラリ(Karma + Mocha)などのインストールを聞かれます。必要であればインストールしてください

$ cd test-project
$ npm install
$ npm run dev

実行すると勝手にブラウザが開いてVue.jsの画面が開くと思います。これだけで準備は完了です。

.
├── README.md
├── build
├── config
├── index.html
├── node_modules
├── package.json
├── src
└── static

それぞれのディレクトリ構成

src

src/
├── App.vue
├── assets
│   └── logo.png
├── components
│   └── Hello.vue
├── main.js
└── router
    └── index.js

ここに編集するvueのファイルを置いていきます。
最初期だと単一ファイルコンポーネントでの書き方になっています。

build

webpackの設定やserverの設定ファイルが置かれています。

build/
├── build.js
├── check-versions.js
├── dev-client.js
├── dev-server.js
├── utils.js
├── vue-loader.conf.js
├── webpack.base.conf.js
├── webpack.dev.conf.js
└── webpack.prod.conf.js
  • build.js
    • npm run buildを実行したするときに参照されるファイル
  • dev-server.js
    • npm run devを実行したするときに参照されるファイル
  • webpack.xxxx
    • ビルドツールであるwebpackの設定ファイル
    • これでvue.jsのファイルをビルドしています

config

config/
├── dev.env.js
├── index.js
└── prod.env.js

その名の通り設定ファイルです。
ポートの指定などもこのディレクトリのindex.jsで行っています。

Vue.jsの動作の流れ

npm run dev

npm run devを実行するとindex.htmlに自動でapp.jsが読み込まれるようになっている。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test-project</title>
  </head>
  <body>
    <div id="app"></div>

    <!-- これが自動で挿入されている -->
  <script type="text/javascript" src="/app.js"></script></body>
</html>

build/webpack.dev.conf.jsに記載されている。HtmlWebpackPluginというもので設定されている。

build/webpack.dev.conf.js
new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true
}),

inject: trueを設定するとリソースを全て読み込むようになる。
./src/main.jsを読み込む設定は、build/webpack.base.conf.jsに記載してある。

main.js

main.js
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})
index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test-project</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Vueの新しいインスタンスを作成している。elにappを設定しているので、index.html内のdivタグにマウントされる。

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

拡張子が.vueになっているのは単一ファイルコンポーネントの記法です。
<template>にhtmlを、<script>にjavascriptを、<style>にcssをそれぞれ一ファイルに書くようになっています。

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
  ]
})

App.vueでrouterが読み込まれています。
パスが/のときはそのままHelloのコンポーネントが読み込まれることになっているので、components/Hello.vueが読み込まれます。

components/Hello.vue

※必要な部分のみ抜粋

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

dataで持っているmsgの値を表示しているだけです。

vue-cliを使うとインストールがめちゃくちゃ簡単

簡単なんだけど中身の動作を知っている方が問題が起きたときに対処しやすいと思います。僕もwebpack周りはあまり素で触ったことがないので、これを機に少しいじってみようかと思いました。

73
Help us understand the problem. What is going on with this article?
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

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
73
Help us understand the problem. What is going on with this article?