vue从零开始搭建vue通用管理后台模板技术干货

1.模拟数据及开发,线上环境分配

2018-08-20  本文已影响158人  RtyXmd
项目地址

github地址、 码云地址

项目数据由easy-mock提供模拟数据,mockjs语法

easy-mock (可跳过)

什么是easy-mock?
easy-mock是一个可视化,并且能快速生成模拟数据的持久化服务,上手简单。为前端开发提供了非常便捷的服务
easy-mock文档

dev与pro环境配置

在config文件中有dev.env.js、prod.env.js分别代表开发环境和生产环境对应的文件,在这里配置对应的地址,那么在开发和打包上线的时候就不用来回切换了

1.prod.env.js 添加测试环境baseurl
module.exports = {
  NODE_ENV: '"production"',
  //这里填写自己项目的开发地址,或者在easy-mock上面创建,如果都没有可以直接用下面这个地址
  BASE_URL: '"https://www.easy-mock.com/mock/5b6142e7cbc4e209c427f9f4/api_v1"'
};
2.dev.env.js 添加生产环境baseurl
const merge = require("webpack-merge");
const prodEnv = require("./prod.env");
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  //这里填写自己项目的线上地址,或者在easy-mock上面创建,如果都没有可以直接用下面这个地址
  BASE_URL:
    '"https://www.easy-mock.com/mock/5b61451dcbc4e209c427f9fc/dev_api_v1"'
});
移除不必要代码

清空app.vue和helloworld.vue

清理文件
2.封装axios、本地存储,安装vuex、element
上一篇下一篇

猜你喜欢

热点阅读