ホームページ > 記事 > ウェブフロントエンド > vue.jsのインストール方法
vue.jsのインストール方法
- 藏色散人オリジナル
- 2020-12-21 09:26:572156ブラウズ
vue.js のインストール方法: 1. Vue.js 公式 Web サイトから vue.min.js を直接ダウンロードし、<script> タグを使用して導入します; 2. CDN メソッドを使用して vue をインストールします。 js; 3. タオバオのイメージとそのコマンド cnpm を使用して、vue.js をインストールします。 </script>
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"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> </div> <script> new Vue({ el: &#39;#app&#39;, data: { message: &#39;Hello Vue.js!&#39; } }) </script> </body> </html> unpkg（推荐） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> </div> <script> new Vue({ el: &#39;#app&#39;, data: { message: &#39;Hello Vue.js!&#39; } }) </script> </body> </html> cdnjs <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> </div> <script> new Vue({ el: &#39;#app&#39;, data: { message: &#39;Hello Vue.js!&#39; } }) </script> </body> </html></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 <test@runoob.com> ? 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 "my-project". 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 > 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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。