使用Vue创建前后端分离项目的完整过程(前端部分)

前言

前端使用Vue.js作为前端开发框架，使用Vue CLI3脚手架搭建项目，使用axios作为HTTP库与后端API交互，使用Vue-router实现前端路由的定义、跳转以及参数的传递等，使用vuex进行数据状态管理，后端使用Node.js+express，连接Mysql数据库。

1. 确定电脑上已经安装了Node.js

如果已经安装了Node，可以通过cmd查看版本号。Node.js包含npm，这在之后要使用npm命令安装axios。

如果没有安装，可以直接到官网上下载最新版的node.js，官网地址：Node.js — 下载 Node.js®

2. 创建项目

（1）先创建一个项目的根目录，如在D盘创建项目文件夹：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 已经安装成功，且提示可以升级。

（3）可以直接在HBuilder X项目中，创建项目client。

创建好项目后如下:

3. 安装axios

axios作为HTTP库与后端API交互，所以要安装，但是在安装axios之前，要先创建配置文件，在项目的src目录下，创建配置文件夹config，在config文件夹下创建文件index.js文件。

（1）创建config文件夹：client右键->新建->目录。

（2）创建index.js文件：config右键->新建->js文件。

（3）填写index.js的内容

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

export default{
	title:"MoreMall",
	baseURL:{
		//开发时后台接口
		development:"http:/127.0.0.1:3000/api",  //填写自己的API地址
		//生产时后台接口（test）
		product:"/"
	}
}

结果如下：

（4）安装axios

这个要通过cmd命令行来安装，先要进入项目的根目录文件夹。

之后使用命令：npm install axios

安装成功后后，会在项目的node_modules文件夹下增加很多组件。

4. 配置axios

安装完成后，在src文件夹下新建api子文件夹，在api下新建文件axios.js，完成相关配置。

（1）创建api文件夹：src右键->新建->目录。Api是插件目录，用来存放axios配置以及相关接口文件。

（2）创建axios.js文件：api右键->新建->js文件。

（3）填写axios.js的内容

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

 结果如下：

5. 创建页面文件目录

在src目录下，创建views文件夹，用于存放页面文件。

6. 项目的目录说明

node_modules：存放组件文件（系统组件和第三方组件）；

Public：存放公共文件；

Src/api：Api是插件目录，用来存放axios配置以及相关接口文件；

Src/assets：资源文件目录；

Src/components：组件文件目录（自定义组件）

Src/config：配置文件目录；

Src/views：页面文件目录；

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

main.js；项目入口文件。

总结

到此这篇关于使用Vue创建前后端分离项目的文章就介绍到这了,更多相关Vue创建前后端分离项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论