首页 > 其他分享 >vue2+SummerNote

vue2+SummerNote

时间:2023-01-24 12:55:52浏览次数:55  
标签:jquery jQuery vue summernote modules js vue2 SummerNote

简介:想给加一个富文本编辑器到页面上,选择了summernote。接下来开始把summernote往vue这个框架里塞,死活塞不进去。最后把vue3回退到vue2,世界清净了。

大致过程:下载相关包,引入到main.js,script里.summernote()初始化一下,按理说就可以使用了。参考资料:Summernote编辑器的使用

这个代码可以直接运行,但是呢塞到vue3里是不能跑的,首先会出现jQuery和jquery重名,解决了这个问题也不知道为什么就是找不到.summernote()函数。

还有一个封装好的保姆级教程,在vue2里照着做就好了:vue-summernote

如果提示:

warning in ./node_modules/jQuery/dist/jquery.js

There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* xxx\node_modules\jQuery\dist\jquery.js
Used by 1 module(s), i. e.
  xxx\node_modules\summernote\dist\summernote.js
* xxx\node_modules\jquery\dist\jquery.js
Used by 15 module(s), i. e.
xxx\node_modules\vue-summernote\src\plugins\editer\index.js

就在webpack.base.conf.js里的alias里加一条:

 给jQuery起个别名叫jquery即可。

整出来以后实在懒得试自己添加依赖到底行不行了,随便吧。好消息是很快熟悉了vue,记录一下:

webpack

一个打包器。一个项目最终是要打包上线的,这个过程由webpack来处理。

webpack看这一篇就够了

目录结构

 

vue页面加载过程

webpack.base.conf.js:打包基础配置

packag.json:包管理,配置完npm install就会按照这个自动管理依赖,多的删,少的下载。

less,sass和css

less和sass在css的基础上增加了一些好用的东西,编译后会变成css。sass在服务端处理,而less在客户端处理。

CDN方法引入js

类似于这样东西:<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

引用后就可以直接用jquery,而不用下载。

关于内容分发网络(CDN):

CDN 利用全局负载均衡技术将用户的访问指向离用户最近的工作正常的流媒体服务器上,由流媒体服务器直接响应用户的请求。服务器中如果没有用户要访问的内容,会根据配置自动从原服务器抓取相应的内容并提供给用户。

类似缓存的东西。

关于<Script>标签在html页面放置位置

--legacy-peer-deps

npm install xxxx --legacy-peer-deps到底做了些什么?

两个插件可能依赖同一个包,为了不多次下载,npm默认将同一个依赖包提取出来,和两个插件放在同一目录下。但当依赖版本不同时会发生冲突,需要加这个选项解决。

父组件向子组件传值

vue组件传参

虚拟dom与diff算法

虚拟dom:有一个很重要的需求叫数据绑定,即数据更新后页面显示也更新。为了解决js中用来更新数据dom操作令人眼花缭乱的问题,很容易想到写一个程序去比对原先和当前页面要改动的地方,然后一起更新。

如何理解虚拟DOM?

V-for就地复用原理、虚拟DOM、Diff算法?

npm i -S与-D

-S  --save  将保存配置信息到pacjage.json的dependencies节点中。

-D  --save-dev  将保存配置信息到pacjage.json的devDependencies节点中。

jquery和jQuery

npm中有jquery和jQuery,但jQuery现在被淘汰了,用jquery就行。

mounted,watch,和toRefs

mounted为页面元素初始化后执行;相对的created是初始化之前执行。

watch为数据变动后执行的函数。

toRefs:这个功能是vue3中的,先了解下响应式对象

响应式对象就是一个它改变了,页面引用它的部分都会重新渲染的对象。但这个对象的属性值不是响应式的,toRefs将属性从对象里剖出来,使其也变成响应式,修改它时源数据也会改变,但视图不会更新。

*bootstrap.esm.js和You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

 很奇怪,不知道为什么编译到bootstrap.esm.js的的时候就报错,也不知道哪解析不了。

import和require

标签:jquery,jQuery,vue,summernote,modules,js,vue2,SummerNote
From: https://www.cnblogs.com/capterlliar/p/17058091.html

相关文章

  • vue2 router 安装
    报错PSE:\ES6\vue2\vue_2\demo>npminstallvue-router@4npmERR!codeERESOLVEnpmERR!ERESOLVEunabletoresolvedependencytreenpmERR!npmERR!Found:v......
  • vue2安装
    参考https://blog.csdn.net/HoD_DoH/article/details/1246093511-安装node2-下载vueclinpminstall-g@vue/cli3-创建工程vuecreateproject_name......
  • Vue2.0项目引入字体库font-awesome
    1.安装依赖npminstallfont-awesome--save2.引入依赖可以选择全局引入或局部引入import'font-awesome/css/font-awesome.min.css';3.使用方式3.1.基本图标......
  • uniapp vue2.0 动态绑定style
    简单记录几种写法<view:style="{height:height+'rpx'}">动态高度,固定单位</view><view:style="[{height:height+'rpx'}]">动态高度,固定单位,数组写法</vi......
  • Summernote 图片上传
    Summernote默认是插入Base64格式的图片,图片并没有上传到服务器。可以通过API自行实现,官方文档:https://summernote.org/deep-dive/#insertnode插入图片://@param{......
  • 封装vue2自定义指令-滚动到底部加载更多
    前置知识1.clientHeight:(1)含义:只读属性,表示元素的内部高度(元素可见高度),单位为像素。(2)从盒子模型角度看:包含padding,但不包含border,margin以及水平滚动条。(3)注意:内联元......
  • ref 输入框自动获取焦点 input fcous vue2
    环境:vue2当我们的输入框不是一打开页面就显示出来,而是通过点击某个按钮显示或页面跳转时,输入框自动获取焦点的方法如下:输入框添加属性ref=“newMethodTitle”在点......
  • sortablejs 列表拖拽排序,js vue2,解决拖拽排序乱序问题
    功能:在列表中,需要给列表进行拖拽排序,并实时保存拖拽后的列表书序实现;运用js中的sortablejs库环境:vue2中文网:http://www.sortablejs.com在首页中下拉可以看到有多个......
  • vue2 项目引入Fontawesome
    官网:https://fontawesome.com/1.安装```powershellnpmi--save@fortawesome/fontawesome-svg-coreUsingVue2.x```powershell$npmi--save@fortawesome/vue......
  • Vue2.002.开发过程中部分功能实现
    01.Vue中动态加载图片失败时,默认图片的配置>> 引入图片:  importdefaultImgfrom'@/assets/default.png'>> img 标签配置@error 事件,   @error="......