Vue项目开发目录结构和引用调用关系
本文精華總結(jié)：在項目運行中，main.js作為項目的入口文件，運行中，找到其實例需要掛載的位置，即index.html中，剛開始，index.html的掛載點處的內(nèi)容會被顯示，但是隨后就被實例中的組件中的模板中的內(nèi)容所取代，所以我們會看到有那么一瞬間會顯示出index.html中正文的內(nèi)容，而index.html中的Title部分不會被取代，所以會一直保留。
下圖為Vue項目文件夾：
以下就項目文件夾中的各文件的作用進(jìn)行介紹：
├── build/ # Webpack 配置目錄 ├── dist/ # build 生成的生產(chǎn)環(huán)境下的項目 ├── config/ # Vue基本配置文件，可以設(shè)置監(jiān)聽端口，打包輸出等 ├── node_modules/ # 依賴包，通常執(zhí)行npm i會生成 ├── src/ # 源碼目錄（開發(fā)的項目文件都在此文件中寫） │ ├── assets/ # 放置需要經(jīng)由 Webpack 處理的靜態(tài)文件，通常為樣式類文件，如css，sass以及一些外部的js │ ├── components/ # 公共組件 │ ├── filters/ # 過濾器 │ ├── store/ # 狀態(tài)管理 │ ├── routes/ # 路由，此處配置項目路由 │ ├── services/ # 服務(wù)（統(tǒng)一管理 XHR 請求） │ ├── utils/ # 工具類 │ ├── views/ # 路由頁面組件 │ ├── App.vue # 根組件 │ ├── main.js # 入口文件 ├── index.html # 主頁，打開網(wǎng)頁后最先訪問的頁面 ├── static/ # 放置無需經(jīng)由 Webpack 處理的靜態(tài)文件，通常放置圖片類資源 ├── .babelrc # Babel 轉(zhuǎn)碼配置 ├── .editorconfig # 代碼格式 ├── .eslintignore # （配置）ESLint 檢查中需忽略的文件（夾） ├── .eslintrc # ESLint 配置 ├── .gitignore # （配置）在上傳中需被 Git 忽略的文件（夾） ├── package.json # 本項目的配置信息，啟動方式 ├── package-lock.json # 記錄當(dāng)前狀態(tài)下實際安裝的各個npm package的具體來源和版本號 ├── README.md # 項目說明（很重要，便于其他人看懂）我們以后用到最多的就是src文件夾，因為我們編寫的代碼要放在里面。
一開始在學(xué)習(xí)Vue中，總是理解不清楚各文件之間的邏輯，所以導(dǎo)致自己一直在原地徘徊，在自己嘗試了微信小程序的開發(fā)之后，大致有了一個模糊的分時，反過頭來繼續(xù)從事Vue項目的開發(fā)，結(jié)果原來理不清的東西都豁然開朗了。
在根目錄下存在index.html文件，在src目錄下存在main.js，App.vue以及在router文件夾下存在index.js，搞清楚這幾個文件之間的關(guān)系將對后續(xù)開發(fā)理清思路。
index.html—主頁，項目入口
index.html為項目訪問的首站點，一般我們之定義一個空的根節(jié)點，在main.js里面定義的實例將掛載到根節(jié)點下，內(nèi)容都通過vue組件來進(jìn)行填充。
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>首頁title</title></head><body><div id="app"></div><!-- built files will be auto injected --></body> </html>App.vue—根組件
我們在Vue中要經(jīng)常建立后綴名為.vue的文件，.vue的文件通常由三部分構(gòu)成，分別用，與標(biāo)簽包裹。
我們可以將上述三個部分理解為原來我們學(xué)習(xí)前端的html，javascript與css三個部分。
其中，通常建立我們要用的網(wǎng)頁界面，通常與數(shù)據(jù)打交道，定義數(shù)據(jù)的首發(fā)方式等，面向邏輯，而主要負(fù)責(zé)標(biāo)簽中的樣式。
上面三者的結(jié)合，就構(gòu)成了我們所見到的網(wǎng)頁，一般我們在開發(fā)新的頁面中一般是建立一個新的.vue文件，在文件中完成三個環(huán)節(jié)的編寫。
<template><div id="app"><router-view></router-view></div> </template><script> export default {name: "app" }; </script> <style> .add-container {margin-bottom: 20px; } </style>補充：
【template】
其中模板只能包含一個父節(jié)點，也就是說頂層的div只能有一個（例如上圖，父節(jié)點為#app的div，其沒有兄弟節(jié)點）
是子路由視圖，后面的路由頁面都顯示在此處
打一個比喻吧，類似于一個插槽，跳轉(zhuǎn)某個路由時，該路由下的頁面就插在這個插槽中渲染顯示
【script】
vue通常用es6來寫，用export default導(dǎo)出，其下面可以包含數(shù)據(jù)data，生命周期(mounted等)，方法(methods)等。
【style】
樣式通過style標(biāo)簽
如要引入外部css文件，首先需給項目安裝css-loader依賴包，打開cmd，進(jìn)入項目目錄，輸入npm install css-loader,回車。安裝完成后，就可以在style標(biāo)簽下import所需的css文件。這樣，我們就可以把style下的樣式封裝起來，寫到css文件夾，再引入到頁面使用，整個vue頁面也看上去更簡潔。
<style> import './assets/css/public.css' </style>main.js—入口文件
main.js主要是引入vue框架，根組件及路由設(shè)置，并且定義vue實例，下圖中的
components:{App}就是引入的根組件App.vue
后期還可以引入插件，當(dāng)然首先得安裝插件。
主要作用是初始化vue實例并使用需要的插件。
import Vue from 'vue' /*引入vue框架*/ import ElementUI from 'element-ui' /*引入element-ui樣式*/ import App from './App' /*引入根組件*/ import router from './router' /*引入路由設(shè)置*/Vue.config.productionTip = false /關(guān)閉生產(chǎn)模式下給出的提示/
/定義一個新實例/
new Vue({el: '#app',router,store,template: '<App/>',components: { App } /*此處為引入的根組件的App.vue*/ })router.js—路由配置
在router文件夾下，有一個index.js文件，即為路由配置文件。
import Vue from ‘vue’ /引入vue框架/
import Router from ‘vue-router’ /引入路由依賴/
import Hello from ‘@、components/Hello’ /引入頁面組件，命名為Hello/
Vue.use(Router) /使用路由依賴/
/*定義路由*/ export default new Router({router:[ {path: '/login',name: 'login',component: login,meta: {title: '登錄頁'},},{path: '/register',component: Register,meta: {title: '注冊頁'}},{path: '/403',component: noPerm},{path: '/',name: 'index',component: Main,meta: {title: '首頁',// perm: true //設(shè)置權(quán)限(測試)}] })這里定義了路徑為’/‘的路由，該路由對應(yīng)的頁面是Hello組件，所以當(dāng)我們在瀏覽器url訪問http://localhost:8080/#/時就渲染的Hello組件.類似的，我們可以設(shè)置多個路由，‘/index’,’/list’之類的，當(dāng)然首先得引入該組件，再為該組件設(shè)置路由。
在webpack的配置文件里，設(shè)置了main.js是入口文件，我們的項目默認(rèn)訪問index.html，這個文件里面<div id="app"></div>和App.vue組件里面的容器完美的重合了，也就是把組件掛載到了index頁面，然后我們只需要去建設(shè)其他組件就好了，在App組件中我們也可以引入，注冊，應(yīng)用其他組件，后面我會介紹如何通過路由將其他組件渲染在App組件，這樣我們就只需要去關(guān)注每個組件的功能完善。
就是說vue的默認(rèn)頁面是index.html，index中的<div id="app"></div>掛載了App.vue這個大組件，然后所有的其他子組件（hello.vue等）都?xì)w屬在App.vue這個主組件下。
main.js 是入口文件，作用是初始化vue實例并使用需要的插件（router等）
關(guān)于Vue中main.js，App.vue，index.html之間關(guān)系進(jìn)行總結(jié)
在初始化的Vue項目中，我們最先接觸到的就是main.js，App.vue，index.html這三個文件，我們從培訓(xùn)視頻或者官方文檔上可以了解到：
index.html—主頁，項目入口
App.vue—根組件
main.js—入口文件
那么這幾個文件之間的聯(lián)系如何呢？
1.先看index.html中的內(nèi)容：（為了很好的標(biāo)識各個文件，我對各文件進(jìn)行了文字標(biāo)記）
2.在App.vue中，我做了如下處理：
3.在main.js中，文件初始內(nèi)容如圖：
那么我們打卡的網(wǎng)頁如何呢？
網(wǎng)頁效果如下：
也就是說，在網(wǎng)頁的Title部分，加載了index.html中定義的Title，而在正文部分，加載了App.vue中定義的部分。（但是需要注意的是，在瀏覽器打開的瞬間，瀏覽器中正文部分會瞬間顯示index.html中定義的正文部分）
那么，我們就可以來分析上述的邏輯了，瀏覽器訪問項目，最先訪問的是index.html文件，
而index.html中
<div id="app">來自index.html正文中的內(nèi)容</div>上面有一個id為app的掛載點，之后我們的Vue根實例就會掛載到該掛載點上；
main.js作為項目的入口文件，在main.js中，新建了一個Vue實例，在Vue實例中，通過
new Vue({el: '#app',//components: {App },//template: '<App/>' })告訴該實例要掛載的地方；（即實例裝載到index.html中的位置）
接著，實例中注冊了一個局部組件App，這個局部組件App來自于哪兒呢？
import App from './App.vue'new Vue({//el: '#app',components: {App },//template: '<App/>' })這個局部組件是當(dāng)前目錄下的App.vue；
而起始模板是什么呢？模板就是組件App.vue中的template中的內(nèi)容。（template會替代原來的的掛載點處的內(nèi)容）
所以Vue這個實例就是暫時的是App.vue這個組件的內(nèi)容。
所以，我們進(jìn)行總結(jié)：在項目運行中，main.js作為項目的入口文件，運行中，找到其實例需要掛載的位置，即index.html中，剛開始，index.html的掛載點處的內(nèi)容會被顯示，但是隨后就被實例中的組件中的模板中的內(nèi)容所取代，所以我們會看到有那么一瞬間會顯示出index.html中正文的內(nèi)容。
而index.html中的Title部分不會被取代，所以會一直保留。
總結(jié)
以上是生活随笔為你收集整理的Vue项目开发目录结构和引用调用关系的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 格里洛克之眼怎么做
- 下一篇： 腾讯课堂如何扫码(腾讯软件中心)