文章目錄

• 一、安裝 Vue CLI
• 二、構建前端項目
• • 2.1.創建一個基于 webpack 模板的項目
  • 2.2. 安裝圖解
  • 2.3. 項目結構總覽
  • 2.4. 運行項目
  • 2.5. 瀏覽器驗證

項目GitHub 地址： https://github.com/Antabot/White-Jotter

在動手操作之前，我希望大家已經清楚什么是 “前后端分離” ，什么是 “單頁面應用” 。

簡單地說：
前后端分離 的核心思想是前端頁面通過 ajax 調用后端的 restuful api 進行數據交互，而 單頁面應用（single page web application，SPA），就是只有一張頁面，并在用戶與應用程序交互時動態更新該頁面的 Web 應用程序。

附上 Vue 的官方教程：
https://cn.vuejs.org/v2/guide/

一、安裝 Vue CLI

因為需要使用 npm 安裝 Vue CLI，而 npm 是集成在 Node.js 中的，所以第一步我們需要安裝 Node.js，node.js官網：https://nodejs.org/en/download/，首頁即可下載。

下載完成后運行安裝包，一路下一步就行。然后在 cmd 中輸入 node -v，檢查是否安裝成功。

如圖，出現了版本號（根據下載時候的版本確定），說明已經安裝成功了。同時，npm 包也已經安裝成功，可以輸入 npm -v 查看版本號

輸入 npm -g install npm ，將 npm 更新至最新版本。

之后可以選擇安裝 cnpm，即 npm 的國內鏡像。使用 cnmp 的好處是在日后下載內容時會比較快，但是下載的包可能不是最新的。

安裝 cnpm 的命令為 ：

npm install -g cnpm --registry=https://registry.npm.taobao.org

完成后就可以使用 cnpm 替代 npm 了，喜歡用的小伙伴注意一點，cnpm 不要與 npm 混合使用，一個項目用 cnpm 就從頭用到底，不要中途敲錯命令，否則就會出現混亂。不過萬一遇到這種情況也不用慌，把項目的 node_modules 文件夾刪了重新執行 npm/cnpm install 就行了，只是比較浪費時間。
之后，使用 npm install -g vue-cli 安裝腳手架。

接下來，就可以搭建我們的前端項目了。

二、構建前端項目

2.1.創建一個基于 webpack 模板的項目

直接使用命令行vue init webpack wj-vue構建項目。
首先，進入到我們的工作文件夾中(我的工作空間 D:\Workspaces)，我在 D 盤新建了一個叫 Workspaces的文件夾，大家可以自行選擇位置。

這里 webpack 是以 webpack 為模板指生成項目， wj-vue 是我們的項目名稱（White Jotter），大家也可以起別的名字。

2.2. 安裝圖解

序號圖解 說明選擇

①	項目名叫什么(要和你的項目名保持一致)，不能大寫	默認即可
②	添加項目描述	vue2.5 去哪兒app
③	添加作者	gb-heima <754263923@qq.com>
④	選擇編譯形式	standalone
⑤	是否安裝 vue-router工具，路由工具	y
⑥	是否使用ESLint對你的代碼規范進行檢查	y
⑦	選擇代碼檢測的規范	Standard
⑧	是否進行單元測試	y
⑨	test runner 測試	y
⑩	是否進行e2e測試	y
?	包管理使用npm還是用yarn	默認npm即可

項目初始化完成！！！

2.3. 項目結構總覽

可以看到 Workspace 目錄下生成了項目文件夾 wj-vue，里面的結構如圖

2.4. 運行項目

接下來，進入到我們的項目文件夾里(cd D:\workspace\wj-vue)，執行npm run dev

注：項目構建成功，這一步如果報錯，可能是未能加載項目所需的依賴包，即 node_modules 里的內容，需要在該文件夾執行 npm install ，再執行 npm run dev

2.5. 瀏覽器驗證

訪問 http://localhost:8080，查看網頁 demo，大工告成！

總結

以上是生活随笔為你收集整理的Vue + Spring Boot 项目实战（二）：使用 CLI 搭建 Vue.js 项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。