vuejs3のインストール方法

vuejs3 のインストール方法: 1. Vue.js の公式 Web サイトから新しいバージョンを直接ダウンロードし、<script> タグを使用して導入します; 2. CDN メソッドを使用して vuejs をインストールします; 3. を使用しますNPM メソッドを使用して vuejs をインストールします。 </script>

#この記事の動作環境: Windows7 システム、vuejs3 バージョン、DELL G3 コンピューター。

vuejs3 をインストールするにはどうすればよいですか?

Vue3 のインストール

1. 独立版

Vue の公式 Web サイトから直接ダウンロードできます。 .js <script> タグで導入された最新バージョン。 <p><blockquote>Vue.js をダウンロードします: https://unpkg.com/vue@3.2.7/dist/vue.global.js<p><p>2. 使用します。 CDN 方式<strong>海外で推奨されている比較的安定した CDN を以下に 2 つ挙げますが、中国ではどちらが良いのか分かりませんので、現時点ではローカルにダウンロードすることをお勧めします。 <p>静的ファイル CDN (国内): https://cdn.staticfile.org/vue/3.0.5/vue.global.js<p>unpkg: https://unpkg.com/vue @next は、npm によってリリースされた最新バージョンとの一貫性を保ちます。 <p>cdnjs: https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js<p>静的ファイル CDN (国内)<p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;div id=&quot;app&quot;&gt; &lt;p&gt;{{ message }}&lt;/p&gt; &lt;/div&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div></p>unpkg (推奨) <p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;div id=&quot;app&quot;&gt; &lt;p&gt;{{ message }}&lt;/p&gt; &lt;/div&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div></p>cdnjs<p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;div id=&quot;app&quot;&gt; &lt;p&gt;{{ message }}&lt;/p&gt; &lt;/div&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div></p><p>3. NPM 方法<strong></strong></p>npm のインストール速度が遅いため、このチュートリアルでは Taobao のミラーを使用します。そのコマンドは cnpm です。インストールと使用手順については、「淘宝 NPM イメージの使用」を参照してください。 <p></p>npm バージョンは 3.0 以降である必要があります。このバージョンより低い場合は、アップグレードする必要があります: <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'># 查看版本 $ npm -v 2.3.0 #升级 npm cnpm install npm -g # 升级或安装 cnpm npm install cnpm -g</pre><div class="contentsignin">ログイン後にコピー</div></div></p>Vue で大規模なアプリケーションを構築する場合は、cnpm インストールを使用することをお勧めします.js. cnpm は、Webpack または Browserify モジュール パッケージャーとうまく連携できます。 <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'># 最新稳定版 $ cnpm install vue@next</pre><div class="contentsignin">ログイン後にコピー</div></div></p>コマンド ライン ツール<p></p>Vue.js は、大規模なビルドを迅速に行うために使用できる公式のコマンド ライン ツールを提供します。シングルページのアプリケーション。 <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'># 全局安装 vue-cli $ cnpm install -g @vue/cli # 安装完后查看版本 $ vue --version @vue/cli 4.5.11</pre><div class="contentsignin">ログイン後にコピー</div></div></p>注: vue-cli 3.x と vue-cli 2.x は同じ vue コマンドを使用します。以前に vue-cli 2.x をインストールしていた場合は、Vue-cli 3 に置き換えられます。バツ。 <p></p>@vue/cli-int をインストールします: <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>$ cnpm i -g @vue/cli-init</pre><div class="contentsignin">ログイン後にコピー</div></div></p>プロジェクトを作成します <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>$ vue init webpack runoob-vue3-test # 这里需要进行一些配置，默认回车即可 ? Project name runoob-vue3-test ? Project description A Vue.js project ? Author runoob &lt;test@runoob.com&gt; ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Set up unit tests Yes ? Pick a test runner jest ? Setup e2e tests with Nightwatch? Yes ? Should we run `npm install` for you after the project has been created? (recommended) npm vue-cli · Generated &quot;runoob-vue3-test&quot;. # Installing project dependencies ... # ======================== ...</pre><div class="contentsignin">ログイン後にコピー</div></div></p>プロジェクトを入力し、インストールして実行します: <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>$ cd runoob-vue3-test $ cnpm run dev DONE Compiled successfully in 2558ms I Your application is running here: http://localhost:8080</pre><div class="contentsignin">ログイン後にコピー</div></div>上記のコマンド http://localhost:8080/ の出力結果は次のとおりです。 <p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/247/553/529/1630568236747043.png" class="lazy" title="1630568236747043.png" alt="vuejs3のインストール方法"/>注: Vue.js は IE8 以下の IE バージョンをサポートしていません。 <p>関連する推奨事項: 「<p>vue.js チュートリアル <a href="https://www.php.cn/vuejs/" target="_blank">」 「最新の 5 つの vue.js ビデオ チュートリアル セレクション <a href="https://www.php.cn/toutiao-410615.html" target="_blank">」</script>

以上がvuejs3のインストール方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。