详细搞懂vue2.0 3.0区别-summernote富文本使用

文章目录

- 背景
- 介绍
- 必备知识
- 实操安装
- 回退脚手架vue cli版本
- vue-使用summernote富文本功能（不失效版）
- 小知识

如果感觉有用点个关注，一键三连吧！蟹蟹！！！

背景

一开始只是准备实现summernote富文本，网上搜的教程那叫一个乱，抄袭照搬，愣是浪费了我很多时间。中间遇到很多问题，比如nodejs、vue、vue-cli需要安装什么版本、什么版本稳定、如何安装这些版本、如何使用最新版是否可以实现，网上基本没有一个能够说的明白，或者说很是笼统、混淆。不过最终的结果是好的，最终实现了。

介绍

Vue是什么？而Vue Cli又是什么？我们需要简单了解和认知，不要混淆。

Vue是渐近式框架，你可以用它一个功能，也可以用全家桶。比如你可以在老的jsp或thymeleaf项目里，引入vue.js，只用它核心的数据绑定功能。

Vue CLI是一个脚手架，通俗点说就是代码生成器，可以快速生成一套基于Vue完整的前端框架，单独编译，单独部署。可以再集成各种第三方插件，扩展出更多的功能。

vue 和 vue-cli 的区别以及关联基本概念** vue：是一套框架，用于构建用户界面的渐进式框架。 Vue-cli：而vue-cli 是一个基于 Vue.js进行快速开发的完整系统**。 Vue vue主要是从基础知识、组件的了解、动画的过渡、可复用性和组合以及工具、模块化的管理。

必备知识

必须要了解到的命令:
vue脚手架安装及卸载

 vue-cli卸载：
npm uninstall vue-cli -g（3.0以下版本卸载）
npm uninstall -g @vue/cli（3.0以上版本卸载）
 
vue-cli安装：
npm install -g @vue/cli （安装的是最新版）
npm install vue-cli@2.9.6 （指定版本安装【指定版本为3.0以下版本】，其中2.9.6为版本号）
npm install -g @vue/cli@3.11.0（指定版本安装【指定版本为3.0以上版本】，其中3.11.0为版本号）复制

查看vue与vue cli版本信息

 vue --version或者vue -V  //查看版本信息Vue-cli
 
npm list vue || npm list vue -g  //查看Vue版本复制

如何安装使用vuejs
先简单说一下步骤：
1、安装node.js
2、安装vue-cli脚手架，然后就可以创建项目了
3、把创建好的项目，使用vscode软件进行开发即可（你也可以使用其他软件进行开发）

如果想要简单创建项目玩一下，说实话安装很简单的，也可以参考图文并茂博客：Vue安装-使用可视化管理工具

注意、注意、注意，先不要安装，看完下面我安装的版本，再操作（参考，探究到底）

实操安装

①node.js需要安装什么版本，如何选择？
我安装的是版本V14.17.0；我认为它是很稳定的，你可以任意选择其他版本。这个并不是很影响（作为参考）
附带安装node全部版本，官网下载地址：https://nodejs.org/dist/
②vue cli脚手架需要安装什么版本，如何选择？
这里我要解释一下，目前创建项目可供选择vue2.0、vue3.0；请不要混淆！！！
如果你只想使用vue2作为主版本，请安装@vue/cli4.4.6版本，因为我在官网中看到了这句话

 对于 Vue 3，你应该使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli。复制

也就是说Vue CLI 4.5以下，对应的是Vue2，Vue CLI 4.5及以上，对应的是Vue3，当然，创建项目的时候可以选择Vue2

命令查询所有的包，就可以安装想要的版本了，上面必备知识说过如何安装

 npm view @vue/cli versions复制

注意：这里选择对后续操作影响很大
比如：当你选择Vue3创建项目，你需要安装的脚手架是Vue CLI4.5及以上
▲你想要使用elementUi，可能会出现莫名的错误。
Uncaught TypeError: Cannot read properties of undefined(reading ‘prototype’)。
在这里插入图片描述

