1. 初始化腳手架

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

　　1.2 切換到創(chuàng)建項(xiàng)目的目錄，執(zhí)行 vue create projectname

　　1.3 選擇符合自己要求的項(xiàng)進(jìn)行Y/N，最終生成項(xiàng)目文件

2. 腳手架文件結(jié)構(gòu)

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

1. package.json：這是一個重要的配置文件，用于定義項(xiàng)目的依賴項(xiàng)、腳本命令和其他元數(shù)據(jù)。它包含了項(xiàng)目的名稱、版本號、作者等信息，還列出了項(xiàng)目所需的各種包依賴。這個文件是使用npm（Node Package Manager）進(jìn)行包管理和構(gòu)建的基礎(chǔ)。

2. public文件夾：這個文件夾包含了一些靜態(tài)資源，如HTML文件、圖標(biāo)和其他非編譯的文件。在構(gòu)建過程中，這些文件會直接復(fù)制到最終的構(gòu)建目錄中，可以在這里放置一些全局的資源。

3. src文件夾：這是你開發(fā)項(xiàng)目的主要目錄。它包含了Vue組件、樣式文件、JavaScript文件和其他資源。下面是src文件夾中的一些重要文件和文件夾：

   • main.js：這是項(xiàng)目的入口文件，用于初始化Vue應(yīng)用實(shí)例，并將根組件掛載到DOM中。你可以在這里引入全局樣式、插件和其他配置。

   • App.vue：這是根組件，是整個應(yīng)用的容器。它可以包含其他組件，并定義應(yīng)用的整體結(jié)構(gòu)和布局。

   • components文件夾：這個文件夾用于存放應(yīng)用的各種Vue組件。你可以根據(jù)需要創(chuàng)建子文件夾來組織組件。

   • assets文件夾：這個文件夾用于存放應(yīng)用所需的靜態(tài)資源，如圖像、字體文件等。

   • router文件夾：如果你在初始化項(xiàng)目時選擇了Vue Router插件，這個文件夾將包含用于定義路由的文件。

   • views文件夾：這個文件夾通常用于存放與路由對應(yīng)的視圖組件，每個視圖組件對應(yīng)應(yīng)用中的一個頁面。

4. node_modules文件夾：這個文件夾包含了項(xiàng)目所需的所有依賴包，這些包是通過package.json文件中的配置來安裝的。你不需要手動管理這個文件夾，npm會自動安裝和更新依賴。

注：?components文件夾通常用于存放可復(fù)用的、通用的組件，這些組件可以在應(yīng)用的不同部分進(jìn)行重復(fù)使用。views文件夾通常用于存放與路由對應(yīng)的視圖組件，每個視圖組件對應(yīng)應(yīng)用中的

一個頁面。這些組件通常較大粒度，包含了特定頁面的整體結(jié)構(gòu)和布局，可能由多個小組件組成。

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

main.js：

• main.js是項(xiàng)目的入口文件，用于初始化Vue應(yīng)用實(shí)例并將根組件掛載到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是根組件，是整個應(yīng)用的容器，定義應(yīng)用的整體結(jié)構(gòu)和布局。
• 它可以包含其他組件，并通過插槽（slot）或路由（Vue Router）加載不同的內(nèi)容。
• 例如，一個簡單的App.vue可能包含一個導(dǎo)航欄和一個內(nèi)容區(qū)域：

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

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

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

components文件夾：

• components文件夾用于存放應(yīng)用的各種Vue組件。
• 你可以根據(jù)需要創(chuàng)建子文件夾來組織組件。
• 例如，你可以在components文件夾下創(chuàng)建一個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文件夾用于存放應(yīng)用所需的靜態(tài)資源，如圖像、字體文件等。
• 這些資源可以在組件中通過相對路徑引用。
• 例如，你可以將應(yīng)用的Logo圖像放置在assets文件夾下，并在組件中使用它：

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

router文件夾：

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

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;

3.? 腳手架整體的加載過程：

1. 當(dāng)你啟動開發(fā)服務(wù)器或構(gòu)建項(xiàng)目時，Vue CLI會讀取package.json文件中的配置信息，并執(zhí)行相應(yīng)的腳本命令。

2. 在執(zhí)行腳本命令之前，Vue CLI會使用Webpack等工具根據(jù)配置文件（如vue.config.js）進(jìn)行項(xiàng)目的構(gòu)建和打包。

3. 在構(gòu)建過程中，Webpack會根據(jù)main.js文件作為入口文件，逐個解析和加載其他組件、樣式文件和資源文件。

4. 當(dāng)main.js文件被加載時，它會創(chuàng)建Vue應(yīng)用實(shí)例，并將根組件App.vue掛載到HTML頁面的特定DOM元素上。

5. 根組件App.vue可以包含其他組件，這些組件會在需要時被動態(tài)加載和渲染。

6. 當(dāng)應(yīng)用程序運(yùn)行時，Vue會根據(jù)路由配置（如果有）動態(tài)加載和渲染相應(yīng)的視圖組件。

?文章來源地址http://www.zghlxwxcb.cn/news/detail-667082.html

到了這里，關(guān)于vue 腳手架文件結(jié)構(gòu)及加載過程淺談的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！