前言

虽然现在前后端分离已成大趋势，java后端就不用写页面了，但是偶尔自己写个小项目也是需要自己写前端页面的。不分离的时候页面写在templates或者static文件夹下，使用npm的方式就显得有点麻烦了，那么我们就用CDN引入的方式来写。Vue官网推荐新手使用CDN的方式学习Vue。

项目结构如下图

一、CDN引入

在index.html页面引入Vue相关的js和css，请求后台接口使用axios，UI我们使用饿了么的element-ui。

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet" />

二、封装axios请求工具

1、创建axios示例，添加请求拦截器和响应拦截器。

注意使用element-ui的message组件时，要使用 ELEMENT.Message，在这里我们没法和npm方式似的把message组件import进来。

request.js

// create an axios instance
const service = axios.create({
    baseURL: 'http://localhost:8888',
    timeout: 60000 // request timeout
});

// request interceptor
service.interceptors.request.use(
    config => {
        // do something before request is sent
        return config
    },
    error => {
        // do something with request error
        console.log(error); // for debug
        return Promise.reject(error)
    }
);

// response interceptor
service.interceptors.response.use(

    response => {
        const res = response.data;
        const code = res.code;
        if (code === undefined){
            return response;
        }
        if (code !== 200) {
            ELEMENT.Message({
                message: res.msg || 'Error',
                type: 'error',
                duration: 5 * 1000
            });
            return Promise.reject(new Error(res.message || 'Error'))
        } else {
            return res
        }
    },
    error => {
        console.log('err' + error); // for debug
        ELEMENT.Message({
            message: error.message,
            type: 'error',
            duration: 5 * 1000
        });
        return Promise.reject(error)
    }
);

export default service

 2、根据axios实例，添加请求。

注意函数的参数的区别，params是键值对的参数，是一个一个的，后台可以用@RequestParam来接收，而data是json格式的参数，后台可以用@RequestBody来接收。

import request from '../utils/request.js'

export function getDatabaseLink(params) {
    return request({
        url: 'link',
        method: 'get',
        params
    })
}

export function addTables(data) {
    return request({
        url: 'tables',
        method: 'post',
        data
    })
}

三、初始化

写一个id为app的div，然后初始化Vue，注意script标签有一个type="module"的属性，只有添加了这个属性以后才可以使用import，把前面写好的请求接口工具import进来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet" />
</head>
<body>
    <div id="app">
        <el-button @click="alert">{{message}}</el-button>
    </div>
    <script type="module">
        import { getDatabaseLink, addTables } from "./api/database.js";
        
         const app = new Vue({
            el: '#app',
            data: {
                message：'按钮',
                data: ''           
            },
            methos: {
                alert() {
                    getDatabaseLink().then(response => {
                        this.data = response.data;
                    })
                    console.log('点击了按钮');
                }
            }
        })
    </script>

四、注册icon组件

element-ui官方提供了很多图标，但是总有一些是没有的。所以，我们可以自定义一个icon组件，从https://www.iconfont.cn/找到我们想要的。

1、iconfont.js是从网站上下载的

2、icons/index.js

//全局注册icon-svg
Vue.component('svg-icon', {
    props: {
        iconClass: {
            type: String,
            required: true
        },
    },
    template: '<svg class="svg-icon" aria-hidden="true">\n' +
        '        <use :xlink:href="iconName"></use>\n' +
        '    </svg>',
    computed: {
        iconName() {
            return `#icon-${this.iconClass}`
        }
    }
});

3、再添加一个样式，styles/svg-icon.css

.svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

4、使用

添加styles/svg-icon.css，icons/iconfont.js，icons/index.js

在页面中添加<svg-icon :icon-class="" ></svg-icon>标签即可

icon-class是从IconFont网站下载的实例中的Symbol中红色方框内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet" />
    <link href="styles/svg-icon.css" rel="stylesheet">
</head>
<body>
    <div id="app">
        <svg-icon :icon-class="iconName" ></svg-icon>
        <el-button @click="alert">{{message}}</el-button>
    </div>

    <script src="icons/iconfont.js"></script>
    <script src="icons/index.js"></script>
    <script type="module">
        import { getDatabaseLink, addTables } from "./api/database.js";
        
         const app = new Vue({
            el: '#app',
            data: {
                message：'按钮',
                data: '',
                iconName: 'home'           
            },
            methos: {
                alert() {
                    getDatabaseLink().then(response => {
                        this.data = response.data;
                    })
                    console.log('点击了按钮');
                }
            }
        })
    </script>

写在最后的话

个人感觉还是npm方式更好用，每一个小的组件可以写成.vue文件，但是CDN的方式没法这么写，而且CDN方式使用Vue Router比较麻烦，定义模板要把html代码写在字符串里。可能是我没找到简单的方法，如果有更好的方法，可以留言告诉我。

# java
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue