Vue.js 入門

Vue-cli 環境安裝:

1. 安裝Node.js (直接到官網下載安裝)
2. 安裝Vue-cli:

npm install -g vue-cli

建立專案:

使用webpack建立project, 如以下範例hello-vue為project name:

vue init webpack hello-vue

執行專案:

在專案目錄下執行指令:

npm run dev

打開瀏覽器輸入 http://localhost:8080即可打開網頁，只要修改程式碼存檔後，不用重新整理網頁，即可即時看到修改後的樣子!

若是開發完要上線，使用以下指令打包code:

npm run build

project下會多一個資料夾 dist/ ，這個就是build完的code，放上server就等於上線了!

假設是用sublime當作開發工具，可以安裝以下兩個套件:

高亮程式碼 — 

1. 快捷鍵Ctrl+Shift+P，Mac 為Cmd+Shift+P，叫出 Package Control
2. 輸入Install，選擇Package Control: Install Package
3. 輸入Vue Syntax Highlight並安裝，完成後選擇View - Syntax - Vue Component

整理樣板 -

快捷鍵Ctrl+Shift+P，Mac 為Cmd+Shift+P，叫出 Package Control 輸入Install，選擇Package Control: Install Package 輸入 prettify 並選擇 HTML-CSS-JS Pretiffy 這樣就可以整理 .vue 程式碼了

程式碼: 如下圖，src就是主要coding的地方，其中main.js, App.vue就是程式進入點，接下來逐一解說! 畫面如下: 點了連結二之後，畫面如下: 再點首頁，則回到一開始的畫面: 因此可以發現，router可以用來替換SPA的某個block UI，切換router url也會跟著變! 程式碼解釋: App.vue中可以看到router-link，其中的to可以指定當點下去連結後，要在router-view/顯示哪一個component的設定頁面! 等於是在同一個區塊替換UI. App.vue中的router-link的to其實就是對應到index.js中的router path，每個path都會有對應的component，因此點了之後才會有替換UI的效果! 其中SiteFooter則是引用進來的自定義components，SiteFooter/SiteFooter這個tag則是會替換成SiteFooter.vue裡面定義的html. 使用third party library bootstrap: 1. 使用npm指令安裝: npm install jquery --save npm install bootstrap --save npm install popper.js --save 2. 下完指令後，在node_modules可以看到安裝好的套件。 3. 設定 webpack.base.conf.js 在build資料夾下: 在最上方引入webpack: const webpack = require('webpack') 在module.exports = {}後面新增以下程式碼 : plugins: [  new webpack.ProvidePlugin({    $: "jquery",    jQuery: "jquery"  }) ] 若出現ReferenceError: $ is not defined這個錯誤訊息，是因為 eslint 檢查語法的關係，關閉的方法為編輯 .eslintrc.js 檔案，在 env 裡添加jquery: true 最後看看加入bootstrap及jquery 語法測試後的畫面: 修改後程式碼如下，在main.js import bootsrtap意思是全域載入 bootstrap，當然也可以需要的component再import就好: 完整source code在這: 結論: 簡單的說，vue.js的理念其實就是把一個網頁解構成多個元件(component)，不僅提高了程式碼的可維護性，且components是可以重複使用的，以前做過的common component，在新的project就可以直接import來用，而且這種架構也可以達到分工的目的，例如有人負責header、有人負責body，有人負責footer...等等。 本筆記參考: https://qq7886.gitbooks.io/vue-cli-2018/content/