一、 前后端分離

1. 簡介

前后端分離屬于開發(fā)模式的一種。其核心思想是把前端項目（Node.js 實現(xiàn)的）和后端項目能夠獨立運行（前端開發(fā)和后端開發(fā)時可以完全獨立，只需要按照接口文檔進行開發(fā)即可。），前端項目在通過 Ajax 請求服務器端項目Restful接口實現(xiàn)數(shù)據(jù)交互。

使用前后端分離模式的項目在項目組中往往配備前端工程師和后端工程師。后端工程師就是我們，對于我們來說，不需要在項目中編寫頁面了，寫到控制器返回數(shù)據(jù)即可，最后把項目部署到服務器上。而前端項目中主要是一些 HTML、JavaScript、圖片 等資源，如果希望能夠獨立運行就需要借助基于 Node.js 的一些前端框架。

2. 實現(xiàn)前后端分離的常用前端框架

對于前端工程師來說常用的就是 Vue.js 和 React.js 和 angularJS。他們是前端工程師常用的三大框架。

1. Vue.js: 小巧，靈活，功能卻很強大。在市場上占有率更高，屬于成熟穩(wěn)定的框架。在課程中講解此框架，后面的項目的前端頁面也是基于 Vue 實現(xiàn)。

2. React: 相比Vue.js更新一些，近幾年有追趕Vue.js的架勢。更適合做移動項目。

3. AngularJS：相比 Vue 更重一些。AngularJS 的學習成本高，比如增加了 Dependency Injection 特性，而 Vue.js 本身提供的 API 都比較簡單、直觀，在性能上，AngularJS 依賴對數(shù)據(jù)做臟檢查，所以 Watcher 越多越慢。只有在一些大型項目中才可能被使用。

3. 前后端分離和動靜分離

3.1 前后端分離:

前后端分離軟件架構方式。前端頁面和服務端項目分別部署。

前端html頁面通過 ajax 調(diào)用后端的 restuful api 接口并使用 json 數(shù)據(jù)（不一定非要使用JSON，如果有更好的前后端通信方式也可以使用）進行交互。即后端提供數(shù)據(jù)接口，前端調(diào)用接口獲得數(shù)據(jù)，獲得的數(shù)據(jù)在前端進行處理。

3.2 動靜分離:

動靜分離（項目部署方式）指“動態(tài)頁面（JSP）”和靜態(tài)頁面分離開，部署到不同的地方。很多時候為了讓頁面訪問速度更快，把原來的動態(tài)頁面（JSP）轉換為靜態(tài)頁面（HTML）（可以借助Nginx實現(xiàn)）訪問時訪問靜態(tài)頁面。

二、 Vue.js概述

1. 簡介

Vue 是一個漸進式（真正用到才引用）的 JavaScrip t框架與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，與現(xiàn)代化的工具以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。

2. SPA介紹

Vue.js 屬于 SPA 一員。

英文全稱：Single Page Web Application ，SPA

中文全稱：單頁 Web 應用。

整個應用就一個頁面，客戶端頁面通過與服務端的交互動態(tài)更新頁面中內(nèi)容。

2.1 優(yōu)點

符合前后端分離工作模式：單頁面應用可以結合 Restful，符合前后端分離開發(fā)。

良好的用戶體驗：應用沒有頁面跳轉，全是局部刷新，整體頁面更流暢。

減輕服務器端壓力：由于都是局部刷新對服務器壓力更小。

多平臺共享：無論是移動端、電腦端都可以共享服務端接口。通過作用域傳值就無法實現(xiàn)接口共享。

2.2 缺點

SEO 難度大 對于單頁面應用在 SEO 搜索時可能頁面搜索到的就是空的<div>。

首頁渲染耗時長首頁需要一次加載多個請求，渲染時間可能會比較長。

3. MVVM介紹

Vue.js 使用了前端中常用的分層思想 MVVM，MVVM 分為M、V、VM 。

• M（Model） 也就是頁面中單獨數(shù)據(jù)
• V （View）是頁面中HTML結構
• VM（View-Model） 當V需要調(diào)用M中數(shù)據(jù)時，由VM做中間處理

3.1 示例

data(){} 里面的內(nèi)容就是數(shù)據(jù)，也就是 Model。 ?

<template> 頁面內(nèi)容，也就是 View。 ?

{{name}} 把data中數(shù)據(jù)傳遞給<template>是由Vue幫助完成的，也就是 VM。

<template>
  <div id="app">
      我們的名稱為：{{name}}，已經(jīng)成立了{{age}}年了。
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      name:"北京尚學堂",
      age: 15
    }
  }
}
</script>

三、 名詞解釋

1. Node.js

