Vue CLI 3での開発環境を作るの基礎の基礎
Vueをやりたかったので、調べたことをメモします。
Vue CLI 3になり、ファイル交際やコマンドなども結構変更になっているようです。
準備
Vue CLI 3を利用して開発環境を準備します。
vue-cliをインストール
npm install -g @vue/cli
プロジェクトを作成
プロンプトへ回答しながらプロジェクトを作成します。
vue create {プロジェクト名}
ちなみにndenvを利用していたせいかわからないのですが、vueコマンドを実行時にエラーになりました。
vue: command not found
PATHの設定をしたらエラーは出なくなりました。
source ~/.bash_profile
Q Use history mode for router? (Requires proper server setup for index fallback in production
YES ・・・ HTML5 Mode NO ・・・Hashbang Mode
Q Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection
)
Lint機能の実行タイミング。
◉ Lint on save ・・・保存時のLint実行 ◯ Lint and fix on commit ・・・コミット時のLint実行
Q Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
Babel、PostCSS、ESLintなどの設定をどこで行うか。
❯ In dedicated config files・・・それぞれの設定ファイルで管理 In package.json ・・・package.jsonで管理
Q Save this as a preset for future projects?
設定内容を保存するか。
GUIでプロジェクトを作成
VueにはGUIでvueプロジェクトが作成できる機能があります。
以下のコマンドで、GUIを起動することができます。
vue ui
プロジェクトを起動
cd {プロジェクト名} npm run serve
基本構成
特に、カスタムしなければ以下のようなファイル構成になります。 publicに静的ファイルを配置するようです。 srcはコンパイルして利用するファイル群になります。
. ├── README.md ├── babel.config.js ├── node_modules ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src ├── App.vue ├── assets │ └── logo.png ├── components │ └── HelloWorld.vue └── main.js
public/index.html
起点となるhtmlです。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>sample</title> </head> <body> <noscript> <strong>We're sorry but sample doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
main.js
アプリケーションを起動する為のファイルです。
Vueアプリケーションはnew Vue()
でインスタンスを作成することによって起動されます。
import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App) }).$mount('#app')
render: h => h(App)
vueコンポーネントを描画する。 hにはcreateElement
が渡される。
render: h => h(App)
は以下と同じ。
render: function (createElement) { return createElement(App); }
アロー関数で省略して書いている。
Vue.config
Vue.config
はVueのグローバル設定を含むオブジェクトらしいです。
詳しくは公式ドキュメントを参照してください。
App.vue
アプリケーションのルートコンポーネントです。 基本的にはここから触っていきます。
<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ファイルの中身を外部ファイルに分割します。
<template src="./App.html"></template> <style lang="scss" src="./App.scss"></style> <script src="./App.js"></script>
webpackをつかう
Vue cli 3で作成されたプロジェクトはwebpackがデフォルトになります。
しかし、webpack.config.jsがプロジェクトファイル内に見当たりません。
代わりにvue.config.js
を作成しルートにおくことで、 書かれた内容がwebpackの設定ファイルにマージされるようです。
詳しい内容は公式ドキュメントを参照してください。