パーセルを使用して vue スキャフォールディングを構成する方法 (詳細なチュートリアル)

parcel-vue は、Parcel パッケージ化ツールに基づく VueJS 高速開発スキャフォールディング ソリューションです。node8.0 以降を使用することを強くお勧めします。この記事では、新しいパッケージング ツールの Parcel Zero-Configuration Vue 開発スキャフォールディングに関する関連知識を紹介します。興味のある方はぜひご覧ください

parcel-vue は、Parcel パッケージング ツールに基づく VueJS 高速開発スキャフォールディング ソリューションです。 0 以降を使用することを強くお勧めします

プロジェクトアドレス: https://github.com/w3c-king/parcel-vue

初期化プロジェクト

$ git clone https://github.com/w3c -king/parcel-vue.git

インストールの依存関係

$ cd parce-vue
$ npm install

その中で、vue で終わる単一ファイルの場合は、parcel-plugin-vue を個別に処理する必要があります。 plugin は vueify を通じて対応するコードを生成し、parcel は Parcel-plugin から始まる依存関係を自動的に読み込みます。

開発環境を実行し、ブラウザ http://localhost:1234 を開いてプロジェクトを表示します

$ npm run dev

パッケージ化してコンパイルします

$ npm run build

開発

ディレクトリ構造

src
├── router
 ├── index.js
├── assets
 ├── logo.png
├── components
 ├── Hello
 ├── index.js
 ├── index.js
├── views
 ├── HelloWorld
  ├── images
   ├── logo.png
  ├── HelloWorld.vue
├── styles
 ├── common.css
├── store
 ├── global
  ├── global.js
  ├── index.js
 ├── index.js
├── app.vue
├── index.js

を実行するだけですnpm run dev 和 npm run build 開発して構築します。

上記は私があなたのためにまとめたものです。

関連記事:

vue-cli で webpack2 プロジェクトのパッケージ化最適化を実装する方法

es6 のエクスポートとエクスポートのデフォルトの違いは何ですか?

VueでSwiperをカプセル化して画像カルーセルを実装する方法

Vueでztreeを使用する方法(詳細なチュートリアル)

JSを使用してウォーターフォールフロープラグインを実装する方法

以上がパーセルを使用して vue スキャフォールディングを構成する方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。