記事ディレクトリ
1. 記事の紹介
バックエンド開発がメインですjavaが、フロントエンドにも興味があり、フルスタックエンジニアを目指しています。
現在習得しているweb三銃士:
-
ハイパーテキストマークアップ言語
HTML(HyperTest Markup Language) -
カスケード スタイル シート
CSS(Cascading Style Shets) -
JavaScript
バックエンド開発spring、mybatisおよびその他のフレームワーク、フロントエンドにもフレームワークが必要だと思います。
案の定、インターネットを検索したところ、フロント エンドには、vueなどがあります。reactangularJs
個人的な計画に従って、vue最初にフレームワークを学びます。
労働者が良い仕事をしたいのなら、まず道具を研がなければなりません。フレームワークをよく学ぶにはvue、ダウンロードしてインストールすることから始めます。
次に、32 つの方法でダウンロードしてインストールしますvue.js。
2. 環境構築
ただしvue.js、インストールする前に、インストールする必要がありますnode.js。
のインストール方法についてnode.jsは、ブログ投稿を参照してください: 2023 年にネットワーク全体で Node.js をダウンロードしてインストールする最新のチュートリアル
3. vue.js をインストールする
私は以下の3方法でインストールしていますvue.jsが、npm installインストールする方法をお勧めしますvue.js。
3.1 方法 1: vue.js のソース コードを公式 Web サイトからダウンロードする
右側のリンクをクリックして、vue.jsウェブサイトの公式ウェブサイト、vue.js公式ウェブサイトのリンク アドレス: https://cn.vuejs.orgに移動します。
vue 2 文档公式 Web サイトに入った後、次の図に示すように、ドキュメントを選択します。
または、このリンクをクリックしてVue 2ホームページに直接ジャンプします: https://v2.cn.vuejs.org
Vue 2ホームページに入ったら、起步下の図に示すようにボタンをクリックします。
- 次の図に示すように、ページ上で
vue 2、 が表示されるまでマウスを下にスライドさせます。<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
- 次の図に示すように、新しいブラウザ ウィンドウを開き、
srcファイルjs(たとえばhttps://cdn.jsdelivr.net/npm/vue@2/dist/vue.js、) をウィンドウのアドレス バーにコピーします。
- 上の図のスクリプト コードをコピーした後、
Ctrl + Aと を使用します。次の図に示すように、プロジェクトに新しいものを作成し、スクリプト コードをこのファイルにコピーします。Ctrl + Cvue.jsjs文件
- 次の図に示すように、新しい
vueHtmlページを作成し、新しく作成したファイルをインポートします。vue.js
vueHtml次の図に示すように、ページを実行します。
vueHtmlのソースコードは次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试vue.js脚本</title>
</head>
<body>
<div id="vm">
<p>Hello, {
{name}}!</p>
<p>You are {
{age}} years old!</p>
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#vm',
data: {
name: 'super先生',
age: 18
}
});
</script>
</html>
現在、以下の図に示すように、少数のプロジェクトを除いて、多くのプロジェクトが公式ウェブサイトにVue 2アップグレードされています。Vue 3在2023 年 12 月 31 日停止维护Vue 2
後でダウンロードできないコードを防ぐためにVue 2、クラウド ディスクにアップロードしました。次のリンクをクリックしてアクセスします。
-
パスワード: xbf4wv
3.2 方法 2: npm install を使用して作成する
vueにバージョンアップしたのでVue 3、公式推奨のnpm installインストール方法vue。
それで、次に、私は以前npm installにインストールしましたvue。
D:\project\testプロジェクトをフォルダーにビルドします。このフォルダのアドレスバーに入力するcmdと、直接開くことができcmd命令框、現在のディレクトリが次の図に示すように配置されます。
cmdコマンド ボックスに、次のコマンドを入力します。
npm init vue@latest
次の図に示すように、このコマンドがインストールされて実行されます。これは公式のプロジェクト スキャフォールディング ツールcreate-vueです。Vue
上の写真でわかるように、私は yes と書き、Project name残りtestAppはです。Package namepackage.jsonNo
特定の機能を有効にするかどうかわからない場合は、Enter キーを直接押して を選択できますNo。
- プロジェクトが作成されたら、上図のプロンプトに従って、次のコマンドを順番に実行します。
cd testVue
npm install
npm run dev
- 次の図に示すように、ブラウザを開き、アドレス バーにhttp://localhost:5173/と入力します。
プロジェクトが正常に作成されたことを示すこのページが表示されます。
3.3 方法 3: bower を使用してダウンロードする
bowerこれは、フロントエンド パッケージを追跡し、それらが最新 (または指定した特定のバージョン) であることを確認するのに役立つフロントエンド パッケージ管理ツールです。
- インストール
bower
bowernode、npmおよび環境が必要ですgit。これらの環境を構成した後、次のコマンドに示すように、npm方法でインストールしますbower
npm install bower -g
Windows powershellインストールしていない場合は、このリンクをクリックしてインストールできます: Windows PowerShell のインストール
bowerバージョンを表示
インストールが成功したら、次のコマンドを入力してbowerバージョンを表示します。
bower -v
- インストール
vue
次のコマンドを入力して vue をインストールします。
bower i vue -g
4. まとめ
上記のvue.jsインストールから判断すると、私はまだnpm installあなたが使用する方法をお勧めします.結局のところ、これは公式の推奨インストール方法でもあります.
もちろん、vue.js上記のように最新のチュートリアルをインストールすることが役に立てば幸いです。