2016年9月8日 星期四

如何在 PhpStorm 打造 Vue.js 開發環境?

我是一個很依賴語法提示才能寫程式的人，一來我記憶力很差，我記不了很多API，二來我很容易 typo，所以只能依賴語法提示用選的，所以寫 Vue.js 的第一件事情，就是在 PhpStorm 先把開發環境弄好。

Version

Vue.js 1.0.24
PhpStorm 2016.1.2
Plugin : vue-for-idea 1.0.6
Plugin : Vue.js 1.1.0

Vue.js on PhpStorm

PhpStorm 要支援 Vue.js，主要有 3 個重點 :
  1. Directive : 支援由 v- 開頭的 directive，如 v-model，以及其 shorthand，如 @click，:href。
  2. API : 支援 Vue.js 的 API，如 Vue.component()。
  3. vue 元件 : 支援 Vue.js 自創的 component 格式，在 PhpStorm 正常顯示，沒有警告。

安裝 Vue.js 外掛

PhpStorm -> Preferences -> Plugin 
  • 輸入 vue，按 Search in repositories。
會搜尋到 2 個 Vue.js 外掛 : vue-for-idea 與 Vue.js。11這兩個外掛並非 JetBrains 官方所出，而是由 open source 社群所維護，目前這兩個外掛仍在開發中，各自實現了一些功能，如 Vue.js 外掛支援 directive，卻不支援 shorthand，而 vue-for-idea 外掛支援 shorthand，卻不支援 directive，所以必須兩個外掛都裝，功能才會比較齊全。
將這兩個外掛全部安裝。 
先安裝 vue-for-idea 外掛。
安裝完 vue-for-idea 外掛之後，需重新啟動 PhpStorm。
安裝 Vue.js 外掛。
安裝完 Vue.js 外掛之後，需重新啟動 PhpStorm。
PhpStorm -> Preferences -> Plugin 
  • 重新啟動後，確認 vue-for-idea 與 Vue.js 兩個外掛都已經安裝成功。

第一次執行 Vue.js

Vue.js 提供很多方式安裝
  1. 直接下載
  2. CDN
  3. NPM
  4. Vue-CLI
本文先以最簡單的 CDN 方式安裝 Vue.js。
welcome.blade.php2 2GitHub Commit : 在 blade 載入 Vue.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

<html>
    <head>
        <title>Laravel</title>

        <link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">

        <style>
            html, body {
                height: 100%;
            }

            body {
                margin: 0;
                padding: 0;
                width: 100%;
                display: table;
                font-weight: 100;
                font-family: 'Lato';
            }

            .container {
                text-align: center;
                display: table-cell;
                vertical-align: middle;
            }

            .content {
                text-align: center;
                display: inline-block;
            }

            .title {
                font-size: 96px;
            }
        </style>
    </head>
    <body>
        <div id="app" class="container">
            <div class="content">
                <div class="title">Laravel 5</div>
                <div>@{{ message }}</div>
            </div>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.js"></script>
        <script src="js/app.js"></script>
    </body>
</html>
45 行
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.js"></script>
直接以 CDN 載入 Vue.js。
46 行
1
<script src="js/app.js"></script>
將 Vue.js 的程式碼寫在 js/app.js。
42 行
1
<div>@{{ message }}</div>
使用 Vue.js 顯示 message 變數。
加上 @ 是為了告訴 Laravel 的 Blade 不要處理，交給 Vue.js 處理。
app.js3 3GitHub Commit : 新增 app.js
public/js/app.js
1
2
3
4
5
6
7
8
var vue = {
    el: '#app',
    data: {
        message: 'Vue.js 1'
    }
};

new Vue(vue);
建立 Vue 物件，vue 為其 constructor，設定了 el 與 data 屬性。
要將變數 message 為 Vue.js 1 的值，透過 data binding 顯示在 welcome.blade.php。
若能看到 Vue.js 1，表示 Vue.js 已經正常啟動。

安裝 Vue.js Library

目前為止雖然可以正常執行 Vue.js，不過那僅代表瀏覽器執行正常，並不代表 PhpStorm 認識 Vue.js，PhpStorm 目前也還無法對 Vue.js 做語法提示。
對於 Vue.js 的 CDN，PhpStorm 提出了警告，表示沒有本機版本，因此無法提供語法提示。
將滑鼠放在反白的 CDN 上，按熱鍵 ⌥ + ↩，選擇 Download library。
下載成功後，CDN 上的反白警告會消失。
PhpStorm -> Preferences -> Languages & Frameworks -> JavaScript -> Libraries
  • 會出現 vue，表示 Vue.js 的 external library 已經安裝成功，從此 PhpStorm 可以為 Vue.js 的 API 做語法提示。

Directive

只要輸入 v，就會顯示 Vue.js 專屬的 directive 了。
也支援 @ 開頭的 shorthand。

API

PhpStorm 的語法提示可以自動顯示 Vue.js 的 API 了。
若為 Vue.js 的 API，會加上 (vue)。

Vue 元件

按熱鍵 ⌃ + N 時，會出現 Vue File，可以讓我們直接新增 Vue 元件。
自動產生預設的 Vue 元件框架。
PhpStorm 可以認出 Vue 元件，且程式碼也不再出現任何錯誤警告。

Conclusion

  • PhpStorm 包含 WebStorm，所以也可以拿來開發 JavaScript，並對 JavaScript 加以測試、重構與偵錯，在 PhpStorm 打造好 Vue.js 的開發環境後，就可以開心的學習 Vue.js 了。
  • 目前 vue-for-idea 與 Vue.js 這兩個外掛仍在持續開發中，功能還不夠完整，希望 JetBrains 能趕快針對 Vue.js 開發出專屬套件，讓 PhpStorm 開發 Vue.js 更有效率。

Sample Code


完整的範例可以在我的 GitHub 上找到。
張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)

wibiya widget