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

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

目录

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

1、全局安装vue-cli

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

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

4、浏览器访问fbsep-vue应用

二、使用mock进行接口数据模拟

1、安装mockjs

2、安装Axios

3、添加mock测试数据文件

4、引用mock测试数据文件

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)

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

在fbsep-vue目录下使用命令：cnpm run dev

看到如下内容代表启动成功：

4、浏览器访问fbsep-vue应用