Coding Diary

Vue 101-Day 2

24 Apr 2019 |

Vue安裝完後，就可以建立第一個專案囉。

建立新專案

使用Vue CLI建立一個新的專案

$ vue init webpack my-vue-project
or
$ vue create my-vue-project ## Vue CLI 3以上才有支援

安裝的過程也會問要不要使用ESLint、是否設定unit tests…等，這些都可以依據使用者做出調整。

專案目錄架構

Vue

資料夾/檔案名稱 描述
build 對 webpack 開發和打包的相關設定
config 項目配置
node_modules 第三方library，清單放置於package.json
src 開發資料夾
static 靜態資源資料夾
test 測試文件目錄
.babelrc 使用 babel 的配置檔案
.editorconfig 使用不同的 IDEs 保持檔案格式一致性的設定檔
.eslintignore 指定 eslint 忽略的檔案
.eslintrc.js 配置 eslint 的檢測規則
.gitignore git設定檔，讓指定檔案不會進入版控
.postcssrc.js 指定使用的 css 預編譯器
index.html 網頁進入點
package-lock.json 鎖定安裝依賴時包的版本資訊
package.json 第三方library 清單與版本資訊
README.md 專案說明文件

src資料夾內的結構

資料夾/檔案名稱 描述
assets 靜態資源資料夾
components UI Component
router 路由設定
App.vue root Component
main.js 程式進入點

assets 與 static

首先要先瞭解Webpack如何處理靜態資源檔

In *.vue components, all your templates and CSS are parsed by vue-html-loader and css-loader to look for asset URLs.

舉例來說：<img src="./logo.png">，使用的是相對路徑，因為logo.png並不是JavaScript，會被Webpack當作module dependency來處理，所以會使用url-loader及file-loader來處理。

因為再build的過程中，這些資源可能會被內嵌、複製、重新命名，本質上就是source code

real static assets

static內的資料，不會被Webpack處理，會被直接複製到final destination，也不會更改檔名，必須使用絕對路徑引用 引用的方式則是會參考config.js底下的assetsPublicPath 及 assetsSubDirectory

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    ...
  },
}
  • assets：被Webpack解析視為module dependency，只支援相對路徑
  • static：不會被Webpack處理，會被直接複製到final destination，也不會更改檔名，使用絕對路徑

參考資料：

Comments