详细搞懂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全关了，后续看自己选择了

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

在这里插入图片描述

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

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