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: 存放不會(huì)變動(dòng)靜態(tài)的文件，它與src/assets的區(qū)別在于，public目錄中的文件不被webpack打包處理，會(huì)原
樣拷貝到dist目錄下
    |-- index.html: 主頁(yè)面文件
    |-- 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)瀏覽器范圍, 對(duì)應(yīng)是package.json 的 browserslist選項(xiàng)
|-- .eslintrc.js: eslint相關(guān)配置
|-- .gitignore: git 版本管制忽略的配置
|-- babel.config.js: babel 的配置,即ES6語(yǔ)法編譯配置
|-- package-lock.json: 用于記錄當(dāng)前狀態(tài)下實(shí)際安裝的各個(gè)包的具體來(lái)源和版本號(hào)等, 保證其他人在 npm install 項(xiàng)
目時(shí)大家的依賴能保證一致.
|-- package.json: 項(xiàng)目基本信息,包依賴配置信息等
|-- postcss.config.js: postcss一種對(duì)css編譯的工具，類似babel對(duì)js的處理
|-- README.md: 項(xiàng)目描述說(shuō)明的 readme 文件

• package.json ：這是一個(gè)重要的配置文件，用于定義項(xiàng)目的依賴項(xiàng)、腳本命令和其他元數(shù)據(jù)。它包含了項(xiàng)目的名稱、版本號(hào)、作者等信息，還列出了項(xiàng)目所需的各種包依賴。這個(gè)文件是使用npm（Node Package Manager）進(jìn)行包管理和構(gòu)建的基礎(chǔ)。
• public 文件夾：這個(gè)文件夾包含了一些靜態(tài)資源，如HTML文件、圖標(biāo)和其他非編譯的文件。在構(gòu)建過(guò)程中，這些文件會(huì)直接復(fù)制到最終的構(gòu)建目錄中，可以在這里放置一些全局的資源。
• src 文件夾：這是你開(kāi)發(fā)項(xiàng)目的主要目錄。它包含了Vue組件、樣式文件、JavaScript文件和其他資源。下面是 src 文件夾中的一些重要文件和文件夾：
  • main.js ：這是項(xiàng)目的入口文件，用于初始化Vue應(yīng)用實(shí)例，并將根組件掛載到DOM中。你可以在這里引入全局樣式、插件和其他配置。
  • App.vue ：這是根組件，是整個(gè)應(yīng)用的容器。它可以包含其他組件，并定義應(yīng)用的整體結(jié)構(gòu)和布局。
  • components 文件夾：這個(gè)文件夾用于存放應(yīng)用的各種Vue組件。你可以根據(jù)需要?jiǎng)?chuàng)建子文件夾來(lái)組織組件。
  • assets 文件夾：這個(gè)文件夾用于存放應(yīng)用所需的靜態(tài)資源，如圖像、字體文件等。
  • router 文件夾：如果你在初始化項(xiàng)目時(shí)選擇了Vue Router插件，這個(gè)文件夾將包含用于定義路由的文件。
  • views 文件夾：這個(gè)文件夾通常用于存放與路由對(duì)應(yīng)的視圖組件，每個(gè)視圖組件對(duì)應(yīng)應(yīng)用中的一個(gè)頁(yè)面。
• node_modules 文件夾：這個(gè)文件夾包含了項(xiàng)目所需的所有依賴包，這些包是通過(guò) package.json 文件中的配置來(lái)安裝的。你不需要手動(dòng)管理這個(gè)文件夾，npm會(huì)自動(dòng)安裝和更新依賴。

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

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

2.1 src文件下各文件使用示例說(shuō)明：

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 是根組件，是整個(gè)應(yīng)用的容器，定義應(yīng)用的整體結(jié)構(gòu)和布局。
• 它可以包含其他組件，并通過(guò)插槽（slot）或路由（Vue Router）加載不同的內(nèi)容。
• 例如，一個(gè)簡(jiǎn)單的 App.vue 可能包含一個(gè)導(dǎo)航欄和一個(gè)內(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ù)需要?jiǎng)?chuàng)建子文件夾來(lái)組織組件。
• 例如，你可以在 components 文件夾下創(chuàng)建一個(gè) 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)資源，如圖像、字體文件等。
• 這些資源可以在組件中通過(guò)相對(duì)路徑引用。
• 例如，你可以將應(yīng)用的Logo圖像放置在 assets 文件夾下，并在組件中使用它：

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

router 文件夾：

• 如果你在初始化項(xiàng)目時(shí)選擇了Vue Router插件， router 文件夾將包含用于定義路由的文件。
• 你可以在這里配置應(yīng)用的路由規(guī)則和相應(yīng)的組件。
• 例如，在 router/index.js 文件中定義一個(gè)簡(jiǎn)單的路由規(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. 腳手架整體的加載過(guò)程：

• 當(dāng)你啟動(dòng)開(kāi)發(fā)服務(wù)器或構(gòu)建項(xiàng)目時(shí)，Vue CLI會(huì)讀取package.json文件中的配置信息，并執(zhí)行相應(yīng)的腳本命令。
• 在執(zhí)行腳本命令之前，Vue CLI會(huì)使用Webpack等工具根據(jù)配置文件（如vue.config.js）進(jìn)行項(xiàng)目的構(gòu)建和打包。
• 在構(gòu)建過(guò)程中，Webpack會(huì)根據(jù)main.js文件作為入口文件，逐個(gè)解析和加載其他組件、樣式文件和資源文件。
• 當(dāng)main.js文件被加載時(shí)，它會(huì)創(chuàng)建Vue應(yīng)用實(shí)例，并將根組件App.vue掛載到HTML頁(yè)面的特定DOM元素上。
• 根組件App.vue可以包含其他組件，這些組件會(huì)在需要時(shí)被動(dòng)態(tài)加載和渲染。
• 當(dāng)應(yīng)用程序運(yùn)行時(shí)，Vue會(huì)根據(jù)路由配置（如果有）動(dòng)態(tài)加載和渲染相應(yīng)的視圖組件。

到此這篇關(guān)于淺談vue 腳手架文件結(jié)構(gòu)及加載過(guò)程的文章就介紹到這了,更多相關(guān)vue 腳手架加載過(guò)程內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論