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

朱雀 2024-03-29 15:05 76阅读 0赞

#### 文章目录 ####

*   *  背景
     *  介绍
     *  必备知识
     *  实操安装
     *  回退脚手架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安装-使用可视化管理工具][Vue_-]

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

### 实操安装 ###

**①node.js需要安装什么版本，如何选择？**  
  我安装的是版本V14.17.0；我认为它是很稳定的，你可以任意选择其他版本。这个并不是很影响（作为参考）  
附带安装node全部版本，官网下载地址：[https://nodejs.org/dist/][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’)。  
![在这里插入图片描述][333a5b58193b4053a4eb2b66b64b8f55.png_pic_center]

解释说法最多的是，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**  
![在这里插入图片描述][4fc74ccc2579404c93c939bc9d78383a.png_pic_center]

**查看版本信息**

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

![在这里插入图片描述][0725fc8ba59f4c538a998f0bc40b93b2.png_pic_center]

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

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

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

**解决方法**

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

![在这里插入图片描述][1bf4b3b8b46a423996b639ef9a71e720.png_pic_center]

**问题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/][https_summernote.org]  
先看一下效果图  
![在这里插入图片描述][684fa66e50024827a3575513a89c20bd.png_pic_center]

我这边以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为例  
![在这里插入图片描述][88d070ef3a4f456684c7c93268b40f76.png_pic_center]

**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打开视图化工具，安装一下插件（建议，不想安装也行）**  
![在这里插入图片描述][7d55b0734c7f437e96617a5886ce8912.png_pic_center]

**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**  
![在这里插入图片描述][4919951566c6487587638a62d26f842d.png_pic_center]  
![在这里插入图片描述][e071103cbbf64be2a8971bed0a04bbbc.png_pic_center]

![在这里插入图片描述][521c1d4e4e714378b73cdb2673b06a8c.png_pic_center]

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

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

![在这里插入图片描述][c3549adeeb8a4827bcf1f88d772a6ee0.jpeg_pic_center]

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

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

[Vue_-]: https://blog.csdn.net/SoulNone/article/details/126445428
[https_nodejs.org_dist]: https://nodejs.org/dist/
[properties]: https://so.csdn.net/so/search?q=properties&spm=1001.2101.3001.7020
[333a5b58193b4053a4eb2b66b64b8f55.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/f7f9a056be0b4742a4845d6d34158937.png
[4fc74ccc2579404c93c939bc9d78383a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/9073ff423af141bb9faac3b04958ef03.png
[0725fc8ba59f4c538a998f0bc40b93b2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/76ef323079f1449cadbceeceeda60523.png
[vue]: https://so.csdn.net/so/search?q=vue&spm=1001.2101.3001.7020
[1bf4b3b8b46a423996b639ef9a71e720.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/7b4ea435e3ee48e2987f5a9cf5ba75db.png
[https_summernote.org]: https://summernote.org/
[684fa66e50024827a3575513a89c20bd.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/a51e81aa934748f6a1409ba1692aa352.png
[88d070ef3a4f456684c7c93268b40f76.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/8569d8b839224c70afff2b06a5c1aa5b.png
[7d55b0734c7f437e96617a5886ce8912.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/c1cff085223e49c7964d398cba68fb4b.png
[4919951566c6487587638a62d26f842d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/c5b75154ff6b469fb21b0e1280350b51.png
[e071103cbbf64be2a8971bed0a04bbbc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/697b57f38e534aa8bc9ec53bfb9599ef.png
[521c1d4e4e714378b73cdb2673b06a8c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/f8f785a65b4b4b67ad668c4e5dcaa414.png
[c3549adeeb8a4827bcf1f88d772a6ee0.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/04c4bbee8d9f45c5b56becc2f1ccbcb8.png