Erste Schritte mit Vue.js

Einführung

vue.js ist eine clientseitige js-Bibliothek, die zum Entwickeln von Single-Page-Anwendungen verwendet werden kann. Um ein Projekt auszuwählen, habe ich mir nacheinander Angular, React und Vuejs angeschaut. Ich bewunderte die ersten beiden und liebte die letzteren. Weil es einfach und übersichtlich ist und über eine erweiterte Implementierung von Webkomponenten verfügt. Auch wenn es nicht viel Dokumentation gibt, würde ich es wählen. Als nächstes erstellen wir zunächst ein Startprojekt und gehen die am Entwicklungsprozess beteiligten Konzepte und Komponenten durch.

vue.js

Der Entwicklungsprozess anständiger Vuejs wird fast immer mit Webpack und Babel kombiniert. Für diejenigen, die gerne von Grund auf hacken, möchte ich Ihnen sagen, dass die Konfiguration äußerst umständlich ist. Glücklicherweise bietet vue.js ein Tool namens vue-cli. Kann verwendet werden, um schnell den Startcode für eine Single-Page-Anwendung zu erstellen. Starten Sie häufig verwendete Entwicklungsfunktionen in nur einer Minute:

Gerüstcode verfügbar.

Heißes Nachladen. Automatisches Neuladen nach Aktualisierung des Komponentencodes

Statische Codeprüfung.

ES6-Sprachfunktionen

Werkzeugvorbereitung

Wir müssen vue-cli verwenden, um ein Gerüstprojekt zu erstellen.

vue-cli installieren

$ npm install -g vue-cli

Knotenversion bestätigen

Meine Version ist

$ node -v

v5

$ npm -v

3.10.6

Wenn viele Probleme auftreten, können diese mit der Version zusammenhängen. Die Vorschläge sind dieselben wie meins.

Neues Projekt erstellen

Ausführung:

$ vue init webpack my-project

Der zweite Parameter Webpack gibt an, ein VueJS-Projekt basierend auf der Vorlage „Webpack“ zu erstellen. Diese Vorlage erstellt einen Webpack-Gerüstcode.

Aber was ist Webpack? Es selbst ist ein Verpackungstool, das JS, CSS und Bilder in eine oder mehrere JS-Dateien packen und verschiedene Loader als Plug-Ins zum Konvertieren verschiedener Dateitypen unterstützen kann. Tatsächlich verwendet Webpack den Plug-in Vue-Loader, um beim Laden von Vue-Typ-Dateien eine Formatkonvertierung durchzuführen, und übersetzt Vue-Typ-Dateien in JS-Dateien, die der Browser erkennen kann.

Achtung für chinesische Benutzer: Der Befehl vue init verwendet npm. Das npm-Warehouse ist oft langsam oder blockiert. Sie können einfach ~/.npmrc verwenden und den folgenden Inhalt hinzufügen >

Das geht viel schneller.

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

Die derzeit verfügbaren Vorlagen sind:

Webpack – Über Webpack- und Vue-Loader-Plug-Ins kann babel aufgerufen werden, um die .vue-Datei in eine JS-Datei zu kompilieren, die von erkannt werden kann Kunde. Hot Loading, Code-Inspektion und Tests können ebenfalls standardmäßig bereitgestellt werden.

webpack-simple – Das einfachste Webpack- und Vue-Loader-Plug-in.

browserify – Durch die Kombination von Browserify + vueify kann babel aufgerufen werden, um die .vue-Datei in eine js-Datei zu kompilieren, die der Client erkennen kann. Hot Loading, Code-Inspektion und Tests können ebenfalls standardmäßig bereitgestellt werden.

browserify-simple – Das einfachste Browserify + vueify-Plug-in.

Theoretisch haben Webpack und Browserify ähnliche Funktionen und beide können als Verpackungstools verwendet werden. Aber Webpack ist ein beliebtes Tool, für das es nur sehr wenig Dokumentation gibt, das aber von allen genutzt werden möchte. Machen wir uns also keine Sorgen und verwenden Sie zuerst Webpack.

Abhängigkeiten installieren, gehen Sie einfach zu

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

Gehen Sie zu http://localhost:8080, um den Effekt anzuzeigen.

Vue-Dateien anzeigen

Vue-Dateien sind eine Dreifaltigkeit. Das heißt, CSS, HTML und JS befinden sich alle in einer Datei und werden durch Tags getrennt. Um die Struktur besser erkennen zu können, empfiehlt es sich, zunächst das zum Editor entsprechende Highlight-Plugin zu installieren.

Syntaxhervorhebung installieren

Der Editor, den ich gewohnt bin, ist Sublime Text. Durch die Installation des Plug-Ins können alle VueJS-Komponentencodes mit der Erweiterung .vue identifiziert und hervorgehoben werden, um das Lesen des Codes zu erleichtern und schreiben. Dieses Plug-in heißt vue-syntax-highlight und wird offiziell von vuejs bereitgestellt. Es befindet sich unter github.com. Klonen Sie es einfach in Ihr Sublime-Paketverzeichnis. Auf meinem Computer ist das Sublime-Paketverzeichnis /Users/lcj/Library/Application Support/Sublime Text 3/Packages, daher ist der Installationsprozess

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

und kann dann neu gestartet werden . Nach dem Lesen des Codes werden alle Dateien mit der Erweiterung .vue entsprechend hervorgehoben.

Vue anzeigen

Der Startcode enthält einen Komponentencode, der sich in src/hello.vue befindet. Ansicht:

Die Datei ist in drei Teile unterteilt. Das d477f9ce7bf77f53fbcf36bec1b69b7a-Tag ist von HTML-Code umgeben, und die ES6-Syntax kann verwendet werden. Der Inhalt von c9ccee2e6ea535a969eb3f532ad9fe89 ist der CSS-Code. Der Code zur Verwendung dieser Komponente befindet sich in app.vue. Deklarieren Sie einfach zuerst das Tag

<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>

im Skript und verwenden Sie dann das Tag im HTML

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

Ein ganz großes Highlight! Eine Vue-Datei enthält alle internen JS-, CSS- und HTML-Dateien und kann als vollständige, eigenständige Komponente verwendet werden. Eine sehr interessante Webkomponente, die ich persönlich sehr bewundere, ist hier.

<hello></hello>

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组件，未来需要一些篇幅去详细说明它们。