vue-admin

一、 vue-element-admin （集成方案）

vue-element-admin 官方文档

vue-element-admin 项目地址 github

# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git

# 进入项目目录
cd vue-element-admin

# 安装依赖
npm install

# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 启动服务
npm run dev

二、 vue-admin-template （基础模板）

vue-admin-template 项目地址 github

# 克隆项目
git clone https://github.com/PanJiaChen/vue-admin-template.git

# 进入项目目录
cd vue-admin-template

# 安装依赖
npm install

# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 启动服务
npm run dev

其他

# 预览发布环境效果
npm run preview

# 预览发布环境效果 + 静态资源分析
npm run preview -- --report

# 代码格式检查
npm run lint

# 代码格式检查并自动修复
npm run lint -- --fix

三、 初始化一个 git 仓库

模板是从 github 上拉下来的，所以自己新建一个仓库存放项目 把除了.git外的文件全部复制到自己的文件夹中后push一下。

四、 配置环境变量

1. url: VUE_APP_BASE_URL
2. api: VUE_APP_BASE_API
3. 代理： VUE_APP_PROXY_TARGET

VUE_APP_BASE_URL = 'http://jszero.cn/'
VUE_APP_BASE_API = '/api'
VUE_APP_PROXY_TARGET = 'http://jszero.cn'

// 访问结果： http://jszero.cn/api'

五、 vue-admin-template 改造

1. 安装

vue-element-admin

# 克隆项目
git clone https://github.com/PanJiaChen/vue-admin-template.git

# 进入项目目录
cd vue-admin-template

# 安装依赖
npm install

# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 启动服务
npm run dev

浏览器访问 http://localhost:9528

2. 新建立一个用于 mock 数据模拟的dev:mock环境

1. 修改 Development

//package.json

  "scripts": {
    "dev": "vue-cli-service serve",
    // 增加下面一行
    "dev:mock": "vue-cli-service serve --mode development-mock",
  },

2. 修改环境变量配置

.env.development

# just a flag
ENV = 'development'

VUE_APP_BASE_API = '/api'

# 代理到你自己的服务器地址
VUE_APP_PROXY_TARGET = 'http://127.0.0.1:7001'

# 你自己的服务器地址
VUE_APP_BASE_URL = 'http://127.0.0.1:7001'

VUE_CLI_BABEL_TRANSPILE_MODULES = true

根目录新建 .env.development-mock 文件,复制 .env.development的代码

# just a flag
ENV = 'development'

VUE_APP_BASE_API = '/api'

# 定义mock的端口,避免和我们常用的冲突
PORT=7009

# 代理到mock
VUE_APP_PROXY_TARGET = 'http://127.0.0.1:7009/mock'

VUE_CLI_BABEL_TRANSPILE_MODULES = true

1. 配置反向代理

// vue.config.js

  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      // change xxx-api/login => mock/login
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        // target: `http://127.0.0.1:${port}/mock`,
        // 注释掉上面一行换成下面一行
        target: process.env.VUE_APP_PROXY_TARGET,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    after: require('./mock/mock-server.js')
  },