vue 腳手架文件結構及載入過程淺談

1. 初始化腳手架 1.1 全局安裝 @vue/cli npm install -g @vue/cli 1.2 切換到創建項目的目錄，執行 vue create projectname 1.3 選擇符合自己要求的項進行Y/N，最終生成項目文件 2. 腳手架文件結構 |-- node_modules: ...

1. 初始化腳手架

　　1.1 全局安裝 @vue/cli npm install -g @vue/cli

　　1.2 切換到創建項目的目錄，執行 vue create projectname

　　1.3 選擇符合自己要求的項進行Y/N，最終生成項目文件

2. 腳手架文件結構

|-- node_modules: 存放下載依賴的文件夾
|-- public: 存放不會變動靜態的文件，它與src/assets的區別在於，public目錄中的文件不被webpack打包處理，會原
樣拷貝到dist目錄下
    |-- index.html: 主頁面文件
    |-- favicon.ico: 在瀏覽器上顯示的圖標
|-- src: 源碼文件夾
    |-- assets: 存放組件中的靜態資源
    |-- components: 存放一些公共組件
    |-- views: 存放所有的路由組件
    |-- router: 存放路由配置信息
    |-- store: 存放公共狀態 vuex
    |-- App.vue: 應用根主組件
    |-- main.js: 應用入口 js
|-- .browserslistrc: 指定了項目可相容的目標瀏覽器範圍, 對應是package.json 的 browserslist選項
|-- .eslintrc.js: eslint相關配置
|-- .gitignore: git 版本管制忽略的配置
|-- babel.config.js: babel 的配置,即ES6語法編譯配置
|-- package-lock.json: 用於記錄當前狀態下實際安裝的各個包的具體來源和版本號等, 保證其他人在 npm install 項
目時大家的依賴能保證一致.
|-- package.json: 項目基本信息,包依賴配置信息等
|-- postcss.config.js: postcss一種對css編譯的工具，類似babel對js的處理
|-- README.md: 項目描述說明的 readme 文件

package.json：這是一個重要的配置文件，用於定義項目的依賴項、腳本命令和其他元數據。它包含了項目的名稱、版本號、作者等信息，還列出了項目所需的各種包依賴。這個文件是使用npm（Node Package Manager）進行包管理和構建的基礎。
public文件夾：這個文件夾包含了一些靜態資源，如HTML文件、圖標和其他非編譯的文件。在構建過程中，這些文件會直接複製到最終的構建目錄中，可以在這裡放置一些全局的資源。
src文件夾：這是你開發項目的主要目錄。它包含了Vue組件、樣式文件、JavaScript文件和其他資源。下麵是src文件夾中的一些重要文件和文件夾：
- main.js：這是項目的入口文件，用於初始化Vue應用實例，並將根組件掛載到DOM中。你可以在這裡引入全局樣式、插件和其他配置。
- App.vue：這是根組件，是整個應用的容器。它可以包含其他組件，並定義應用的整體結構和佈局。
- components文件夾：這個文件夾用於存放應用的各種Vue組件。你可以根據需要創建子文件夾來組織組件。
- assets文件夾：這個文件夾用於存放應用所需的靜態資源，如圖像、字體文件等。
- router文件夾：如果你在初始化項目時選擇了Vue Router插件，這個文件夾將包含用於定義路由的文件。
- views文件夾：這個文件夾通常用於存放與路由對應的視圖組件，每個視圖組件對應應用中的一個頁面。
node_modules文件夾：這個文件夾包含了項目所需的所有依賴包，這些包是通過package.json文件中的配置來安裝的。你不需要手動管理這個文件夾，npm會自動安裝和更新依賴。

註： components文件夾通常用於存放可復用的、通用的組件，這些組件可以在應用的不同部分進行重覆使用。views文件夾通常用於存放與路由對應的視圖組件，每個視圖組件對應應用中的

一個頁面。這些組件通常較大粒度，包含了特定頁面的整體結構和佈局，可能由多個小組件組成。

2.1 src文件下各文件使用示例說明：

main.js：

main.js是項目的入口文件，用於初始化Vue應用實例並將根組件掛載到DOM中。
你可以在main.js中引入全局樣式、插件和其他配置。
例如，在main.js中引入全局CSS文件：

import Vue from 'vue';
import App from './App.vue';
import './assets/global.css';

new Vue({
  render: h => h(App)
}).$mount('#app');

App.vue：

App.vue是根組件，是整個應用的容器，定義應用的整體結構和佈局。
它可以包含其他組件，並通過插槽（slot）或路由（Vue Router）載入不同的內容。
例如，一個簡單的App.vue可能包含一個導航欄和一個內容區域：

<template>
  <div>
    <Navbar />
    <router-view />
  </div>
</template>

<script>
import Navbar from './components/Navbar.vue';

export default {
  components: {
    Navbar
  }
};
</script>

components文件夾：

components文件夾用於存放應用的各種Vue組件。
你可以根據需要創建子文件夾來組織組件。
例如，你可以在components文件夾下創建一個Button.vue組件，併在其他組件中引用它：

<template>
  <button class="button">{{ label }}</button>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      required: true
    }
  }
};
</script>

<style scoped>
.button {
  /* 樣式定義 */
}
</style>

assets文件夾：

assets文件夾用於存放應用所需的靜態資源，如圖像、字體文件等。
這些資源可以在組件中通過相對路徑引用。
例如，你可以將應用的Logo圖像放置在assets文件夾下，併在組件中使用它：

<template>
  <img src="@/assets/logo.png" alt="Logo">
</template>

router文件夾：

如果你在初始化項目時選擇了Vue Router插件，router文件夾將包含用於定義路由的文件。
你可以在這裡配置應用的路由規則和相應的組件。
例如，在router/index.js文件中定義一個簡單的路由規則：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

const router = new VueRouter({
  routes
});

export default router;