PJCHENder 未整理筆記

[Vue] vue-cli 使用筆記

2019-05-12

[Vue] vue-cli 使用筆記

Vue CLI @ Official Website

安裝

1
2
3
4
$ npm install -g @vue/cli
$ vue --version

$ npm update -g @vue/cli # 更新

基本(Basic)

建立專案

1
$ vue create forum-frond-end

使用 Vue CLI 提供的 GUI

1
$ vue ui

如果需要使用到 vue-routervuex 的話:

1
2
$ vue add router
$ vue add vuex

開發(Development)

HTML and Static Assets

URL 轉換規則

  • 如果 URL 是絕對路徑(e.g. /images/foo.png),它將被完整保留
  • 如果 URL 以 . 開頭,則會根據檔案系統中的資料夾結構產生相對路徑
  • 如果 URL 以 ~ 開頭,可以存取到 node modules 裡的內容,例如,<img src="~some-npm-package/foo.png">
  • 如果 URL 以 @ 開頭,指的是 <projectRoot>/src 的別名(僅可在 template 使用)

Working with CSS

  • 如果要指稱到 node modules 裡面的檔案,記得以 ~ 開頭。
Tags: vue

掃描二維條碼,分享此文章