vue-cli ElementUI

ElementUI
1.使用
第一步, 在项目的终端运行下面的命令 安装elementui的js css文件

npm i element-ui -S
第二步, 在 main.js中 引入elementui

//参考官网介绍
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//全局中 使用 elementui
Vue.use(ElementUI);

第三步, 在components文件夹中 创建menus.vue文件

<template>
  <div>
    <el-col :span="12">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
  </el-col>
  </div>
</template>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
<script>
export default {
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

第四步, 在需要使用菜单组件的目标页面上

1.声子

2.挂子

3.用子

第五步, 使用axios请求后端数据

通过 npm i axios -S 在当前项目下 下载axios依赖的js文件

在页面中 import 引入axios 剩下使用方式和以前一样
第六步, 前端解决跨域(后端就可以不用配置跨域了,方案有点多)

在开发过程中，从 Vue 项目发送请求到目标服务器，会存在跨域问题，因此，我们需要在 vue.config.js 文件中进行配置：

module.exports = {
    // 配置开发环境中要访问的服务器地址
    devServer: {
        proxy: 'http://localhost:8888'
    }
}

注意：

vue.config.js 文件需要自己在项目根目录手动创建。

vue.config.js 文件发生改动后，需要重启 Vue 项目。

引入
     import axios from 'axios'

发请求

     // get
      const data = await axios({
          url: "/students",
          method: "GET",
          // GET 请求前端发送给后端的数据
          params: {
              type: "name",
              value: "",
              pageSize: 10,
              currentPage: 1,
          },
      });
     // POST
      const data = await axios({
          url: "/students",
          method: "POST",
          // Post 请求前端发送给后端的数据
          data: {
              type: "name",
              value: "",
              pageSize: 10,
              currentPage: 1,
          },
      });

5.main.js中注意，不要加默认的url

     import Vue from 'vue'
     import App from './App.vue'
     import router from './router'
     import store from './store'
     import axios from 'axios'
     Vue.config.productionTip = false
     Vue.prototype.$axios=axios;
     // 设置默认的url会导致跨域 需要在vue.config.js中配置跨域解决方案
     // axios.defaults.baseURL="http://localhost:8081"
     new Vue({
       router,
       store,
       render: h => h(App)
     }).$mount('#app')

6.提供完整的跨域解决配置：

```js
‘use strict’
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require(‘path’)

module.exports = {

     dev: {
         // Paths
         assetsSubDirectory: 'static',
         assetsPublicPath: '/',
         proxyTable: {
             '/api': {
                 target: 'http://localhost:8082', // 你请求的第三方接口
                 changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                 pathRewrite: { // 路径重写，
                     '^/api': '/' // 替换target中的请求地址，也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api即可。
                 }
             }
         },
         // Various Dev Server settings
         host: 'localhost', // can be overwritten by process.env.HOST
         port: 9999, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
         autoOpenBrowser: true,
         errorOverlay: true,
         notifyOnErrors: true,
         poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

        /**
         * Source Maps
         */
        // https://webpack.js.org/configuration/devtool/#development
        devtool: 'cheap-module-eval-source-map',
        // If you have problems debugging vue-files in devtools,
        // set this to false - it *may* help
        // https://vue-loader.vuejs.org/en/options.html#cachebusting
        cacheBusting: true,
        cssSourceMap: true
    },
    build: {
        // Template for index.html
        index: path.resolve(__dirname, '../dist/index.html'),
        // Paths
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: './',
        /**
         * Source Maps
         */
        productionSourceMap: true,
        // https://webpack.js.org/configuration/devtool/#production
        devtool: '#source-map',
        // Gzip off by default as many popular static hosts such as
        // Surge or Netlify already gzip all static assets for you.
        // Before setting to `true`, make sure to:
        // npm install --save-dev compression-webpack-plugin
        productionGzip: false,
        productionGzipExtensions: ['js', 'css'],
        // Run the build command with an extra argument to
        // View the bundle analyzer report after build finishes:
        // `npm run build --report`
        // Set to `true` or `false` to always turn it on or off
        bundleAnalyzerReport: process.env.npm_config_report
    }
}
```