Vic Lin的沙龍

Vue.js 入門

Vic Lin
Vic Lin
2019/10/30閱讀時間約 5 分鐘

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當作開發工具，可以安裝以下兩個套件:

高亮程式碼 — Vue Syntax Highlight

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

整理樣板 -HTML-CSS-JS Prettify

  1. 快捷鍵Ctrl+Shift+P，Mac 為Cmd+Shift+P，叫出 Package Control
  2. 輸入Install，選擇Package Control: Install Package
  3. 輸入 prettify 並選擇 HTML-CSS-JS Pretiffy
  4. 這樣就可以整理 .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在這:
snailsmall612/vue-cli-hello-world
You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…github.coma
結論:
簡單的說，vue.js的理念其實就是把一個網頁解構成多個元件(component)，不僅提高了程式碼的可維護性，且components是可以重複使用的，以前做過的common component，在新的project就可以直接import來用，而且這種架構也可以達到分工的目的，例如有人負責header、有人負責body，有人負責footer...等等。
本筆記參考: https://qq7886.gitbooks.io/vue-cli-2018/content/
為什麼會看到廣告
Vic Lin的沙龍
20會員
161內容數
前往沙龍
前往沙龍
留言0
查看全部
發表第一個留言支持創作者！