Vue.js 入門

Vue-cli 環境安裝:

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

npm install -g vue-cli

建立專案:

vue init webpack hello-vue

執行專案:

npm run dev

npm run build

高亮程式碼 — 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 程式碼了

程式碼:

畫面如下:

程式碼解釋:

使用third party library bootstrap:

npm install jquery --save
npm install bootstrap --save
npm install popper.js --save

const webpack = require('webpack')

plugins: [
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery"
  })
]

本筆記參考: https://qq7886.gitbooks.io/vue-cli-2018/content/