解释说法最多的是，vue3中引入了elementUi，vue3.0之后是不支持elementUi的，要使用element plus。不过替换之后，也确实解决了我的问题。(仅供参考，我想一定有其他办法解决)
▲已element为例，Vue3和Vue2配置信息要理清
进行对比Vue2和Vue3的main.js文件

 import Vue from "vue";
import App from './App.vue';
import router from "./router";
new Vue({
  router,
  render: h => h(App)
}).$mount("#app");
 
//Vue2 ->main.js 的配置复制

 import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
 
createApp(App).use(router).mount('#app')
 
//Vue3 ->main.js 的配置复制

进行对比Vue2和Vue3的src -> plugins -> elments.js文件

 import Vue from 'vue'
import { Button } from 'element-ui'
 
Vue.use(Button)
    
//Vue2复制

 import { createApp } from 'vue'
import { Button } from 'element-ui'
 
createApp().use(Button)
    
//Vue3复制

比如：脚手架的版本选择-区别细节
Vue-cli3+ 和 Vue-cli2 的最大区别：在于内置了很多配置，没有 build 文件夹和 config 的配置。但是在开发中，避免不了的还是需要个性化的配置，这里讲一下 vue.config.js 的配置。
▲在Vue-cli3+版本中你会找不到build文件和里面的webpack.config.js文件，但是开发过程中，避免不了个性化配置。如何做？
Vue 项目中 vue.config.js 文件就等同于 webpack 的 webpack.config.js。

vue-cli3之后创建的时候并不会自动创建 vue.config.js，因为这个是个可选项，所以一般都是需要修改 webpack 的时候才会自己创建一个 vue.config.js。

开发者一般不需要再去知道 weboack 做了什么，所以没有暴露 webpack 的配置文件，但你依然可以创建 vue.config.js 去修改默认的 webpack。
手动创建一个vue.config.js

 module.exports = {
  publicPath: './',  // 基本路径
  outputDir: 'dist', // 构建时的输出目录
  assetsDir: 'static', // 放置静态资源的目录
  indexPath: 'index.html', // html 的输出路径
  filenameHashing: true, // 文件名哈希值
  lintOnSave: false, // 是否在保存的时候使用 `eslint-loader` 进行检查。
 
  // 组件是如何被渲染到页面中的？ （ast：抽象语法树；vDom：虚拟DOM）
  // template ---> ast ---> render ---> vDom ---> 真实的Dom ---> 页面
  // runtime-only：将template在打包的时候，就已经编译为render函数
  // runtime-compiler：在运行的时候才去编译template
  runtimeCompiler: false,
 
  transpileDependencies: [], // babel-loader 默认会跳过 node_modules 依赖。
  productionSourceMap: false, // 是否为生产环境构建生成 source map
 
  //调整内部的 webpack 配置
  configureWebpack: () => { },
 
  chainWebpack: () => { },
 
  // 配置 webpack-dev-server 行为。
  devServer: {
    open: true, // 编译后默认打开浏览器
    host: '0.0.0.0',  // 域名
    port: 8080,  // 端口
    https: false,  // 是否https
    // 显示警告和错误
    overlay: {
      warnings: false,
      errors: true
    },
  }
}复制

回退脚手架vue cli版本

找到想要安装项目的目录或者Windows+R 打开命令提示符、输入cmd
在这里插入图片描述

查看版本信息

 npm list vue || npm list vue -g  //查看Vue版本
 
node --version  //查看node版本复制

在这里插入图片描述

回退版本（已我的版本为例）
先使用命令npm uninstall -g @vue/cli（3.0以上版本卸载），在使用命令npm install -g @vue/cli 安装最新版本即可

 vue-cli卸载：
npm uninstall vue-cli -g（3.0以下版本卸载）
npm uninstall -g @vue/cli（3.0以上版本卸载）
 
