パーセルを使用したVue.jsアプリの構築
Vue.jsアプリケーションをビルドしてバンドルするための標準的な方法は次のとおりです。 webpack 、そして実際、Vue関連のほとんどすべてがWebpackを使用することを前提としています。 ただし、はを持っていません。 ビルドツールなしでVue.jsを使用することも、代替モジュールバンドラーを使用することもできます。 この時点で、webpackの構成が非常に神秘的な旅になる可能性があるのは冗談ですが、町で唯一の選択肢ではありません。 現在ブロックにいる新しい子供はParcelJSです。 基本的にwebpackと同じ役割を果たしますが、ゼロ構成ツールとして機能します。 依存関係をインストールしてparcel build
を実行するだけで、完全にバンドルされたアプリが出てきます。
それでは、Vue.jsアプリの区画を設定する方法を見てみましょう。
アプリを書く
通常の手順とは対照的に、他の作業を行う前に、先に進んでスケルトンアプリファイルを設定しましょう。
プロジェクトディレクトリに、src
という名前の新しいディレクトリを作成します。 (最終的なファイル構造は次のようになります:)
./my-project
├── package.json // Generate this with `npm init`
├── index.html
├── .babelrc // Babel is needed.
└── src
├── App.vue
└── main.js
典型的な基本的なindex.html
から始めます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Vue.js App</title>
</head>
<body>
<div id="app"></div>
<!-- Note the reference to src here. Parcel will rewrite it on build. -->
<script src="./src/main.js"></script>
</body>
</html>
次に、Vueブートストラップコードを追加します。
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#app',
render: h => h(App)
});
そして今、App
コンポーネント。
<template>
<div id="app">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App!'
}
}
}
</script>
<style lang="css">
#app {
color: #56b983;
}
</style>
.babelrc
も同様に投入してください。
{
"presets": [
"env"
]
}
区画の追加
Parcelの設定は、いくつかの依存関係をインストールするのと同じくらい簡単です。
まず、Vueアプリ自体に必要なものをすべてインストールしましょう。
# Yarn
$ yarn add vue
# NPM
$ npm install vue --save
次に、Vueのプラグインであるparcelとbabel-preset-env
…
# Yarn
$ yarn add parcel-bundler parcel-plugin-vue @vue/component-compiler-utils babel-preset-env -D
# NPM
$ npm install parcel-bundler parcel-plugin-vue @vue/component-compiler-utils babel-preset-env --save-dev
さて…まあ、それは実際にはそれだけです。
実行中の小包
これで、プロジェクトディレクトリでnpx parcel
を実行することにより、ホットリロードを使用してアプリを開発モードで実行できるようになります。 ミニファイとデッドコード除去を使用して本番環境用にビルドするには、npx parcel build
を使用するだけです。
(npx
とは何か疑問に思っている場合は、こちらをご覧ください。 NPM 5.2.0
以降がインストールされている限り、はで動作するはずです。)
しかし、eslint
が必要な場合はどうなりますか?
よろしくお願いします。 その場合は、eslint
、eslint-plugin-vue
、parcel-plugin-eslint
をインストールしてください。
# Yarn
$ yarn add eslint eslint-plugin-vue parcel-plugin-eslint -D
# NPM
$ npm install eslint eslint-plugin-vue parcel-plugin-eslint --save-dev
(.eslintrc.js
を作成することを忘れないでください)
// https://eslint.org/docs/user-guide/configuring
module.exports = {
extends: [
'eslint:recommended',
'plugin:vue/essential'
]
}
LESS / SASS / PostCSSはどうですか?
それらは、箱から出してすぐにParcelによってサポートされます! Vueコンポーネントでも! 組み込みのアセットタイプの詳細については、公式のParcelドキュメントを参照してください。
詳細情報が必要ですか?
詳細なパーセルガイドをご覧ください。 ああ、そしていつものように、公式ドキュメントを読んでください! パーセルズは素晴らしくて短いです。