2-1 yarnのインストール
まずは、yarnをインストールし、package.jsonを作成する。
設定に特に制限はないので、何も考えない場合はデフォルトで設定すると良い。
― npmがいいという方はお好みでどうぞ
npm -g install yarn
yarn init
2-2 必要パッケージのインストール
必要なパッケージをインストールする。
yarn add vue@next core-js
yarn add -D @vue/cli-service @vue/compiler-sfc vue-template-compiler
それぞれの役割を以下に説明する。
-
vue
Vueのフレームワーク本体。 -
core-js
クロスブラウザ対応用パッケージ。 -
@vue/cli-service
Vueのビルド用CLI。Webpackのラッパーパッケージ。これに色々なプラグインを足していくことになる。 -
@vue/compiler-sfc
.vueファイルのコンパイラ。主に<template><scripts><style>の3つのタグの分離を担当する。 -
vue-template-compiler
<template>タグ用のコンパイラ。HTML属性内の変数解決などを担当する。
2-3 ビルド用スクリプトの追加
package.jsonに以下の内容を追加する。
package.json
{
...
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
...
}
この状態で一度ビルドを行ってみる。
yarn build
すると、以下のようなエラーが発生する。
ERROR Failed to compile with 1 error 19:10:27
This relative module was not found:
* ./src/main.js in multi ./src/main.js
これはvue-cliはデフォルトでsrc/main.jsをエントリーポイントとしてビルドを行っていることを意味する。
2-4 ビルド可能性の確認
現状、問題なくビルドを行えることを確認するために、src/main.js及びsrc/App.vueを作成する。
src/main.js
import { createApp } from 'vue'
import App from './App'
createApp(App).mount('#app')
src/App.vue
<template>
<div />
</template>
<script>
export default {
name: 'App'
}
</script>
<style scoped></style>
これでもう一度ビルドを行うと問題なくビルドが完了するはずである。
サービスを立ち上げれば、localhostでvueのアプリケーションが立ち上がる。
真っ白なページが表示され、コンソールにエラーが出ていなければ成功である。
yarn build
yarn serve