vue对应的ui框架从脚手架方式切换为cdn的方法

最新推荐文章于 2023-09-11 10:17:03 发布

绅士1993

最新推荐文章于 2023-09-11 10:17:03 发布

阅读量1k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/aitanxiaofeng/article/details/106788532

版权

vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

vue的cdn方式会用,脚手架也会用,但是一直有个困扰我的问题.如何吧脚手架方式渲染的页面变成cdn方式

不多废话,直接先上切换代码

vue脚手架方式渲染页面的代码

此处省略main.js引入第三方ui的js和css和app.vue,例子使用的vant(ui框架)
<template>
	<van-tabs v-model="active">
	  <van-tab title="标签 1" class="tab">内容 1</van-tab>
	  <van-tab title="标签 2" class="tab">内容 2</van-tab>
	  <van-tab title="标签 3" class="tab">内容 3</van-tab>
	  <van-tab title="标签 4" class="tab">内容 4</van-tab>
	</van-tabs>
</template>

<script>
	export default {
	  data() {
	    return {
	      active: 2,
	    };
	  },
	};
</script>

<style>
        .van-tab span{
            color:blue
        }
</style>

cdn方式代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--此处作用为调整手机版整体的比例,电脑版不用管-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>cdn</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.8/lib/index.css"/>
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.8/lib/vant.min.js"></script>
    <style type="text/css">
        .van-tab span{
            color:blue
        }
    </style>
</head>
<body>
<div id="app">
    <my-template
            :active="active"
    ></my-template>
</div>
<template id="my-template">
    <van-tabs v-model="active">
        <van-tab title="标签 1">内容 1</van-tab>
        <van-tab title="标签 2">内容 2</van-tab>
        <van-tab title="标签 3">内容 3</van-tab>
        <van-tab title="标签 4">内容 4</van-tab>
    </van-tabs>
</template>
<script>
    Vue.component('my-template',{
        props:['active'],
        template: '#my-template'
    })
    // 在 #app 标签下渲染一个按钮组件
    new Vue({
        el: '#app',
        data(){
            return {
                active: 0,
            }
        },
        methods:{

        }
    });

    // 通过 CDN 引入时不会自动注册 Lazyload 组件
    // 可以通过下面的方式手动注册
    Vue.use(vant.Lazyload);
</script>
</body>
</html>

上方对比代码可以看出来,其实大同小异,很相似的结构,都有template,script,style标签,无非脚手架封装了这一切,更加简洁,<div id="app>这个div和app.vue的作用一样,所有组件的顶级

关于组件的定义可以参考官方文档
vue官方文档,定义组件