關於 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// 項目包管控文件
參考資料
css 管理 css 文件
優化 css 管理目標
- 易維護、好管理、重用程式碼
- 樣式與 html、vue 邏輯分離
- 建立主題樣式
- 可以快速移植熟悉的樣式設計到下一份專案
首先先在 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 檔案
- _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// 文字樣式
- _header.scss O// 自定義的 header 樣式
- _footer.scss O// 自定義的 footer 樣式
- _navbar.scss O// 自定義的 navbar 樣式
- _headerTop.scss O// 自定義的 headerTop 樣式
- _footerBottom.scss O// 自定義的 footerBottom 樣式
- _rwd.scss //參考 Element UI 的響應式設定
- _index.scss // 首頁
- _userInfo.scss // 用戶訊息
- _userSetting.scss // 用戶設定
- _function.scss //樣式方法
- _mixin.scss //樣式混合
- _variables.scss //樣式變數
- _animated.scss //動畫樣式
- _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>
參考資料
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/'
: './'
}
參考資料