目錄
目錄
一、從nodejs開始
1、Node.js
Node.js就是基於Google的V8引擎，運行在服務端的JavaScript環境
最大的優勢是藉助JavaScript天生的事件驅動機制加V8高性能引擎，使編寫高性能Web服務輕而易舉
2、npm：node的maven工具
npm是什麼東東？npm其實是Node.js的包管理工具（package manager）。
爲啥我們需要一個包管理工具呢？因爲我們在Node.js上開發時，會用到很多別人寫的JavaScript代碼。如果我們要使用別人寫的某個包，每次都根據名稱搜索一下官方網站，下載代碼，解壓，再使用，非常繁瑣。於是一個集中管理的工具應運而生：大家都把自己開發的模塊打包後放到npm官網上，如果要使用，直接通過npm安裝就可以直接用，不用管代碼存在哪，應該從哪下載。
更重要的是，如果我們要使用模塊A，而模塊A又依賴於模塊B，模塊B又依賴於模塊X和模塊Y，npm可以根據依賴關係，把所有依賴的包都下載下來並管理起來。否則，靠我們自己手動管理，肯定既麻煩又容易出錯。
講了這麼多，npm究竟在哪？
其實npm已經在Node.js安裝的時候順帶裝好了。我們在命令提示符或者終端輸入npm -v，應該看到類似的輸出：
3、mvvm
什麼是MVVM？MVVM是Model-View-ViewModel的縮寫
MVVM最早由微軟提出來，它借鑑了桌面應用程序的MVC思想，在前端頁面中，把Model用純JavaScript對象表示，View負責顯示，兩者做到了最大限度的分離。
把Model和View關聯起來的就是ViewModel。ViewModel負責把Model的數據同步到View顯示出來，還負責把View的修改同步回Model。
ViewModel如何編寫？需要用JavaScript編寫一個通用的ViewModel，這樣，就可以複用整個MVVM模型了。
這就是MVVM的設計思想：關注Model的變化，讓MVVM框架去自動更新DOM的狀態，從而把開發者從操作DOM的繁瑣步驟中解脫出來！
不再進行dom操作。
二、webpack
1、webpack是什麼
WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包爲合適的格式以供瀏覽器使用。
2、爲什要使用WebPack
今的很多網頁其實可以看做是功能豐富的應用，它們擁有着複雜的JavaScript代碼和一大堆依賴包。爲了簡化開發的複雜度，前端社區涌現出了很多好的實踐方法
a:模塊化，讓我們可以把複雜的程序細化爲小的文件;
b:類似於TypeScript這種在JavaScript基礎上拓展的開發語言：使我們能夠實現目前版本的JavaScript不能直接使用的特性，並且之後還能能裝換爲JavaScript文件使瀏覽器可以識別；
c:scss，less等CSS預處理器
.........
這些改進確實大大的提高了我們的開發效率，但是利用它們開發的文件往往需要進行額外的處理才能讓瀏覽器識別,而手動處理又是非常繁瑣的，這就爲WebPack類的工具的出現提供了需求。
3、webpack npm node之間關係？
關係看這
webpack是npm生態中的一個模塊，我們可以通過全局安裝webpack來使用webpack對項目進行打包；
webpack的運行依賴於node的環境，沒有node是不能打包的，但是webpack打包後的項目本身只是前端靜態資源和後臺沒有關係，也就是說打包後的項目是不依賴於node，只要有後臺能力的都可以部署項目
npm是於Node社區中產生的，是nodejs的官方包管理工具，當你下載安裝好node的時候，npm cli就自動安裝好了
正是因爲npm的包管理，使得項目可以模塊化的開發，而模塊化的開發帶來的這些改進確實大大的提高了我們的開發效率，但是利用它們開發的文件往往需要進行額外的處理才能讓瀏覽器識別，而手動處理又是非常繁瑣的，這就是webpack工具存在的意義
其他
1、前後端分離概念：
https://segmentfault.com/a/1190000009266900
https://blog.csdn.net/weixin_37539378/article/details/79956760
2、使用vue-cli webpack搭建項目
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',// 瀏覽器訪問項目，最先訪問的是index.html文件; 告訴該實例要掛載的地方；（即實例裝載到index.html中的位置）
router,// 路由跳轉頁面。默認/
components: { App },// 實例中註冊了一個局部組件App，
template: '<App/>'// 模板就是組件App.vue中的template中的內容。（template會替代原來的的掛載點處的內容
})
main.js:程序入口
index.js // 項目訪問首頁，也是根掛載點app所在頁面
app.vue // 局部組件,供templete使用
所以Vue這個實例就是戰士的是App.vue這個組件的內容。
所以，我們進行總結：在項目運行中，main.js作爲項目的入口文件，運行中，找到其實例需要掛載的位置，即index.html中，剛開始，index.html的掛載點處的內容會被顯示，但是隨後就被實例中的組件中的模板中的內容所取代，所以我們會看到有那麼一瞬間會顯示出index.html中正文的內容。
而index.html中的Title部分不會被取代，所以會一直保留。