• 在HTML当中引入Vue控件,以element-ui为例


    前情:需要实现一个同时满足按天、按周、按月选择的时间选择器,但是以HTML为基础写的都不太满足我的要求,要么只能按天选择,要么就是想选择久远的时间得点很久,除非自己写捷径,所以就看上了element-ui的这个时间选择器。

    其实要想用的话很简单,先引入vue和element-ui的js和css。

    这里我用的是本地的js引入,地址分别为:【vue这个可能连不上,可以自己去找。

    https://cdn.jsdelivr.net/npm/vue/dist/vue.js

    1. <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    2. <script src="https://unpkg.com/element-ui/lib/index.js">script>

    下载到本地后引入:

    1. <script type="text/javascript" src="../static/js/vue.js">script>
    2. <link rel="stylesheet" href="../static/css/element-ui-index.css">
    3. <script src="../static/js/index.js">script>

    要注意的点是vue必须在element-ui上面,我这个css改名了主要是我原本就有一个index的css了,如果和我情况不一样的话可以维持原来的名称不变。

    然后在需要此vue组件生效的区域定义一个div标签,等会用js初始化,比如我这个时间选择器在顶部,我就拿个id为app的div包裹起来,然后new一个Vue。

    1. <div class="container" id="app">
    2. <div class="block">
    3. <span class="demonstration">span>
    4. <el-date-picker
    5. v-model="value1"
    6. type="week"
    7. format="yyyy 第 WW 周"
    8. placeholder="选择周">
    9. el-date-picker>
    10. div>
    11. div>
    1. <script>
    2. new Vue({
    3. el: '#app',
    4. data: function() {
    5. return {value1:""}
    6. }
    7. })
    8. script>

    到这里基本OK了,但是我遇到了以下几个问题,也许你也会遇到:

    1.vue版本和element-ui版本不匹配的问题:

    报错内容:Uncaught SyntaxError: Unexpected token '<'

    我刚开始用的是vue3,出现了index.js无法读取的问题,然后把vue降为2就可以了,如果一定要用vue3的话,element-ui首页有讲相关方法,可以自己去查。【我没用过,但是估计就和我的在html中引入的想法相悖了,就没试

    2.script 后面没加 type="module"导致的报错

    这个其实忘了报的什么错了,后来加了就好了,但是我今天试了下把它去掉也能用。。

    3.element-ui的模块,图标不正常显示的问题。

    这个是因为我们下载的css当中没有font文件,去下载就好了。

    地址:UNPKG - element-ui

    下载这个地址的两个文件即可,注意要和css、js的版本一致,【不过应该一直没更新差别不大

    然后如果没点进去,在外面直接右键链接另存为是不行的,下载完成之后大小明显和页面当中显示的不一样,读取会失败,最好是点进去之后然后View Raw,在新的网页右键另存为,或者有的浏览器可以直接自动下载,下载完成后对比一下文件大小。

    下载完成后到你的css文件夹中新建一个fonts文件夹,把这两个文件丢进去就好了。

    嗯,这个教程就到此为止了,祝你成功

    和正常vue项目的区别是,因为你这个是初次使用vue,所以必须新建然后在里面写,如果按照element-ui当中的代码,export,就只会失败。

    bonus:如果在vue这块的代码中引入js包,该怎么处理?

    我在抄另一个代码的时候,看到用到了this.$moment,显然我们的HTML文件是不支持这样的用法的,import也是不行的,但其实可以直接用上面的方法引入js包,然后直接moment()调用方法。

    然后最近还是想试试flask+vue的完整用法,看了看官网,发现原来官网就给出了解决方案

    不过我倒是没试过,而且vue和flask其实在参数的引入方面是有冲突的:都是用双括号进行参数的引入{{}},应该是有设置文件进行更改的,这个等我实践过后再说

  • 相关阅读:
    PCL ICP精配准(点到点)
    【MySQL进阶之路 | 高级篇】索引及索引的数据结构
    极智开发 | git 命令行基本操作
    unity Socket 客户端向服务端发送消息并实现简单远程控制
    Hbase相关总结
    [LeetCode]-链表-2
    C进阶 - 指针进阶
    puzzle(102.1)不规则数独、变种数独
    IM即时通讯开发之Android内存泄漏监控
    Java 代码和使用steam流(List对象使用流操作示例,Java正则匹配,获取当前操作系统)
  • 原文地址:https://blog.csdn.net/azyxa1/article/details/134076581