目次
Create A Webpack テンプレートに基づく新しいプロジェクト
$ vue init webpack my-project

Vue2.0でVue足場を構築する方法

Jul 13, 2018 pm 05:41 PM
node.js vue.js

この記事では主に Vue2.0 で Vue スキャフォールディングを構築する方法を紹介します。必要な友人は参考にしてください。ユーザーインターフェイスフレームの構築。

Vue はビュー層のみに焦点を当てており、ボトムアップのインクリメンタル開発設計を採用しています。

Vue の目標は、可能な限りシンプルな API を介してレスポンシブなデータ バインディングと合成ビュー コンポーネントを実装することです。

読む前に知っておくべきこと
htnl

css

javascript
node.js環境(npmパッケージ管理ツール)
webpackパッケージ化ツール
node.jsをインストール

コンピューターでwin+Rを開く 以下のインターフェースを開きます


nodeから 公式Webサイトからnodeをダウンロードしてインストールします。インストール手順は非常に簡単で、ずっと「次へ」だけです。 Vue2.0でVue足場を構築する方法 インストールが完了したら、コマンド ライン ツールを開き、以下に示すようにコマンド「node -v」を入力します。対応するバージョン番号が表示されれば、インストールは成功です。



必要なnpmパッケージマネージャーはnodeに統合されているため、npm -vを直接入力すると、以下のようにnpmのバージョン情報が表示されます。 Vue2.0でVue足場を構築する方法

ノード環境はここにインストールされており、npmパッケージ管理ツールも利用できます。ただし、npmの一部のリソースがブロックされているため、より高速かつより安定させるために、Taobaoのnpmイメージに切り替える必要があります。 -cnpm。 Vue2.0でVue足場を構築する方法

cnpmをインストールする

クリックしてタオバオのcnpm Webサイトに入り、詳細な設定方法が記載されています。

またはコマンドラインに直接入力します:


$ npm install -g cnpm --registry=https://registry.npm.taabao.org
その後、インストールが完了するまで待ちます。

「cnpm -v」と入力すると、現在の cnpm バージョンが表示されますが、これは npm バージョンとはまだ異なります。

cnpmの使い方は、npmが必要なところをcnpmに置き換えるだけですVue2.0でVue足場を構築する方法

vueインストール

vue.jsで大規模なアプリケーションを構築する場合は、npmインストールを使用することをお勧めします。 webpack または browserify モジュール バンドラーで使用されるようなもの。 vue.js は、単一ファイルのコンポーネントを開発するためのサポート ツールも提供します。

$ cnpm install vue

vue-cli スキャフォールディング構築ツールをインストールする

vue-cli は、大規模な単一ページ アプリケーションを迅速に構築するために使用できる公式コマンド ライン ツールを提供します。このツールは、すぐに使えるビルド ツール構成を提供し、最新のフロントエンド開発プロセスをもたらします。ホットリロード、保存時の静的チェック、実稼働準備が整ったビルド構成を備えたプロジェクトの作成と起動には、わずか数分しかかかりません:

vue-cli をグローバルにインストールする

$ cnpm install --global vue-cli

Create A Webpack テンプレートに基づく新しいプロジェクト

プロジェクトを作成するには、まずディレクトリを選択し、次にコマンド ラインでディレクトリを選択したディレクトリに変更する必要があります。


my-project
を使用してプロジェクト名をカスタマイズするか、

$ vue init webpack my-project

を使用してプロジェクトを初期化するか、


$ vue init webpack-simple my-project

を使用して単純なプロジェクトを初期化します


Vue2.0でVue足場を構築する方法初期化コマンドを実行するとき、ユーザーはプロジェクト名、説明、作成者、その他の情報などのいくつかの基本オプションを入力するように求められます。入力したくない場合は、Enter キーを押してデフォルトに戻します。

Vue2.0でVue足場を構築する方法プロジェクト名は大文字にできません。大文字にしないとエラーが報告されることに注意してください。

プロジェクト名 (my-project) # プロジェクト名 (私のプロジェクト)

プロジェクトの説明 (Vue.js プロジェクト) # プロジェクトの説明 Vue.js プロジェクト

Author 著者 (あなたの名前)

vue-router をインストールしますか? (Y/n) # Vue ルーティングをインストールしますか?コード? (Y [ はい ] / N [ いいえ ])

ESLint プリセットを選択します (矢印キーを使用します) # プリセット ESLint を選択します (矢印キーを使用します)

Karma + Mocha でユニット テストをセットアップします (Y/n) # ユニットをセットアップしますか? Karma + Mocha をテストしますか? (Y/N)

Nightwatch で e2e テストをセットアップしますか? (Y/N) # Nightwatch 、エンドツーエンド テストをセットアップしますか? (Y/N)

