目錄
一、 前后端分離
1. 簡介
2. 實現前后端分離的常用前端框架
3. 前后端分離和動靜分離
3.1 前后端分離:
3.2 動靜分離:
二、 Vue.js概述
1. 簡介
2. SPA介紹
2.1 優點
2.2 缺點
3. MVVM介紹
3.1 示例
三、 名詞解釋
1. Node.js
2. npm
3. webpack
4. Vue-cli
5. cnpm
四、 總體環境準備
1. Node.js安裝
2.?安裝npm淘寶鏡像
3. 安裝webpack
3. 安裝webpack
4. 安裝 Vue Cli
5. 安裝Vue.js插件
五、 創建第一個 Vue.js 項目
1. 選擇項目類型
2. 填寫項目信息
3. 初始化項目
4. 運行項目
5. 訪問項目
一、 前后端分離
1. 簡介
????????前后端分離屬于開發模式的一種。其核心思想是把前端項目（Node.js 實現的）和后端項目能夠獨立運行（前端開發和后端開發時可以完全獨立，只需要按照接口文檔進行開發即可。），前端項目在通過 Ajax 請求服務器端項目Restful接口實現數據交互。
????????使用前后端分離模式的項目在項目組中往往配備前端工程師和后端工程師。后端工程師就是我們，對于我們來說，不需要在項目中編寫頁面了，寫到控制器返回數據即可，最后把項目部署到服務器上。而前端項目中主要是一些 HTML、JavaScript、圖片 等資源，如果希望能夠獨立運行就需要借助基于 Node.js 的一些前端框架。
2. 實現前后端分離的常用前端框架
????????對于前端工程師來說常用的就是?Vue.js 和 React.js 和 angularJS。他們是前端工程師常用的三大框架。
-
Vue.js: 小巧，靈活，功能卻很強大。在市場上占有率更高，屬于成熟穩定的框架。在課程中講解此框架，后面的項目的前端頁面也是基于 Vue 實現。
-
React: 相比Vue.js更新一些，近幾年有追趕Vue.js的架勢。更適合做移動項目。
-
AngularJS：相比 Vue 更重一些。AngularJS 的學習成本高，比如增加了 Dependency Injection 特性，而 Vue.js 本身提供的 API 都比較簡單、直觀，在性能上，AngularJS 依賴對數據做臟檢查，所以 Watcher 越多越慢。只有在一些大型項目中才可能被使用。
3. 前后端分離和動靜分離
3.1 前后端分離:
????????前后端分離軟件架構方式。前端頁面和服務端項目分別部署。
????????前端html頁面通過?ajax 調用后端的 restuful api 接口并使用?json 數據（不一定非要使用JSON，如果有更好的前后端通信方式也可以使用）進行交互。即后端提供數據接口，前端調用接口獲得數據，獲得的數據在前端進行處理。
3.2 動靜分離:
????????動靜分離（項目部署方式）指“動態頁面（JSP）”和靜態頁面分離開，部署到不同的地方。很多時候為了讓頁面訪問速度更快，把原來的動態頁面（JSP）轉換為靜態頁面（HTML）（可以借助Nginx實現）訪問時訪問靜態頁面。
二、 Vue.js概述
1. 簡介
????????Vue 是一個漸進式（真正用到才引用）的 JavaScrip t框架與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，與現代化的工具以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。
????????
2. SPA介紹
????????Vue.js 屬于 SPA 一員。
????????英文全稱：Single Page Web Application ，SPA
????????中文全稱：單頁 Web 應用。
????????整個應用就一個頁面，客戶端頁面通過與服務端的交互動態更新頁面中內容。
2.1 優點
????????符合前后端分離工作模式：單頁面應用可以結合 Restful，符合前后端分離開發。
????????良好的用戶體驗：應用沒有頁面跳轉，全是局部刷新，整體頁面更流暢。
????????減輕服務器端壓力：由于都是局部刷新對服務器壓力更小。
????????多平臺共享：無論是移動端、電腦端都可以共享服務端接口。通過作用域傳值就無法實現接口共享。
2.2 缺點
SEO 難度大 對于單頁面應用在 SEO 搜索時可能頁面搜索到的就是空的<div>。
首頁渲染耗時長首頁需要一次加載多個請求，渲染時間可能會比較長。
3. MVVM介紹
????????Vue.js 使用了前端中常用的分層思想 MVVM，MVVM 分為M、V、VM 。
- M（Model） 也就是頁面中單獨數據
- V （View）是頁面中HTML結構
- VM（View-Model） 當V需要調用M中數據時，由VM做中間處理
3.1 示例
data(){} 里面的內容就是數據，也就是 Model。 ?
<template> 頁面內容，也就是 View。 ?
{{name}} 把data中數據傳遞給<template>是由Vue幫助完成的，也就是 VM。
<template><div id="app">我們的名稱為：{{name}}，已經成立了{{age}}年了。</div>
</template><script>
export default {name: 'App',data(){return {name:"北京尚學堂",age: 15}}
}
</script>三、 名詞解釋
1. Node.js
????????對 Chrome V8 引擎進行了封裝，使得 JavaScript 能夠脫離瀏覽器環境，獨立運行（給我的感覺是寫了一個項目，項目中只有頁面相關代碼，發布到服務器中運行，可以瀏覽器訪問這些頁面內容）。同時能通過 Node.js 直接訪問數據庫的能力。
????????目前前端市場都是使用基于 Node.js 的框架。而不是直接使用 Node.js。
????????前后端分離之所以前端項目能夠獨立運行就是借助 Node.js.
2. npm
npm是Node.js中的一個工具。通過npm可以實現一些組件的安裝。效果和Linux中的yum有類似。
使用Node.js時不是一下所有東西都能下載下來，有一些是第三方提供的，有些是插件，當需要使用這些東西的時候，通過npm install 進行安裝即可。
3. webpack
????????是前端開發中的項目管理工具。和我們在開發 Java 時 Maven 的作用類似。
4. Vue-cli
????????Vue-cli 是 Vue.js 的客戶端工具。通過 Vue-cli 可以實現 Vue 項目腳手架功能等，進行快速搭建。
5. cnpm
????????淘寶鏡像提供的工具。解決了 npm 使用國外地址下載資源慢的問題。需要安裝淘寶鏡像后就可以使用了。
????????偶爾會出現工具無法連接淘寶服務器的情況。每次在使用時都是先通過 cnpm 命令查看是否能夠連接淘寶鏡像，才去使用。
四、 總體環境準備
1. Node.js安裝
nodejs下載地址：http://nodejs.cn/download/? ?
所有的過程都點擊 next 按鈕（路徑自定義），安裝完成后在命令行中運行命令查看是否安裝成功
查看 node 的版本： 在控制面板輸入? node -v
查看 npm 版本： 在控制面板輸入? npm -v
2.?安裝npm淘寶鏡像
使用淘寶鏡像進行操作，在命令行輸入命令進行安裝。
npm install -g cnpm --registry=https://registry.npmmirror.com????????運行完成后通過 cnpm 命令查看是否安裝成功，成功會提示下面信息。如果沒有成功會提示沒有 cnpm 命令，然后在進行安裝一次即可。
????????以后所有官方文檔中使用 npm install 的命令都換成 cnpm install
????????安裝完成后，如果 IDEA 正在啟動，需要關閉 IDEA，讓 IDEA 加載 Node.js 相關信息。
3. 安裝webpack
????????其中-g表示全局安裝，以后不需要在安裝了。如果沒有 -g 表示只能在當前目錄（運行命令時所在目錄）中使用。如果重新建立項目，換了文件夾還需要重新安裝。
????????在命令行輸入：
npm install -g webpack webpack-cli --registry=https://registry.npmmirror.com
3. 安裝webpack
????????其中-g表示全局安裝，以后不需要在安裝了。如果沒有 -g 表示只能在當前目錄（運行命令時所在目錄）中使用。如果重新建立項目，換了文件夾還需要重新安裝。
????????在命令行輸入：
npm install -g webpack webpack-cli --registry=https://registry.npmmirror.com4. 安裝 Vue Cli
???????? 在命令行輸入
npm install -g @vue/cli --registry=https://registry.npmmirror.com5. 安裝Vue.js插件
????????在IDEA中：菜單 settings -> plugins -> 搜索 vue -> Vue.js 點擊 install -> 安裝后重啟 idea
????????官方插件離線下載網址：https://plugins.jetbrains.com/plugin/9442-vue-js/versions
????????
檢查插件是否可用：File -> New -> Project -> 有這個就行 ↓↓↓
五、 創建第一個 Vue.js 項目
1. 選擇項目類型
????????依次點擊菜單 File -> New -> Project -> Vue.js （↑ 上面圖片中的頁面）
2. 填寫項目信息
????????Project name：項目名。項目名稱不支持大寫。
????????Project location: 項目路徑。
????????Node interpreter: node 工具。安裝 node.js 會自動加載本機 Node 工具，如果沒有安裝此處為紅色 none，提示沒有 node 環境。
????????Vue Cli：Vue 工具。如果安裝了 Vue 工具會提示下面信息，如果沒有安裝會有一個安裝命令，此命令運行特別慢，所以一定要按照環境安裝步驟安裝 Vue Cli。
（ ↓↓↓ 4 和 5 不要選錯了，5 是本地已經全局安裝好的 @vue/cli 可執行文件）
3. 初始化項目
????????每次創建 Vue?項目都需要通過 Vue Cli 腳手架初始化項目信息。
????????如果是第一次創建項目會在控制臺提示我們是否把鏡像切換到淘寶鏡像提示是否要切換到https://registry.npm.taobao.org，輸入 Y 即可。
????????如果不是第一次創建項目會自動使用 Vue 腳手架初始化整個項目。非常明顯的在 Run 面板自動在下載安裝內容。當下載安裝完成后會出現。內容中說明： Successfully：已經成功創建項目
????????npm run serve 如果使用命令運行這個目錄時需要執行的命令。在 IDEA 中有可視化操作，直接和 JAVA 項目一樣點擊
和輸入命令效果一樣。
????????????????創建過程有點慢，需要耐心等待 （↓↓↓ 等待中）
????????????
????????????????成功創建后長這樣 ↓↓↓
???????????????????
4. 運行項目
????????使用腳手架搭建的項目已經具備基本條件，選擇 npm serve 后直接點擊綠色運行按鈕即可。
????????
????????查看是這樣的 ↓↓↓
????????運行完成后會在控制臺顯示 URL 信息，默認占用8080端口
????????
5. 訪問項目
????????直接點擊控制臺輸出的鏈接，或者在瀏覽器輸入??http://localhost:8080??會顯示下面的頁面
????????
出現這個頁面就是成功創建 Vue 項目了！！
![第十四屆藍橋杯青少組C++選拔賽[2022.12.18]第二部分編程題（2、字符翻轉）](http://pic.xiahunao.cn/第十四屆藍橋杯青少組C++選拔賽[2022.12.18]第二部分編程題（2、字符翻轉）)
