SpringCloud+vue+element-ui+docker前后端项目实践到部署（五）

前端vue项目改造

安装es6

按需引入

npm install babel-plugin-component --save-dev

npm install babel-preset-es2015 --save-dev

.babelrc文件改为：

 

{
  "presets": [
    ["env", { "modules": false }],
    ["es2015", { "modules": false }],
    "stage-2"
  ],
  "plugins": [["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]],"transform-runtime"],
  "comments": false,
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    }
  }
}

安装element-ui

npm install element-ui --save

在main.js中添加element-ui的全局使用

 

import Element from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(Element);

 

安装axios

npm install axios --save-dev

npm install vue-axios --save-dev

 

在main.js添加axios全局使用

import axios from 'axios'

import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios);

 

设置vue-router模块化

在main.js中设置

import VueRouter from 'vue-router'

Vue.use(VueRouter)
const router = new VueRouter({
  routes:routers
})

router改造index.js

 

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
// 定义路由配置
let routes = []
let concat = (router) => {
  routes = routes.concat(router)
}

import Index from '../views/demo/router/router'
concat(Index)
export default routes;

新建一个页面文件包含每一个模块的router.js

router.js具体为

import Demo from "../demo"

export default [
  {
    path: '/demo',
    component: Demo,
    name:"demo"
  },
]

启动测试：

跨越问题处理

在config文件下的index文件中设置

proxyTable: {
  '/api': {
    target:'http://127.0.0.1:9000',
    // secure: false, // 如果是https接口，需要配置这个参数
    changeOrigin:true,
    pathRewrite:{
      '^/api': ''
    }
  }
}

测试

SpringCloud+vue+element-ui+docker前后端项目实践到部署（六）

SpringCloud+vue+element-ui+docker前后端项目实践到部署（四）

SpringCloud+vue+element-ui+docker前后端项目实践到部署（三）

SpringCloud+vue+element-ui+docker前后端项目实践到部署（二）

SpringCloud+vue+element-ui+docker前后端项目实践到部署（一）