關於 Vue Cli 目錄結構

關於 Vue Cli 目錄結構

vue cli 目錄結構

註記:O 表示目前存在的目錄及檔案

├─build                                 // 保存一些 webpack 的初始化配置,項目建構
│ ├─build.js                          // 生產環境建構
│ ├─check-version.js           // 檢查 npm、node 版本
│ ├─vue-loader.conf.js         // webpack loader配置
│ ├─webpack.base.conf.js   // webpack 基礎配置
│ ├─webpack.dev.conf.js     // 開發環境配置,建構本地開發服務器
│ ├─webpack.prod.conf.js   // 生產環境配置│
├─config                               // config 文件夹保存一些項目初始化的配置
│ ├─dev.env.js                     // 開發環境的配置
│ ├─index.js                        // 項目一些配置變量
│ ├─prod.env.js                   // 生產環境的配置
├─dist                                  O// 打包後的項目
├─node_modules                O// 依賴包
├─public                              O// 公開文件目錄
│ ├─ favicon.ico                  O// 網站 icon
│ ├─ index.html                   O// 頁面入口文件
├─src                                   O// 原碼目錄
│ ├─assets                          O// 靜態文件目錄
│ │ ├─css                            O// 管理 css 文件
│ │ │ ├─ base                      O// 網站基本樣式設定 
│ │ │ ├─ components          O// 組件相關樣式
│ │ │ ├─ layout                    O// 整體布局上的設定,如 RWD 的文件
│ │ │ ├─ pages                    O// view 相關樣式
│ │ │ ├─ utils                       O// 能夠幫助建構式的 scss 檔案。如變數(variable)、樣式方法(funcion)等
│ │ │ ├─ theme                    O// 主題相關
│ │ │ ├─ vendors                 O// 放外部提供的 CSS 檔,而非自己的都可以放這
│ │ │ ├─ vendors-extensions  O// 有時外部提供的 css,有會有覆蓋重新設計的需求,就將這些檔案放在這裡
│ │ │ └─ app.scss                O// 引入所有 scss 檔案
│ │ └─image                         //圖片檔案
│ ├─components                 O// 小配件組件
│ ├─views                            O// 畫面組件
│ ├─router                            O// 路由
│ ├─App.vue                        O// 是項目入口文件
│ ├─main.js                          O// 是項目的核心文件,入口
├─static                                // 靜態資料目錄 
├─.babelrc.config.js              O// Babel 的配置文件
├─.editorconfig                     // 代碼規範配置文件
├─.gitignore                          O// git 忽略配置文件
├─.postcssrc.js                     // postcss插件配置文件
├─package.json                   O// 項目配置
├─README.md                   O// 項目說明書
├─vue.config.js                    O//  vue 的管理文件
└─yarn.lock                          O// 項目包管控文件

參考資料

  1. vue-cli 目錄結構詳細講解

css 管理 css 文件

優化 css 管理目標

  1. 易維護、好管理、重用程式碼
  2. 樣式與 html、vue 邏輯分離
  3. 建立主題樣式
  4. 可以快速移植熟悉的樣式設計到下一份專案

首先先在 src>assets 資料夾下,新增一個名為 css 的資料夾,css 資料夾下,可以根據需求來建立這些資料夾項目。
資料夾底下的SCSS檔案會以下畫線開頭來命名scss,因為以下劃線作為前綴的檔案,sass就不會將他編譯成單獨的css文件,會通過其他文件的引用,最後生成一份大的css檔案

├─css                   // 管理 css 文件
│ ├─ base               // 網站基本樣式設定 
│ ├─ components         // 組件相關樣式
│ ├─ layout             // 整體布局上的設定,如 RWD 的文件
│ ├─ pages              // view 相關樣式
│ ├─ utils              // 能夠幫助建構式的 scss 檔案。如變數(variable)、樣式方法(funcion)等
│ ├─ theme              // 主題為某個專案常用且只在這個專案出現
│ ├─ vendors            // 放外部提供的 CSS 檔,而非自己的都可以放這
│ ├─ vendors-extensions // 有時外部提供的 css,有會有覆蓋重新設計的需求,就將這些檔案放在
│ └─ app.scss           // 引入所有 scss 檔案
base 基礎相關
  • _reset.scss       O// 重置 CSS 樣式
  • _basic.scss       O// 基本樣式
  • _border.scss     O// 邊框樣式
  • _content.scss    O// 內容樣式
  • _display.scss     O// 排版樣式
  • _float.scss         O// 浮動樣式
  • _shadow.scss    O// 陰影樣式
  • _spacing.scss    O// 字體間距樣式
  • _text.scss          O// 文字樣式      
components 組件相關
  • _header.scss              O// 自定義的 header 樣式
  • _footer.scss                O// 自定義的 footer 樣式
  • _navbar.scss              O// 自定義的 navbar 樣式
  • _headerTop.scss        O// 自定義的 headerTop 樣式
  • _footerBottom.scss    O// 自定義的 footerBottom 樣式    
layout 布局相關 (RWD)
  • _rwd.scss        //參考 Element UI 的響應式設定
pages view 相關
  • _index.scss              // 首頁
  • _userInfo.scss         // 用戶訊息
  • _userSetting.scss    // 用戶設定
utils: 建構 SCSS 相關
  • _function.scss         //樣式方法
  • _mixin.scss             //樣式混合
  • _variables.scss       //樣式變數
theme: 主題相關
  •  
vendors 外部 CSS 相關
  • _animated.scss    //動畫樣式
vendors-extensions: 外部 CSS 另行自訂相關
  • _element-ui.scss  //自訂 element-ui 的樣式

建立完所有文件後,把所有 scss 檔案引入到 app.scss (@import時不用加下劃線),作為唯一的 scss 文件 import 到 App.vue 之中。

如此一來,就可以在各個文件種引用 utils/_variables.scss下的變數 (因為只編譯成一大份css檔案),以及只有一個出口文件,清楚明瞭

// app.scss

  // Utils
  @import 'utils/mixin';

  // Base
  @import 'base/basic.scss';
  ...

// App.vue 
// 樣式引入到 App.vue 中

<template>
 <div id="app">
  <router-view></router-view>
 </div>
</template>

<script>
import '@/assets/css/app.scss';
export default{ }
</script>

參考資料

  1. Vue專案中的css管理策略 — 利用scss將樣式模組化

 


components 小配件組件

  • components 目前先以靜態方式撰寫資料
  • 熟練父傳子、子傳父親資料傳遞方式與建立範本
  • 待開始組織大的網頁時,資料以父傳子、子傳父的方式撰寫

vue.config.js  vue 的管理文件

這是一個可選的配置文件,和 pacjage.json 同級的跟目錄中存在,它會被 @vue/cli-server 自動加載

publicPath

如果 Vue cli 會假設你的應用是被部署在一個域名的根路徑上,例如 https://www.my-app.com/。你就需要用這個選項指定這個子路徑。

例如,你的應用被部署在https://www.my-app.com/my-app/,則設置 publicPath/my-app/

publicPath 這個值也可以被設置為空字串 ' ' 或是相對路徑 ./,這樣所有的資源都會被連結為相對路徑,這樣打出來的包可以被部署在任意路徑。

module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
        ? '/my-app/'
        : './'
}

參考資料

  1. vue.config.js