「后端小伙伴来学前端了」分析Vue脚手架结构
傍晚的月亮
前言
每日匆匆忙忙的寫老師布置的 Vue 項目，對于 Vue 始終沒有一個系統的認知，每天都是遇到什么問題就去查什么樣的問題。看起來好像也沒啥問題，但是所有的知識都是混入的，導致沒有一個像樣的體系。
也就導致有了以下問題的存在：
所以我就下定決心，不再把這件事情，當做一個任務來完成了，而是認認真真的來和大家一起學習前端。【放心，我的主業是Java開發，雖然落魄，但是好玩，還有好多好多源碼沒看勒👨?💻】
希望能夠趁著這段時間持續更新「后端小伙伴來學前端了」系列，對了。
一、分析Vue腳手架結構
創建vue腳手架咱就默認都會了哈。👨?🏫
我創建的是一個帶路由的vue腳手架哈，文件目錄結構大致如下。
1.1、babel.config.js
babel編譯js（可以把高級的es語法轉化成低級的），
平時使用默認的即可
這點我沒有詳細去了解過，如果感興趣可以查看 babel官網，看看可以配置一些什么。官方文檔
1.2、package.json
簡單說就是包的說明書。
1.3、package-lock.json
這個東西，在我眼里其實就和我們后端用 maven 管理依賴包版本一樣的意思。但是東西更多一點點的感覺。
二、main.js
每個程序都會有個程序入口。那么在vue中其實也一樣。
我們想想，當我們在命令行敲入npm run serve 之后，程序就開始運行了，運行入口又在哪里呢？程序入口其實就是main.js。
我們做個簡單測試就知道了。我們把main.js中全部注釋掉，就在控制臺上打印個輸出看看。程序是啟動了，沒有報錯。
瀏覽器
從結果上來看，main.js是程序入口是沒錯，接下來，我們再對main.js這個文件做給詳細的認識。
下半截大致的解釋如下：
// 引入vue import Vue from 'vue' // 引入app組件 import App from './App.vue' // 引入 router組件 import router from './router'// 關閉生產提示 Vue.config.productionTip = false// 創建 Vue 實例對象 Vm new Vue({router, // 路由render: h => h(App) // 這里不是一下就能說完的，這里簡單說下：// App 組件渲染，這里的 h 即是 vm.$createElement ,便是在vm.render這個階段// 最粗略的理解，執行完這里，就是將app 放入了 容器中去了。 }).$mount('#app') // Vue 的$mount()為手動掛載 這個也不是一下能說清，我也學藝不精，以后再補上 哈哈但是看到這里其實還是沒懂的，因為瀏覽器它是解析不了vue，我們必須要把我們寫的vue代碼轉換為html、js、css才能在瀏覽器上正常顯示，那么html在哪里呢？
在我們之前說的public文件夾中哈。
2.1、public
我們頁面上常常看到的那個小圖標，就是這里的，如果我們要修改，直接整一個ico圖片進來替換掉即可。（名字得一樣哈，不然就去改改index.html文件哈）
index.html
<!DOCTYPE html> <html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><!-- 配置網頁標題 htmlWebpackPlugin.options.title 這行代碼其實是webpack悄咪咪給你做的， 我沒有深究原理哈 我們寫了這行代碼，它就會去 packege.json 文件中去找 我們項目的名稱--><title><%= htmlWebpackPlugin.options.title %></title></head><body><!-- 這個noscript 標簽就是當 瀏覽器不支持 js 時，會自動觸發，當然我們都知道哈，不能解析js的瀏覽器，怕早就涼在了歷史長河中啦 --><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><!-- 這里就是我們的容器啦 --><div id="app"></div><!-- built files will be auto injected --></body> </html>2.2、流程說明
很多細節沒法一一說明，我也還在繼續學習中。一起加油。
自言自語
大家一起加油！！！如若文章中有不足之處，請大家及時指出，在此鄭重感謝。
紙上得來終覺淺，絕知此事要躬行。
大家好，我是博主寧在春：主頁
一名喜歡文藝卻踏上編程這條道路的小青年。
希望：我們，待別日相見時，都已有所成。
總結
以上是生活随笔為你收集整理的「后端小伙伴来学前端了」分析Vue脚手架结构的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Idea如何方便的查看Java字节码文件
- 下一篇： html5倒计时秒杀怎么做,vue 设