前言

前端使用Vue.js作為前端開發(fā)框架，使用Vue CLI3腳手架搭建項目，使用axios作為HTTP庫與后端API交互，使用Vue-router實現(xiàn)前端路由的定義、跳轉(zhuǎn)以及參數(shù)的傳遞等，使用vuex進(jìn)行數(shù)據(jù)狀態(tài)管理，后端使用Node.js+express，連接Mysql數(shù)據(jù)庫。

1. 確定電腦上已經(jīng)安裝了Node.js

如果已經(jīng)安裝了Node，可以通過cmd查看版本號。Node.js包含npm，這在之后要使用npm命令安裝axios。

如果沒有安裝，可以直接到官網(wǎng)上下載最新版的node.js，官網(wǎng)地址：Node.js — 下載 Node.js®

2. 創(chuàng)建項目

（1）先創(chuàng)建一個項目的根目錄，如在D盤創(chuàng)建項目文件夾：D：/MoreMall。（注：這個前后端的總文件夾）

（2）使用Vue CLI3腳手架搭建項目，先確保安裝了Vue CLI3。

要檢查是否安裝了Vue CLI 3，可以在cmd命令行中運行以下命令：

vue --version

如果Vue CLI 3已安裝，該命令將輸出Vue CLI的版本號。如果沒有安裝或者不是最新版本，可以通過以下命令安裝或更新：

npm install -g @vue/cli

Vue CLI 已經(jīng)安裝成功，且提示可以升級。

（3）可以直接在HBuilder X項目中，創(chuàng)建項目client。

創(chuàng)建好項目后如下:

3. 安裝axios

axios作為HTTP庫與后端API交互，所以要安裝，但是在安裝axios之前，要先創(chuàng)建配置文件，在項目的src目錄下，創(chuàng)建配置文件夾config，在config文件夾下創(chuàng)建文件index.js文件。

（1）創(chuàng)建config文件夾：client右鍵->新建->目錄。

（2）創(chuàng)建index.js文件：config右鍵->新建->js文件。

（3）填寫index.js的內(nèi)容

文件位置：client/src/config/index.js

export default{
	title:"MoreMall",
	baseURL:{
		//開發(fā)時后臺接口
		development:"http:/127.0.0.1:3000/api",  //填寫自己的API地址
		//生產(chǎn)時后臺接口（test）
		product:"/"
	}
}

結(jié)果如下：

（4）安裝axios

這個要通過cmd命令行來安裝，先要進(jìn)入項目的根目錄文件夾。

之后使用命令：npm install axios

安裝成功后后，會在項目的node_modules文件夾下增加很多組件。

4. 配置axios

安裝完成后，在src文件夾下新建api子文件夾，在api下新建文件axios.js，完成相關(guān)配置。

（1）創(chuàng)建api文件夾：src右鍵->新建->目錄。Api是插件目錄，用來存放axios配置以及相關(guān)接口文件。

（2）創(chuàng)建axios.js文件：api右鍵->新建->js文件。

（3）填寫axios.js的內(nèi)容

文件位置：client/src/api/axios.js

 結(jié)果如下：

5. 創(chuàng)建頁面文件目錄

在src目錄下，創(chuàng)建views文件夾，用于存放頁面文件。

6. 項目的目錄說明

node_modules：存放組件文件（系統(tǒng)組件和第三方組件）；

Public：存放公共文件；

Src/api：Api是插件目錄，用來存放axios配置以及相關(guān)接口文件；

Src/assets：資源文件目錄；

Src/components：組件文件目錄（自定義組件）

Src/config：配置文件目錄；

Src/views：頁面文件目錄；

App.vue：項目入口根文件；

main.js；項目入口文件。

總結(jié)

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

最新評論