前后端分离实践（四）—— 使用vue-cli搭建前端展示层并用mock模拟测试数据

最新推荐文章于 2025-03-24 17:30:00 发布

原创

最新推荐文章于 2025-03-24 17:30:00 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前后端分离

本文介绍了如何使用vue-cli搭建前端应用，并通过mockjs模拟接口数据进行测试。首先全局安装vue-cli，初始化vue项目，然后安装mockjs和axios，创建mock数据文件并在main.js中引用展示。最后，通过Chrome调试器查看效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前后端分离实践系列文章总目录

一、搭建一个Vue-cli脚手架应用

1、全局安装vue-cli

2、使用webpack初始化一个vue应用

3、进入fbsep-vue应用目录启动应用

5、在index.html中添加一个div标签

6、在main.js入口文件中访问mock数据并展示在index.html上

7、重启fbsep-vue应用查看结果

8、F12查看Chrome调试器

三、源码地址

一、搭建一个Vue-cli脚手架应用

1、全局安装vue-cli

任意目录下使用命令：cnpm install vue-cli –g

2、使用webpack初始化一个vue应用

在工作目录下使用命令：vue init webpack fbsep-vue
请注意：项目名称不要使用中文，不能有大写字母，只能使用小写
按照提示依次填写：
Project name(项目名称)：
Project description(项目描述)：
Author(作者)：
Vue build(Runtime+Compiler和Runtime-only两种，直接敲回车选第一个)：
Install vue-router(是否安装vue-router)：y
Use ESLint to lint your code(是否启用eslint检测规则)：n
Set up unit tests(设置单元测试)：n
Setup e2e tests with Nightwatch?( 设置端到端测试Nightwatch吗？)：n
Should we run `npm install` … ?(直接敲回车选第二个使用npm)