如何导入jQuery

1.全局引入

npm install jquery --save-dev

局部引入

npm install jquery --save-dev

在项目目录下build下的webpack.base.conf.js文件头部加入

var webpack = require('webpack')

并在module.exports的尾部加入

plugins: [
　　new webpack.optimize.CommonsChunkPlugin('common.js'),
　　new webpack.ProvidePlugin({
　　　　jQuery: "jquery",
　　　　$: "jquery"
　　})
]

执行alert测试是否成功

$(function () {alert (123);});

重启服务

npm run dev

如何导入bootstrap

1、安装bootstrap前，必须先安装jQuery

2、安装bootstrap，使用命令

npm install bootstrap --save-dev

可以指定版本，不指定的话会安装最新的版本

npm install bootstrap@3 --save-dev

3，安装成功后，能够在package.json文件夹中看到bootstrap这个模块。这时候需要在main.js中添加如下内容：

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';

怎么导入Element UI

安装

¶npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

CDN

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

引入 Element

你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。

¶完整引入

在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
  el: '#app',
  render: h => h(App)
});

如何实现前后端分离

后端Controller

package com.daoyan;
import io.swagger.annotations.ApiOperation;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class userContrl {
    @ApiOperation("hello控制类")
    @RequestMapping("/hello")
    @CrossOrigin //这里必须配置这个注解 解决端口跨域问题
    public String hello(){
        return "hello";
    }
}

前端

1、安装axios: npm install —save axios

在main.js中设置

// 设置反向代理，前端请求默认发送到 http://localhost:8080/
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8080/' //这里填的是后端的端口
// 全局注册，之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios = axios

<template>
<el-popconfirm title="这是一段内容确定删除吗？">
  <el-button @click="get" slot="reference">删除</el-button>
</el-popconfirm>
</template>
<script>
  export default {
    methods: {
     get(){
        this.$axios.get("/hello") //这里请求后端 拼接起来其实是http://localhost:8080/hello
     } 
    }
  }
</script>

axios请求方法

get方法

this.$axios
                    .get("/documentInf/getLikeDocList", {
                        params: {
                            content: this.input,
                        },
                    })
                    .then((response) => {
                    })
                    .catch((error) => {
                        console.log(error);
                    });

post方法

            this.$axios.post("/noticeInf/addNotice", this.form).then((res) => {
                console.log(res);
            });