vue-cli安装：
npm install -g @vue/cli （安装的是最新版）
npm install vue-cli@2.9.6 （指定版本安装【指定版本为3.0以下版本】，其中2.9.6为版本号）
npm install -g @vue/cli@3.11.0（指定版本安装【指定版本为3.0以上版本】，其中3.11.0为版本号）复制

你可能会遇到的问题，比如使用命令vue ui时，页面会失去连接
问题1：使用vue-cli创建项目时报错

 ERROR  ~/.vuerc may be outdated. Please delete it and re-run vue-cli in manual mode.复制

解决方法

进入C盘 ----> 用户目录 —> Administrator目录，即C:\Users\Administrator
找到 .vuerc 文件，把它删除
重新创建项目即可

在这里插入图片描述

问题2：vue项目启动报错 spawn cmd ENOENT errno: -4058
报错如下

 DONE  Compiled successfully in 11178ms                                                                      
 
 
  App running at:
  - Local:   http://localhost:8080/
  - Network: unavailable
 
  Note that the development build is not optimized.
  To create a production build, run npm run build.
 
events.js:292
      throw er; // Unhandled 'error' event
      ^
 
Error: spawn cmd ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
    at onErrorNT (internal/child_process.js:465:16)
    at processTicksAndRejections (internal/process/task_queues.js:80:21)
Emitted 'error' event on ChildProcess instance at:
    at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
    at onErrorNT (internal/child_process.js:465:16)
    at processTicksAndRejections (internal/process/task_queues.js:80:21) {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'spawn cmd',
  path: 'cmd',
  spawnargs: [ '/c', 'start', '""', '/b', 'http://localhost:8080/' ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! app@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the app@0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.复制

因为电脑中缺少cmd运行程序的环境变量。
解决方法：
环境变量配置在系统变量path中添加 C:\windows\system32

后面如果还是不行，建议卸载node.js，删除vue cli 。重装node.js，vue cli脚手架，就可以了（听着麻烦，实际也就几分钟的事情）

vue-使用summernote富文本功能（不失效版）

官方地址summernote：https://summernote.org/
先看一下效果图
在这里插入图片描述

我这边以vue2.0为例，因为使用vue3.0你们会遇到各种各样的问题。最终可能还搞不成事。（我会简单介绍一下vue3.0我遇到的部分问题）
实操
1、首先版本选择
node.js选择14.17.0版本
vue cli选择@vue/cli4.4.6版本
创建项目时选择vue2.0，默认即可
2、部分插件安装
使用vscode打开你创建的项目，执行下面命令即可。

 npm install --save jquery
npm install bootstrap@3
npm install --save codemirror
npm install --save summernote
npm install --save font-awesome
npm install --save jquery popper.js复制

npm install bootstrap@3；我为什么加上@3版本的，因为高版本会影响到，下面我会简单解释一下。
3、项目中是否存在vue.config.js文件
如果不存在vue.config.js文件，创建一个，我们配置一下jquery

 //不要疑惑，vue.config.js就那么多东西，可以直接替代了
const webpack = require('webpack')
module.exports = {
	configureWebpack: {
		plugins: [
			// 支持 jquery
			new webpack.ProvidePlugin({
				$: "jquery",
				jQuery: "jquery",
				"windows.jQuery": "jquery"
			})
		],
	}
}复制

由于summernote我安装的也是默认高版本的，它有一个bug，需要我们手动改一下。要不然你可能会报错
错误信息：

 找不到模块：错误：[区分大小写路径插件] 与磁盘上的相应路径不匹配。C:\Users\[UserName]\[Something_Dir]\[MyProject]\node_modules\jQuery\dist\jquery.jsjquery复制

打开项目目录中node_modules\summernote\dist\summernote-lite.js和summernote.js
我已summernote.js为例
在这里插入图片描述

4、main.js文件你需要添加一下这些引入

 import 'bootstrap/dist/js/bootstrap.min.js'
import 'bootstrap/dist/css/bootstrap.css'
import 'font-awesome/css/font-awesome.css'
import 'summernote'
import 'summernote/dist/lang/summernote-zh-CN'
import 'summernote/dist/summernote.css'
import 'popper.js'复制

5、你可以使用命令vue ui打开视图化工具，安装一下插件（建议，不想安装也行）
在这里插入图片描述

6、代码（注意使用快捷键Shift+Alt+F美化一下代码）

 <template>
  <div id="editor_view">
    <div id="summernote2"></div>
 
    <el-button type="primary" size="mini" @click="getInputValue"
      >获取输入值</el-button
    >
  </div>
</template>
 
<script>
// 在当前页面导入jquery, 也可在全局导入
import $ from "jquery";
export default {
  data() {
    return {
      // 富文本编辑器输入的内容
      contant: "",
    };
  },
 
  // 在mounted生命周期调用
  mounted() {
    this.summernote();
  },
  methods: {
    // 引用summernote
 
    summernote() {
      $("#summernote2").summernote({
        toolbar: [
          ["style"],
          [
            "style",
            [
              "bold",
              "italic",
              "underline",
              "strikethrough",
              "superscript",
              "subscript",
              "clear",
            ],
          ],
          ["name", ["fontname"]],
          ["size", ["fontsize"]],
          ["color", ["color"]],
          ["para", ["ul", "ol", "paragraph", "height"]],
          ["table"],
          ["insert", ["link", "picture"]],
          ["options", ["undo", "redo", "fullscreen", "codeview", "help"]],
        ],
        focus: true,
        lang: "zh-CN",
        placeholder: "请输入内容",
        height: 500,
      });
    },
 
    getInputValue() {
      var that = this;
      // 获取summernote输入的值的方法 $('#summernote2').summernote('code')
      that.contant = $("#summernote2").summernote("code");
      console.log(that.contant);
    },
  },
};
</script>
 
<style scoped>
#editor_view >>> .btn {
  border-color: darkgrey;
}
#editor_view >>> .dropdown-toggle::after {
  display: none;
}
 
#editor_view >>> .note-toolbar {
  border-bottom: 1px solid darkgrey;
}
</style>复制

然后运行即可，看到富文本页面。
富文本上传保存图片，后续我会更新链接的

小知识

1、创建vuejs项目
找到想要安装项目的目录或者Windows+R 打开命令提示符、输入cmd
在这里插入图片描述

在这里插入图片描述

2、bootstrap@3；我为什么下载@3版本的，因为高版本会影响到
如果使用命令npm install bootstrap安装，那么就会装到最新版本的bootstrap，那么就会报错。
报错信息：

 Module not found: Error: Can't resolve '@popperjs/core'
复制

该原因是因为bootstrap5依赖Popper.js Core，而不是Popper.js，解决方法是安装Popper.js/core

 npm install @popperjs/core --save复制

如果是bootstrap4则需要popper.js

 npm install popper.js --save复制

3、关于eslint检查问题（选择package.json文件）

    "rules": {
      "no-undef": "off",
      "no-unused-vars": "off",
      "no-restricted-globals": "off"
    }
 
//可以先把eslint全关了，后续看自己选择了复制

如果感觉有用点个关注，一键三连吧！蟹蟹！！！

在这里插入图片描述

各位看官》创作不易，点个赞！！！
诸君共勉：万事开头难，只愿肯努力。

免责声明：本文章仅用于学习参考

详细搞懂vue2.0 3.0区别-summernote富文本使用

文章目录

背景

介绍

必备知识

实操安装

回退脚手架vue cli版本

vue-使用summernote富文本功能（不失效版）

小知识

探秘 | 原生ajax、jquery-ajax、axios与fetch的区别与优缺点

jQuery-从左到右、从右到左

jquery-table2excel，进行导出excel

前端基础（HTML、CSS、JS、jQuery）

JQuery异步加载表格选择记录

jQuery —— JavaScript 库

HTML中的jquery

「jQuery系列」jQuery Cookie插件功能介绍

JavaScript split() 方法详解

