

Vue CLI 3 主打自动化零配置确实很方便。有些地方还是需要进行一些配置,但是配置起来也非常简洁。
今天分享一下 Vue CLI 3 环境中使用模拟数据(Mock)的简单方法。
首先我们看一下目录结构:
首先在根目录上创建个 mock
目录用于存放模拟数据,当然你可以根据你的喜好随便命名目录。我在这个目录下放了一个 index.json
模拟数据文件,当然你也可以使用 mock.js。
然后在根目录下新建一个 vue.config.js
文件,这文件是调整 webpack 配置最简单的方式,将会被 webpack-merge 合并入最终的 webpack 配置中。 在 vue.config.js
中编写以下内容:
const mockIndexData = require("./mock/index.json"); module.exports = { //... devServer: { port: 8080, before(app) { app.get("/api/index", (req, res) => { res.json(mockIndexData); }); } } };
这样我们就可以在我们得组件中调用这个API了,例如:
import axios from "axios"; export default { name: "home", data() { return { // ... }; }, components: { // ... }, mounted() { this.getHomeData(); }, methods: { getHomeData() { axios.get("/api/index").then(res => { console.log(res); // ... }); } } };
搞定!
Vue CLI 3 确实改进了很多,也方便了很多,对于对于不习惯用命令行的用户可以看看 使用 Vue CLI 用户界面工具用可视方式创建 Vue 应用程序 ,确实很方便,功能也很强大。
最新评论
写的挺好的
有没有兴趣翻译 impatient js? https://exploringjs.com/impatient-js/index.html
Flexbox playground is so great!
感谢总结。
awesome!
这个好像很早就看到类似的文章了
比其他的教程好太多了
柯理化讲的好模糊…没懂