使用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;项目入口文件。

相关推荐
魔云连洲14 分钟前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年17 分钟前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
IT_陈寒24 分钟前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku30 分钟前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing35 分钟前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_4569042736 分钟前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说39 分钟前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
永日4567044 分钟前
学习日记-HTML-day51-9.9
前端·学习·html
狗头大军之江苏分军1 小时前
iPhone 17 vs iPhone 17 Pro:到底差在哪?买前别被忽悠了
前端
小林coding1 小时前
再也不怕面试了!程序员 AI 面试练习神器终于上线了
前端·后端·面试