vue.jsのインストール方法

vue.js のインストール方法: 1. Vue.js 公式 Web サイトから vue.min.js を直接ダウンロードし、<script> タグを使用して導入します; 2. CDN メソッドを使用して vue をインストールします。 js; 3. タオバオのイメージとそのコマンド cnpm を使用して、vue.js をインストールします。 </script>

#このチュートリアルの動作環境: Windows7 システム、vue バージョン 2.0. この方法は、すべてのブランドのコンピューターに適しています。

関連する推奨事項: 「

vue.js チュートリアル 」

Vue.js のインストール

1、独立バージョン

vue.js 公式 Web サイトから vue.min.js を直接ダウンロードし、<script> タグを使用してインポートできます。 <p>ダウンロード アドレス: https://vuejs.org/js/vue.min.js<p>2. CDN メソッドの使用<p>以下は、推奨される 2 つの比較的安定した外部 CDN です。 , 中国ではこれより優れたものは見つからず、やはりローカルでダウンロードすることをお勧めします。 <p>静的ファイル CDN (国内): https://cdn.staticfile.org/vue/2.2.2/vue.min.js<p>unpkg: https://unpkg.com/vue /dist/vue.js は、npm によってリリースされた最新バージョンとの一貫性を保ちます。 <p>cdnjs: https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js<p>静的ファイル CDN (国内)<p><pre class="brush:php;toolbar:false">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;script src=&quot;https://cdn.staticfile.org/vue/2.2.2/vue.min.js&quot;&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&quot;app&quot;&gt; &lt;p&gt;{{ message }}&lt;/p&gt; &lt;/div&gt; &lt;script&gt; new Vue({ el: &amp;#39;#app&amp;#39;, data: { message: &amp;#39;Hello Vue.js!&amp;#39; } }) &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; unpkg（推荐） &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;script src=&quot;https://unpkg.com/vue/dist/vue.js&quot;&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&quot;app&quot;&gt; &lt;p&gt;{{ message }}&lt;/p&gt; &lt;/div&gt; &lt;script&gt; new Vue({ el: &amp;#39;#app&amp;#39;, data: { message: &amp;#39;Hello Vue.js!&amp;#39; } }) &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; cdnjs &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js&quot;&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&quot;app&quot;&gt; &lt;p&gt;{{ message }}&lt;/p&gt; &lt;/div&gt; &lt;script&gt; new Vue({ el: &amp;#39;#app&amp;#39;, data: { message: &amp;#39;Hello Vue.js!&amp;#39; } }) &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</pre>3. NPM 方法 <p>npm のインストール速度が遅いため、このチュートリアルでは Taobao のイメージとそのコマンド cnpm を使用します。インストールと使用方法の概要については、「淘宝 NPM イメージの使用」を参照してください。 <p>npm バージョンは 3.0 以降である必要があります。このバージョンより低い場合は、アップグレードする必要があります: <p><pre class="brush:php;toolbar:false"># 查看版本 $ npm -v 2.3.0 #升级 npm cnpm install npm -g # 升级或安装 cnpm npm install cnpm -g</pre>Vue で大規模なアプリケーションを構築する場合は、NPM インストールを使用することをお勧めします.js: <p><pre class="brush:php;toolbar:false"># 最新稳定版 $ cnpm install vue</pre>コマンド ライン ツール<p>Vue.js は、大規模な単一ページ アプリケーションを迅速に構築するために使用できる公式のコマンド ライン ツールを提供します。 <p><pre class="brush:php;toolbar:false"># 全局安装 vue-cli $ cnpm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 这里需要进行一些配置，默认回车即可 This will install Vue 2.x version of the template. For Vue 1.x use: vue init webpack#1.0 my-project ? Project name my-project ? Project description A Vue.js project ? Author runoob &lt;test@runoob.com&gt; ? Vue build standalone ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Setup unit tests with Karma + Mocha? Yes ? Setup e2e tests with Nightwatch? Yes vue-cli · Generated &quot;my-project&quot;. To get started: cd my-project npm install npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack</pre>プロジェクトを入力し、インストールして実行します: <p><pre class="brush:php;toolbar:false">$ cd my-project $ cnpm install $ cnpm run dev DONE Compiled successfully in 4388ms &gt; Listening at http://localhost:8080</pre>上記のコマンドが正常に実行された後、http://localhost:8080/ にアクセスすると、出力結果は次のようになります: <p><p><img src="https://img.php.cn/upload/image/916/887/218/1608513830927970.png" title="1608513830927970.png" alt="vue.jsのインストール方法"/>注: Vue.js は、IE8 以下のバージョンの IE をサポートしていません。 <p></script>

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