Vue.js を始める

はじめに

vue.js は、シングルページ アプリケーションの開発に使用できるクライアント側の JS ライブラリです。プロジェクトを選択するために、angular、react、vuejs を順番に調べました。最初の 2 つはとても気に入っていて、後者はとても気に入りました。シンプルでクリーンで、高度な Web コンポーネントの実装も備えているからです。たとえドキュメントがあまりなくても、私はそれを選択します。次に、最初に開始プロジェクトを作成し、開発プロセスに含まれる概念とコンポーネントを確認します。

vue.js

まともな vuejs の開発プロセスは、ほとんどの場合 webpack と babel を組み合わせて行われますが、幸いなことに、vue.js には設定が非常に面倒です。 vue-cli と呼ばれます。シングルページ アプリケーションの開始コードを迅速に構築するために使用できます。よく使用される開発機能を起動するには 1 分しかかかりません:

利用可能なスキャフォールディング コード。

ホットリロード。コンポーネントコードが更新された後に自動的にリロードします

静的コード検査。

ES6言語機能

ツールの準備

足場プロジェクトを作成するにはvue-cliを使用する必要があります。

vue-cliをインストール

$ npm install -g vue-cli

ノードのバージョンを確認

私のバージョンは

$node -v

v5.0.0

$ npm -v

3.10.6

バージョンによって異なりますが、提案は私と同じです。

新しいプロジェクトを作成する

実行:

$ vue init webpack my-project

2 番目のパラメーター webpack は、「webpack」テンプレートに基づいて vuejs プロジェクトを作成するように指定します。このテンプレートは、Webpack スキャフォールディング コードを作成します。

ところで、webpackとは何ですか?これ自体は、js、css、および画像を 1 つ以上の js ファイルにパッケージ化できるパッケージング ツールであり、さまざまな種類のファイルを変換するためのプラグインとしてさまざまなローダーをサポートできます。実際、webpack は Vue タイプのファイルを読み込むときにプラグイン vue-loader を使用して形式変換を実行し、Vue タイプのファイルをブラウザが認識できる js ファイルに変換します。

中国ユーザーへの注意: vue init コマンドは npm を使用するため、npm ウェアハウスが遅くなるかブロックされることがよくあります。~/.npmrc を編集して次の内容を追加するだけです:

registry = https://registry.npm.taobao.org

この方法ははるかに高速です。 。

現在利用可能なテンプレートは次のとおりです:

webpack - webpack と vue-loader プラグインを通じて、babel を呼び出して、.vue ファイルをクライアントが認識できる js ファイルにコンパイルできます。ホット ロード、コード インスペクション、テストもデフォルトで提供できます。

webpack-simple - 最も単純な webpack および vue-loader プラグイン。

browserify - Browserify + vueify の組み合わせにより、babel を呼び出して、.vue ファイルをクライアントが認識できる js ファイルにコンパイルできます。ホット ロード、コード インスペクション、テストもデフォルトで提供できます。

browserify-simple - 最もシンプルな Browserify + vueify プラグイン。

理論的には、webpack とbrowserify は同様の機能を備えており、どちらもパッケージ化ツールとして使用できます。しかし、webpack は人気のあるツールであり、ドキュメントはほとんどありませんが、誰もがそれを使用しようと競い合っています。したがって、心配せずに、まずは webpack を使用してみましょう。

依存関係をインストールし、http://localhost:8080 に移動して効果を確認します。

vue ファイルを表示する

vue ファイルは三位一体です。つまり、css、html、js はすべて 1 つのファイル内にあり、タグで区切られています。構造を見やすくするために、まずエディターに対応したハイライト プラグインをインストールすることをお勧めします。

構文のハイライトをインストールする

私が使い慣れているエディターは崇高なテキストであり、プラグインをインストールすると、拡張子 .vue を持つすべての vuejs コンポーネント コードを識別し、コードの読み取りと書き込みを容易にするためにハイライトを与えることができます。このプラグインは vue-syntax-highlight と呼ばれ、vuejs によって公式に提供されています。 github.com にあります。 Sublime パッケージ ディレクトリにクローンを作成するだけです。私のコンピューターでは、Sublime パッケージのディレクトリは /Users/lcj/Library/Application Support/Sublime Text 3/Packages なので、インストール プロセスは

$ cd my-project
$ npm install
$ npm run dev

となり、再起動されます。コードを読み取ると、.vue 拡張子を持つすべてのファイルに対応するハイライトが表示されます。

vue の表示

src/hello.vue にある開始コードにコンポーネント コードがあります。表示:

cd /Users/lcj/Library/Application\ Support/Sublime\ Text\ 3/Packages
git clone https://github.com/vuejs/vue-syntax-highlight

ファイルは 3 つの部分に分かれており、

<template>
    <div class="hello">
      <h1>{{ msg }}</h1>
    </div>
  </template>
 
  <script>
  export default {
    data () {
      return {
        msg: &#39;Hello World!&#39;
      }
    }
  }
  </script>
 
  <style scoped>
  h1 {
    color: #42b983;
  }
  </style>

、次に HTML でタグを使用します

import Hello from './components/Hello'
export default {
  components: {
    Hello
  }
}

これは非常に大きなハイライトです。 vue ファイルにはすべての内部 js、css、html が含まれており、完全な自己完結型コンポーネントとして使用できます。私が個人的に非常に尊敬している非常に興味深い Web コンポーネントがここにあります。

vue文件内的语法，当然不是浏览器所可以支持的，浏览器不认识它！魔术在于webpack+vue-loader+babel 。webpack加载vue文件首先调用vue-loader，vue-loader会调用babel转换ES6代码为ES5代码，把css和html作为模块也转换为客户端js代码。这些js代码浏览器就可以识别了。

另外，我们看看热加载。把hello组件的msg值改改。然后保存。浏览器会自动刷新的。这就是热加载了。对于频繁修改调试的程序员，有了热加载，得轻松不少。

安装chrome开发工具

我习惯使用的浏览器是chrome，可以安装vue的开发工具到chrome插件内。在chrome市场内查询vue-developertools 。有了它，可以在chrome console内看到更加友好的vue错误提示。

回归日常

我们所有的编辑修改一旦完成需要更新网站时，最终需要把所有的vue，ES6代码等编译出来到ES5的js文件。现在可以构建这些webpack代码：

npm run build

此命令会把我们已经有的开发成果，编译到dist目录下，就是说编译成前端可以直接使用的html、js、css。

有了它们，我就可以使用一个http 静态服务器，在dist目录内执行：

cd dist
npm install http-server -g
http-server

 

然后，到http://localhost:8080查看效果。和运行npm run dev看到的一模一样。

更多

vue还有两个插件，对开发者很有价值

加强版 ，访问服务器

npm install vue-resource --save

 

安装路由

npm install vue-router --save

细节展开

我们走马观花的看了webpack、vue-loader、babel 、vue组件，未来需要一些篇幅去详细说明它们。