もちろん、これらはすべてあなたの個人的な状況によって異なります。ここではすべて私が選択しました。

その前に、次のコマンドを使用してプロジェクトの依存関係の問題を解決する必要があります。

$ cnpm install

以下のような状況が表示されれば、依存関係は正常に解決されています。

プロジェクトを実行します

$ npm run dev


以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

vue のメソッドにおけるメソッド クロージャ キャッシュの問題を解決する方法

Vue2.0 のカスタム命令とインスタンスの属性とメソッド

以上がVue2.0でVue足場を構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Nodeのメモリ制御に関する記事 Nodeのメモリ制御に関する記事 Apr 26, 2023 pm 05:37 PM

ノンブロッキングおよびイベント駆動に基づいて構築されたノード サービスには、メモリ消費量が少ないという利点があり、大量のネットワーク リクエストの処理に非常に適しています。大量のリクエストを前提として、「メモリ制御」に関する問題を考慮する必要があります。 1. V8 のガベージ コレクション メカニズムとメモリ制限 Js はガベージ コレクション マシンによって制御されます

Node V8 エンジンのメモリと GC の詳細な図による説明 Node V8 エンジンのメモリと GC の詳細な図による説明 Mar 29, 2023 pm 06:02 PM

この記事では、NodeJS V8 エンジンのメモリとガベージ コレクター (GC) について詳しく説明します。

Ace コード エディターを Vue プロジェクトに統合する方法の詳細な図による説明 Ace コード エディターを Vue プロジェクトに統合する方法の詳細な図による説明 Apr 24, 2023 am 10:52 AM

Ace は、JavaScript で書かれた埋め込み可能なコード エディターです。 Sublime、Vim、TextMate などのネイティブ エディターの機能とパフォーマンスに匹敵します。あらゆる Web ページや JavaScript アプリケーションに簡単に埋め込むことができます。 Ace は Cloud9 IDE のメイン エディタとして維持されており、Mozilla Skywriter (Bespin) プロジェクトの後継です。

Vue3 で単体テストを作成する方法を調べる Vue3 で単体テストを作成する方法を調べる Apr 25, 2023 pm 07:41 PM

Vue.js は、今日のフロントエンド開発において非常に人気のあるフレームワークとなっています。 Vue.js が進化し続けるにつれて、単体テストの重要性がますます高まっています。今日は、Vue.js 3 で単体テストを作成する方法を検討し、いくつかのベスト プラクティスと一般的な問題と解決策を提供します。

Node の File モジュールについて詳しく説明しましょう Node の File モジュールについて詳しく説明しましょう Apr 24, 2023 pm 05:49 PM

ファイル モジュールは、ファイルの読み取り/書き込み/開く/閉じる/削除の追加など、基礎となるファイル操作をカプセル化したものです。ファイル モジュールの最大の特徴は、すべてのメソッドが **同期** と ** の 2 つのバージョンを提供することです。 asynchronous**、sync サフィックスが付いているメソッドはすべて同期メソッドであり、持たないメソッドはすべて異種メソッドです。

chatgpt のタイプライター効果を実現する vue3 の詳細な例 chatgpt のタイプライター効果を実現する vue3 の詳細な例 Apr 18, 2023 pm 03:40 PM

chatgpt ミラー サイトで作業していたときに、一部のミラー サイトにはタイプライター カーソル効果がなく、テキスト出力のみがあることがわかりました。とにかくやりたいです。そこで私はそれを注意深く研究し、タイプライターとカーソルの効果を認識しました。ここで、私の解決策とレンダリングを共有します~

vue3 で Amap API を使用する方法について話しましょう vue3 で Amap API を使用する方法について話しましょう Mar 09, 2023 pm 07:22 PM

Amap を使用したとき、公式から多くのケースやデモを勧められましたが、これらのケースはすべてネイティブ メソッドを使用してアクセスしており、vue や React のデモは提供されていませんでした。vue2 アクセスについてはオンラインで多くの人が書いていますが、この記事では、 vue3 が一般的に使用される Amap API をどのように使用するかを見ていきます。皆さんのお役に立てれば幸いです。

vue がファイル スライス アップロードを実装する方法の簡単な分析 vue がファイル スライス アップロードを実装する方法の簡単な分析 Mar 24, 2023 pm 07:40 PM

実際の開発プロジェクトのプロセスでは、比較的大きなファイルをアップロードする必要がある場合がありますが、その場合はアップロードが比較的遅くなり、バックグラウンドでフロントエンドがファイルのスライスをアップロードする必要がある場合があります。これは非常に簡単です。たとえば、1Aギガバイトのファイル ストリームはいくつかの小さなファイル ストリームに分割され、インターフェイスはそれぞれの小さなファイル ストリームを配信するように要求されます。

See all articles