Vue.js インストール

1、独立版

Vue.js の公式サイトから vue.min.js を直接ダウンロードして、<script>タグで導入します。

Vue.js をダウンロード

2、CDN 方式を使用

以下に、海外で比較的安定している2つのCDNを紹介します。国内ではまだ良いものは見つかっていないので、現時点ではローカルにダウンロードすることをお勧めします。

ByteDance CDN（国内）

<div id="app"> <p>{{ message }}</p> </div>

試してみる »

unpkg（推奨）

<div id="app"> <p>{{ message }}</p> </div>

試してみる »

cdnjs

<div id="app"> <p>{{ message }}</p> </div>

試してみる »

3、NPM 方式

npm のインストール速度が遅いため、このチュートリアルでは淘宝（タオバオ）のミラーとそのコマンド cnpm を使用しています。インストールと使用の紹介は以下を参照してください：淘宝 NPM ミラーを使用。

npm のバージョンは 3.0 より大きい必要があります。このバージョンより低い場合は、アップグレードする必要があります：

# 查看版本
$ npm -v
2.3.0

#升级 npm
cnpm install npm -g


# 升级或安装 cnpm
npm install cnpm -g

Vue.js で大規模なアプリケーションを構築する場合は、cnpm を使用してインストールすることをお勧めします：

# 最新稳定版
$ cnpm install vue

コマンドラインツール

Vue.js は、大規模なシングルページアプリケーションを迅速に構築するために使用できる公式コマンドラインツールを提供しています。

# 全局安装 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 サンプル <[email protected]>
? 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

プロジェクトに入り、インストールして実行します： 

$ cd my-project
$ cnpm install
$ cnpm run dev
 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

上記のコマンドが正常に実行されたら、http://localhost:8080/ にアクセスします。出力結果は次のようになります：

注意：Vue.js は IE8 およびそれ以下の IE バージョンをサポートしていません。

Vue プロジェクトのビルド

Vue プロジェクトをビルドするには、次のコマンドを使用します：

npm run build

実行が完了すると、Vue プロジェクトの下にdistディレクトリが生成されます。通常、index.html ファイルと static ディレクトリが含まれ、static ディレクトリには静的ファイル js、css および画像ディレクトリ images が含まれています。

index.html を直接ダブルクリックしてブラウザで開くと、ページが真っ白になる可能性があります。正常に表示するには、index.html ファイル内の js、css ファイルのパスを変更してください。

例えば、dist/index.html ファイルを開くと、パスが絶対パスになっています：

<link href=/static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=/static/js/app.717bb358ddc19e181140.js></script>

js、css のパスを相対パスに変更します：

<link href=static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=static/js/app.717bb358ddc19e181140.js></script>

これで、dist/index.html ファイルを直接ダブルクリックすると、ブラウザで効果を確認できます。

エディタ

VS Code

VS Code（正式名称 Visual Studio Code）は、Microsoft が提供する無料・オープンソース・クロスプラットフォームのコードエディタです。

VS Code は Windows、macOS、Linux をサポートしており、強力な機能と柔軟な拡張性を備えています。

VS Code チュートリアル：https://www.example.com/vscode/vscode-tutorial.html

また、中国国内の Alibaba と ByteDance も、VS Code ベースで開発された AI IDE を提供しています：

  • Alibaba Qoder：https://qoder.com/

    • その他の拡張機能