iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
Modern Web

Vue.js 什麼意思系列 第 3

Day 03:觀察資料夾

建好專案之後,來看看專案裡已經幫你準備好哪些檔案吧!先大致認識每個資料夾如何分門別類的規則,日後自己在歸檔時也會相對有概念,更方便管理檔案、組織架構。
root

根目錄層

  1. public:主要放置 index.html 等公用資源

  2. dist:執行 npm run build 打包之後才會產生的資料夾,所以剛開始不會出現在根目錄中

  3. src:開發專案主要存放檔案的資料夾

  4. 配置檔們(.browserslistrc、.eslintrc.js、babel.config.js 等):可依專案需求新增配置檔

    • 新增 .prettierrc 自訂 Prettier formatter 的設定值

        "printWidth": 100,   // 每行寬度限定字元數(預設 80 字元)
        "singleQuote": true, // 是否使用單引號(預設 false)
      
    • 新增 vue.config.js 設定 webpack 全域引入共享 SCSS 資源

      module.exports = {
        css: {
          loaderOptions: {
            scss: {
              additionalData: `
              @import "@/assets/scss/styles/_color.scss";
              `,
            },
          },
        },
      };
      
  5. 專案資訊檔們:

    • node_modules:存放安裝的所有套件
    • .gitignore:設定 git 忽略追蹤的檔案規則,呈現灰色,例如 node_modules、/dist 等
    • package.json:記錄專案設定、npm 執行指令以及所使用的套件
    • package-lock.json:記錄並鎖定專案所安裝的套件來源及版本

src 主場層(source)

  1. assets:存放靜態資源,例如 images、css 等
  2. components:存放自定義的元件
  3. router:存放所設置的路由元件
  4. store:存放 Vuex 管理的狀態庫
  5. views:存放顯示在畫面上的路由元件
    • 將 components 裡的元件引入給 views 裡的路由元件使用,例如在 Home.vue 中就使用了 HelloWorld.vue 元件
      <script>
      import HelloWorld from "@/components/HelloWorld.vue";
      
      export default {
        name: "Home",
        components: {
          HelloWorld,
        },
      };
      </script>
      
  6. App.vue:整個專案裡的核心主件,在此進行切換路由元件並渲染出相應頁面
    • 以巢狀結構來看,App.vue 會是第一層,其他路由元件則會列在第二層之後,因此也可考慮在此層放置所有頁面都存有的共通元件作為固定班底,例如 Header、Navbar、Footer 等
  7. main.js:程式進入點,完成初始化 Vue instance 並掛載到 App.vue 上
    • 同時會將專案中所需的 plugins 引入至此

依專案規模可在 src 新增其他目錄

  1. plugins:放置 Vue 相關的插件,例如 BootstrapVue、Vue I18n 等
  2. utils:放置通用檔案,例如 axios 等

參考資料


上一篇
Day 02:Vue 個專案先
下一篇
Day 04:.vue 檔三層櫃
系列文
Vue.js 什麼意思30

尚未有邦友留言

立即登入留言