- Vue CLIで作成
Vue CLI は、Vue が公式に提供するコマンドライン ツールで、Vue プロジェクトを迅速に構築および管理するのに役立ちます。Vue CLI を使用して Vue プロジェクトを作成する手順は次のとおりです。
1.1 Vue CLIのインストール
ターミナルまたはコマンドラインに次のコマンドを入力して、Vue CLI をインストールします。
npm install -g @vue/cli
1.2 プロジェクトの作成
ターミナルまたはコマンド ラインに次のコマンドを入力して、Vue CLI を使用して Vue プロジェクトを作成します。
vue create my-project
その中にはmy-projectプロジェクト名があり、必要に応じて変更できます。
1.3 インストールの依存関係
プロジェクト ディレクトリを入力し、ターミナルまたはコマンド ラインに次のコマンドを入力して、プロジェクトの依存関係をインストールします。
cd my-project npm install
1.4 プロジェクトの実行
ターミナルまたはコマンド ラインに次のコマンドを入力して、Vue プロジェクトを開始します。
npm run serve
これまでのところ、Vue プロジェクトが正常に作成され、開始されました。
- 手動で作成された
Vue CLI を使用する代わりに、Vue プロジェクトを手動で作成することもできます。Vue プロジェクトを手動で作成する手順は次のとおりです。
2.1 HTMLファイルの作成
任意のディレクトリに という名前の HTML ファイルを作成しますindex.html。これにより、Vue の CDN リンクが導入されます。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue App</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {
{ message }} </div> </body> </html>
2.2 Vue インスタンスの作成
index.htmlVue インスタンスをファイルに追加します。
<script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script>
2.3 プロジェクトの実行
ブラウザでファイルを開いて、index.htmlVue インスタンスの出力を確認します。
上記は Vue プロジェクトを作成する 2 つの方法であり、個人のニーズや好みに応じて選択できます。Vue CLI を使用してプロジェクトを作成すると、プロジェクトの構築と管理をより迅速に行うことができ、プロジェクトを手動で作成すると、Vue の基本をより深く理解し習得できます。