對 Chrome V8 引擎進行了封裝，使得 JavaScript 能夠脫離瀏覽器環(huán)境，獨立運行（給我的感覺是寫了一個項目，項目中只有頁面相關代碼，發(fā)布到服務器中運行，可以瀏覽器訪問這些頁面內(nèi)容）。同時能通過 Node.js 直接訪問數(shù)據(jù)庫的能力。

目前前端市場都是使用基于 Node.js 的框架。而不是直接使用 Node.js。

前后端分離之所以前端項目能夠獨立運行就是借助 Node.js.

2. npm

npm是Node.js中的一個工具。通過npm可以實現(xiàn)一些組件的安裝。效果和Linux中的yum有類似。

使用Node.js時不是一下所有東西都能下載下來，有一些是第三方提供的，有些是插件，當需要使用這些東西的時候，通過npm install 進行安裝即可。

3. webpack

是前端開發(fā)中的項目管理工具。和我們在開發(fā) Java 時 Maven 的作用類似。

4. Vue-cli

Vue-cli 是 Vue.js 的客戶端工具。通過 Vue-cli 可以實現(xiàn) Vue 項目腳手架功能等，進行快速搭建。

5. cnpm

淘寶鏡像提供的工具。解決了 npm 使用國外地址下載資源慢的問題。需要安裝淘寶鏡像后就可以使用了。

偶爾會出現(xiàn)工具無法連接淘寶服務器的情況。每次在使用時都是先通過 cnpm 命令查看是否能夠連接淘寶鏡像，才去使用。

四、 總體環(huán)境準備

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.com

4. 安裝 Vue Cli

在命令行輸入

npm install -g @vue/cli --registry=https://registry.npmmirror.com

5. 安裝Vue.js插件

在IDEA中：菜單 settings -> plugins -> 搜索 vue -> Vue.js 點擊 install -> 安裝后重啟 idea

官方插件離線下載網(wǎng)址：https://plugins.jetbrains.com/plugin/9442-vue-js/versions

檢查插件是否可用：File -> New -> Project -> 有這個就行 ↓↓↓

五、 創(chuàng)建第一個 Vue.js 項目

1. 選擇項目類型

依次點擊菜單 File -> New -> Project -> Vue.js （↑ 上面圖片中的頁面）

2. 填寫項目信息

Project name：項目名。項目名稱不支持大寫。

Project location: 項目路徑。

Node interpreter: node 工具。安裝 node.js 會自動加載本機 Node 工具，如果沒有安裝此處為紅色 none，提示沒有 node 環(huán)境。

Vue Cli：Vue 工具。如果安裝了 Vue 工具會提示下面信息，如果沒有安裝會有一個安裝命令，此命令運行特別慢，所以一定要按照環(huán)境安裝步驟安裝 Vue Cli。

（ ↓↓↓ 4 和 5 不要選錯了，5 是本地已經(jīng)全局安裝好的 @vue/cli 可執(zhí)行文件）

3. 初始化項目

每次創(chuàng)建 Vue 項目都需要通過 Vue Cli 腳手架初始化項目信息。

如果是第一次創(chuàng)建項目會在控制臺提示我們是否把鏡像切換到淘寶鏡像提示是否要切換到https://registry.npm.taobao.org，輸入 Y 即可。

如果不是第一次創(chuàng)建項目會自動使用 Vue 腳手架初始化整個項目。非常明顯的在 Run 面板自動在下載安裝內(nèi)容。當下載安裝完成后會出現(xiàn)。內(nèi)容中說明： Successfully：已經(jīng)成功創(chuàng)建項目

npm run serve 如果使用命令運行這個目錄時需要執(zhí)行的命令。在 IDEA 中有可視化操作，直接和 JAVA 項目一樣點擊

和輸入命令效果一樣。

創(chuàng)建過程有點慢，需要耐心等待 （↓↓↓ 等待中）

成功創(chuàng)建后長這樣 ↓↓↓

還是沒有serve就手動添加：

1. 點擊頂部的 Current File ，點擊 Edit Configurations...

2. 點擊左上角的 +號，在列表里找到并點擊npm

  點開是這個頁面↓↓↓  選完后點擊右下角的 apply，OK 就可以了！

 ↓↓↓ 在上面選的 package.json 是這個

 ↓↓↓ 配好了就是這樣的 (npm serve 跟 serve 都一樣，不用在意名字)

4. 運行項目

使用腳手架搭建的項目已經(jīng)具備基本條件，選擇 npm serve 后直接點擊綠色運行按鈕即可。

查看是這樣的 ↓↓↓

運行完成后會在控制臺顯示 URL 信息，默認占用8080端口

5. 訪問項目

直接點擊控制臺輸出的鏈接，或者在瀏覽器輸入  http://localhost:8080  會顯示下面的頁面

出現(xiàn)這個頁面就是成功創(chuàng)建 Vue 項目了??！

總結

到此這篇關于在IDEA 2024創(chuàng)建Vue項目的文章就介紹到這了,更多相關IDEA創(chuàng)建Vue項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論