Vue.jsを始めようとすると様々なサイトでVueCLIから始める記事を紹介されてます。 本記事ではインストールして開発環境を作るだけでなく、Vueがどう構築されているか?全体像や関連ツールを含めて説明していきます。
JavaScriptフレームワークでコンポーネントシステムが取り入れられており、Evan Youによって開発されています。近年、小規模から大規模までのサービスがVue.jsに置き換えられていっていますね。
Vue.jsの特徴の1つとしてSPA(SinglePageApplication)を作れることになります。 SPAはHTML/CSS/JavaScriptのみでサイトを構成し、サーバーとの通信を減らせることから非常に高速に動作するようにみえるでしょう。
ただどのフレームワークを扱うにも同じですがメリット・デメリットは存在します。
とはいえ上記の問題はVueの派生であるNuxt.jsやNEXT.jsなどを導入することで一定解決は可能です。私が開発に携わってるPJでも解決できないクリティカルな問題は起こっていません。
Vue.js系統を運用している有名なサイトだと
などもVue.jsで開発されていますね。 サイトを見るとわかりますが通常のサイトと違和感ない作りになっています。 導入前は本番環境で利用できるかどうか不安も覚えますがキチンと運用すれば大丈夫です。
ノードバージョンの要件 Vue CLIにはNode.jsバージョン8.9以上が必要です(8.11.0以降を推奨)。nvmまたはnvm-windowsを使用して、同じマシン上でNodeの複数のバージョンを管理できます。 (参照元:Vue.js)
Vueの開発環境を手早く進めるようVueCLI というツールが提供されています。 これはVueプロジェクトの初期セットアップで導入する環境を簡単につくれるよう提供されています。 例) JavaScript/TypeScriptの選択など
そのため初めにVueCLIをインストールします。
$ npm install -g @vue/cli
次にプロジェクトの作成をします。
$ vue create vue-project
コンソールに選択肢が出てくるので Manually select features を選択します。 defaultを選択すると直ぐに立ち上げはできるのですが、URL設定などが面倒になるので Manually select features で進めていきましょう。
Vue CLI v4.1.1
? Please pick a preset:
> default (babel, eslint)
Manually select features
次に必要なプリセットの選択をします。 Router Vuex CSS-Preprocessorsあたりは選択していたほうが良いでしょう。
Vue CLI v4.1.1
? Please pick a preset: Manually select features
? Check the features needed for your project:
>(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
画面遷移の際にURLを変更しますか?(意訳) 「Y」を押して進みます
Vue CLI v4.1.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
CSSプロセッサーはどれを選びますか? Sass・Lessなど選べるのでプロジェクトに合ったものを選択
Vue CLI v4.1.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
Sass/SCSS (with dart-sass)
> Sass/SCSS (with node-sass)
Less
Stylus
エラーチェックのルールはどれを使いますか?(意訳) 「ESLint with error prevention only」を選択
Vue CLI v4.1.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
Eslint(エラーチェック)のタイミングを選択してください。 保存したとき(Lint on save)を選択
Vue CLI v4.1.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
( ) Lint and fix on commit
最後にBabelとESLintの設定を聞かれるので 「In dedicated config files」を選択しましょう。
Vue CLI v4.1.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.?
> In dedicated config files
In package.json
コンソールが完了するとインストールが完了します非常に簡単ですね。 次に雛形がインストールされていることを確認するために立ち上げを行います。
$ npm run serve
DONE Compiled successfully in 2515ms 15:19:27
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.2.111:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
コンソールに表示されているURL にアクセスし表示できればインストールは完了です。
さてインストールは無事できました、これからVueCLIで作られたフォルダ構成を簡単に説明していきます。
フォルダ | 概要 |
---|---|
node_modules | リクエストを実行(デフォルトはGET) |
public | 画像などサイトに必要なリソースファイルを配置 |
src | ソースコードのフォルダ、開発に必要なのはここに記述 |
.gitignore | gitに含めないディレクトリ |
babel.config | babelの設定 |
package.json | 関連パッケージやスクリプトの定義 |
package-lock.json | インストールパッケージのバージョン定義 |
先ほどのnpm run serve
などのコマンドはpackage.json
内に記述されています。
いろいろフォルダ出てきましたが重要なのはsrcフォルダです。カスタマイズをしなければsrcだけ見ていれば大丈夫です。
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
main.jsはHTMLが表示されてから一番初めに実行されるjsファイルです。 Vueインスタンスの作成を行い id=’app’ でVue.jsを動作させるよう定義しています。 Storeやルーティング定義先の定義もmain.jsで指定されています。
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
<style lang="scss">
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
拡張子が.vueになっているのが特徴でVue単一のコンポーネントファイルです。 <template>
にhtmlを、<script>
にjavascriptを、<style>
にcssを1つのファイルに記述します。1ファイルで完結してるため独立したコンポーネントが作りやすくなっています。
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
VueプロジェクトのURL設定(ルーティング)を行うファイルです。
http://localhost:8080/
にアクセスして表示されるページが ../views/Home.vue
http://localhost:8080/about
にアクセスして表示されるページが ../views/About.vue
と定義されていることがわかりますね。 記述の違いはコメントでも書いている通り、jsを分割し遅延ロードさせるかの設定するかどうかの違いです。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
Vueの状態管理を行うファイルです。 コンポーネントでは値の受け渡しに制限がありますが、Store内ではコンポーネントを超えたり、画面遷移しても値が引き継がれます。便利ですが使う場面を設計しないと辛いコードが出来上がります。
以上でVueCLIを使ったPJの概要の説明を終わります。公式サイトに書いてないことは無いほど充実しているので慣れてきたら一度全部目を通すことをお薦めします。