Vue2プロジェクトの作成
1. 環境構築
この記事はvue2.x 開発環境をもとに書いています
1.を使用して直接<script>インポートします
vue.js ファイルを直接ダウンロードし、<script>タグ付きでインポートします
<script src=”c:/vue/2.6.14/vue.min.js” />
2.cdn
<script src=”https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js” />
3.npm
Vue を使用して大規模なアプリケーションを構築する場合は、 NPMのインストールをお勧めします。NPM は、webpack や Browserify などのモジュール バンドラーとうまく連携します。同時に、Vue は単一ファイル コンポーネントを開発するためのサポート ツールも提供します。
npm i vue
4. コマンドラインツール(cli)
Vue は、大規模な単一ページ アプリケーションを迅速に構築するために使用できる公式コマンドライン ツールを提供します。このツールは、最新のフロントエンド開発ワークフローにすぐに使用できるビルド構成を提供します。ホット リロード、保存時の静的チェック、運用準備が整ったビルド構成を備えたプロジェクトの作成と開始には、わずか数分しかかかりません。
ステップ 1: vue-cli をグローバルにインストールします。$ npm i -g @vue/cli
ステップ 2: Webpack テンプレートに基づいて新しいプロジェクトを作成します。$ vue create my-project
ステップ 3: プロジェクト ディレクトリに入り、サービスを開始します。 $ cd my-project ; ``$ npm run serve
Vue を導入するには、上記の 4 つの方法のいずれかを使用するだけです。
知らせ：
最初の直接インポートの方法には欠陥があり、直接リリースできない、圧縮がない、効率が低い、プラグインが不完全です
4 番目のツールは、上記の問題をうまく解決できます。コマンド ライン ツールは、プラグインを使用してプロジェクトを迅速に構築し、パッケージ化、圧縮、マージしてプロジェクトのリリースを容易にします。
2 つ目は、コマンド ライン ツールの具体的な実装手順です。
-
まず vue-cil をグローバルにインストールします。
vue --versionインストールが成功したかどうかを確認できます
-
プロジェクトを作成するには、まずプロジェクトを作成するフォルダーのルート ディレクトリを入力し、このフォルダーで cmd ウィンドウを開き、作成コマンドを入力します。
vue create 项目名称
キャリッジリターン
入力して、必要なものを選択してください
キャリッジリターン
キャリッジリターン
キャリッジリターン
キャリッジリターン
キャリッジリターンが作成されました
3. プロジェクトの運営
1 つ目: プロジェクトが作成されたフォルダー内
cmd ウィンドウを開き、cd プロジェクト名を実行して、プロジェクトが存在するフォルダーに移動します。
npm runserveコマンドを実行します。
local の後ろにアドレスを貼り付けてブラウザで実行します
2つ目：作成したプロジェクトフォルダー内
プロジェクト フォルダーのアドレス バーで cmd を直接開き、npm runserve コマンドを実行します。
3 番目: VSCO で実行する
新しく作成したプロジェクトを VSCO で開き、開いた後に VSCO インターフェースで `ctrl+`` を使用します。
オープンターミナル
ターミナル ウィンドウで npm runserve コマンドを実行します。
終了
上記操作でエラーが発生した場合の解決方法
cmd を開いて実行して問題を解決する
4. プロジェクトファイルについて
5.vueファイルについて
.vue ファイルはコンポーネントであり、プロジェクトにはルート コンポーネント App.vue が 1 つだけ存在します。
.vue ファイルは通常、テンプレート、スクリプト、スタイルの 3 つの部分で構成されます。
テンプレートは内部にタグを書き込みます。ルート要素は 1 つだけです
スクリプトは内部に js ロジックを書き込みます。内部にデフォルトのエクスポート {} が必要です。すべての js コードをここに記述する必要があります
スタイル内の CSS 構文は、scoped 属性を設定することで、複数の .vue ファイル間のスタイルを互いに独立させることができます。
[外部リンク画像の転送に失敗しました。ソース サイトには盗難防止リンク メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-LFKRZI6I-1667106450512) (F:\notes\self\third stage\vue2 環境)建設\51.png)]
テンプレートは内部にタグを書き込みます。ルート要素は 1 つだけです
スクリプトは内部に js ロジックを書き込みます。内部にデフォルトのエクスポート {} が必要です。すべての js コードをここに記述する必要があります
スタイル内の CSS 構文は、scoped 属性を設定することで、複数の .vue ファイル間のスタイルを互いに独立させることができます。
