パーセルを使用した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
から始めます。
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ブートストラップコードを追加します。
src / main.js
import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', render: h => h(App) });
そして今、App
コンポーネント。
src / App.vue
<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
も同様に投入してください。
.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
を作成することを忘れないでください)
.eslintrc.js
// https://eslint.org/docs/user-guide/configuring module.exports = { extends: [ 'eslint:recommended', 'plugin:vue/essential' ] }
LESS / SASS / PostCSSはどうですか?
それらは、箱から出してすぐにParcelによってサポートされます! Vueコンポーネントでも! 組み込みのアセットタイプの詳細については、公式のParcelドキュメントを参照してください。
詳細情報が必要ですか?
詳細なパーセルガイドをご覧ください。 ああ、そしていつものように、公式ドキュメントを読んでください! パーセルズは素晴らしくて短いです。