從0搭建一個Springboot+vue前后端分離項目(二)使用idea進行頁面搭建+頁面搭建

參考學習vue官網文檔
https://v3.cn.vuejs.org/guide/installation.html#%E5%8F%91%E5%B8%83%E7%89%88%E6%9C%AC%E8%AF%B4%E6%98%8E

一.首先安裝Vue CLI

這里安裝是通過 npm 進行安裝

npm即 Node Package Manager，Node.js 環境中的軟件包管理器。隨 Node.js 一起被安裝。

需要先下載安裝 Node.js

下載地址

安裝后打開cmd

輸入node -v 查看版本
nmp - v

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

可以選擇安裝 cnpm，即 npm 的國內鏡像。使用 cnmp 的好處是在日后下載內容時會比較快，但是下載的包可能不是最新的。安裝 cnpm 的命令為 ：npm install -g cnpm --registry=https://registry.npm.taobao.org完成后就可以使用 cnpm 替代 npm 了，我不太喜歡用 cnpm，喜歡用的小伙伴注意一點，cnpm 不要與 npm 混合使用，一個項目用 cnpm 就從頭用到底，不要中途敲錯命令，否則就會出現混亂。不過萬一遇到這種情況也不用慌，把項目的 node_modules 文件夾刪了重新執行 npm/cnpm install 就行了，只是比較浪費時間。

使用 npm install -g vue-cli 安裝Vue CLI(腳手架)。

vue-cli 這個構建工具大大降低了 webpack 的使用難度，開箱即用的特性，大大降低了我們的學習成本，加快了我們的開發速度。

二.安裝完之后創建項目

在一個磁盤下創建文件

輸入 vue create springboot-vue-demo

創建一個名為 springboot-vue-demo的項目
接著選擇

接著
選擇vue的版本



保存一下
創建工程完畢

輸入以上命令啟動

http://localhost:8080/ 去瀏覽器查看

這就是vue工程自帶的一個界面

總結

以上是生活随笔為你收集整理的从0搭建一个Springboot+vue前后端分离项目(一)安装工具,创建项目的全部內容，希望文章能夠幫你解決所遇到的問題。

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