echarts map地图整体渐变色背景，选中地图后样式修改

前端哥

探秘 | 原生ajax、jquery-ajax、axios与fetch的区别与优缺点

jQuery-从左到右、从右到左

jquery-table2excel，进行导出excel

前端基础（HTML、CSS、JS、jQuery）

JQuery异步加载表格选择记录

jQuery —— JavaScript 库

HTML中的jquery

「jQuery系列」jQuery Cookie插件功能介绍

Supersized - Full Screen Background jQuery Slideshow Plugin

JavaScript split() 方法详解

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000

2
ECharts 饼状图颜色设置

2024-02-16 14:02:001000

3
echarts实现动态渲染多柱图

2024-02-12 14:02:341000

4
移动端css布局大全

2024-02-06 15:02:421000

5
使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000

6
JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000

7
echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999

8
jQuery事件处理

2024-03-12 01:03:32999

9
HTML5实现下拉列表的标签有哪些

2024-03-11 10:03:35999

10
成都工业学院Web技术基础（WEB）实验一：HTML5排版标签使用

2024-02-27 11:02:41999

	vue-cli卸载：
	npm uninstall vue-cli -g（3.0以下版本卸载）
	npm uninstall -g @vue/cli（3.0以上版本卸载）

	vue-cli安装：
	npm install -g @vue/cli （安装的是最新版）
	npm install vue-cli@2.9.6 （指定版本安装【指定版本为3.0以下版本】，其中2.9.6为版本号）
	npm install -g @vue/cli@3.11.0（指定版本安装【指定版本为3.0以上版本】，其中3.11.0为版本号）

	vue --version或者vue -V //查看版本信息Vue-cli

	npm list vue \|\| npm list vue -g //查看Vue版本

	import Vue from "vue";
	import App from './App.vue';
	import router from "./router";
	new Vue({
	router,
	render: h => h(App)
	}).$mount("#app");

	//Vue2 ->main.js 的配置

	import { createApp } from 'vue'
	import App from './App.vue'
	import router from './router'
	import './plugins/element.js'

	createApp(App).use(router).mount('#app')

	//Vue3 ->main.js 的配置

	import Vue from 'vue'
	import { Button } from 'element-ui'

	Vue.use(Button)

	//Vue2

	import { createApp } from 'vue'
	import { Button } from 'element-ui'

	createApp().use(Button)

	//Vue3

	module.exports = {
	publicPath: './', // 基本路径
	outputDir: 'dist', // 构建时的输出目录
	assetsDir: 'static', // 放置静态资源的目录
	indexPath: 'index.html', // html 的输出路径
	filenameHashing: true, // 文件名哈希值
	lintOnSave: false, // 是否在保存的时候使用 `eslint-loader` 进行检查。

	// 组件是如何被渲染到页面中的？（ast：抽象语法树；vDom：虚拟DOM）
	// template ---> ast ---> render ---> vDom ---> 真实的Dom ---> 页面
	// runtime-only：将template在打包的时候，就已经编译为render函数
	// runtime-compiler：在运行的时候才去编译template
	runtimeCompiler: false,

	transpileDependencies: [], // babel-loader 默认会跳过 node_modules 依赖。
	productionSourceMap: false, // 是否为生产环境构建生成 source map

	//调整内部的 webpack 配置
	configureWebpack: () => { },

	chainWebpack: () => { },

	// 配置 webpack-dev-server 行为。
	devServer: {
	open: true, // 编译后默认打开浏览器
	host: '0.0.0.0', // 域名
	port: 8080, // 端口
	https: false, // 是否https
	// 显示警告和错误
	overlay: {
	warnings: false,
	errors: true
	},
	}
	}

	npm list vue \|\| npm list vue -g //查看Vue版本

	node --version //查看node版本

	DONE Compiled successfully in 11178ms


	App running at:
	- Local: http://localhost:8080/
	- Network: unavailable

	Note that the development build is not optimized.
	To create a production build, run npm run build.

	events.js:292
	throw er; // Unhandled 'error' event
	^

	Error: spawn cmd ENOENT
	at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
	at onErrorNT (internal/child_process.js:465:16)
	at processTicksAndRejections (internal/process/task_queues.js:80:21)
	Emitted 'error' event on ChildProcess instance at:
	at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
	at onErrorNT (internal/child_process.js:465:16)
	at processTicksAndRejections (internal/process/task_queues.js:80:21) {
	errno: -4058,
	code: 'ENOENT',
	syscall: 'spawn cmd',
	path: 'cmd',
	spawnargs: [ '/c', 'start', '""', '/b', 'http://localhost:8080/' ]
	}
	npm ERR! code ELIFECYCLE
	npm ERR! errno 1
	npm ERR! app@0.1.0 serve: `vue-cli-service serve`
	npm ERR! Exit status 1
	npm ERR!
	npm ERR! Failed at the app@0.1.0 serve script.
	npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

	npm install --save jquery
	npm install bootstrap@3
	npm install --save codemirror
	npm install --save summernote
	npm install --save font-awesome
	npm install --save jquery popper.js

	//不要疑惑，vue.config.js就那么多东西，可以直接替代了
	const webpack = require('webpack')
	module.exports = {
	configureWebpack: {
	plugins: [
	// 支持 jquery
	new webpack.ProvidePlugin({
	$: "jquery",
	jQuery: "jquery",
	"windows.jQuery": "jquery"
	})
	],
	}
	}

	import 'bootstrap/dist/js/bootstrap.min.js'
	import 'bootstrap/dist/css/bootstrap.css'
	import 'font-awesome/css/font-awesome.css'
	import 'summernote'
	import 'summernote/dist/lang/summernote-zh-CN'
	import 'summernote/dist/summernote.css'
	import 'popper.js'

	<template>
	<div id="editor_view">
	<div id="summernote2"></div>

	<el-button type="primary" size="mini" @click="getInputValue"
	>获取输入值</el-button
	>
	</div>
	</template>

	<script>
	// 在当前页面导入jquery, 也可在全局导入
	import $ from "jquery";
	export default {
	data() {
	return {
	// 富文本编辑器输入的内容
	contant: "",
	};
	},

	// 在mounted生命周期调用
	mounted() {
	this.summernote();
	},
	methods: {
	// 引用summernote

	summernote() {
	$("#summernote2").summernote({
	toolbar: [
	["style"],
	[
	"style",
	[
	"bold",
	"italic",
	"underline",
	"strikethrough",
	"superscript",
	"subscript",
	"clear",
	],
	],
	["name", ["fontname"]],
	["size", ["fontsize"]],
	["color", ["color"]],
	["para", ["ul", "ol", "paragraph", "height"]],
	["table"],
	["insert", ["link", "picture"]],
	["options", ["undo", "redo", "fullscreen", "codeview", "help"]],
	],
	focus: true,
	lang: "zh-CN",
	placeholder: "请输入内容",
	height: 500,
	});
	},

	getInputValue() {
	var that = this;
	// 获取summernote输入的值的方法 $('#summernote2').summernote('code')
	that.contant = $("#summernote2").summernote("code");
	console.log(that.contant);
	},
	},
	};
	</script>

	<style scoped>
	#editor_view >>> .btn {
	border-color: darkgrey;
	}
	#editor_view >>> .dropdown-toggle::after {
	display: none;
	}

	#editor_view >>> .note-toolbar {
	border-bottom: 1px solid darkgrey;
	}
	</style>

	"rules": {
	"no-undef": "off",
	"no-unused-vars": "off",
	"no-restricted-globals": "off"
	}

	//可以先把eslint全关了，后续看自己选择了

详细搞懂vue2.0 3.0区别-summernote富文本使用

文章目录

背景

介绍

必备知识

实操安装

回退脚手架vue cli版本

vue-使用summernote富文本功能（不失效版）

小知识

微信扫一扫：分享