VUE后端管理插件安装

最新推荐文章于 2024-05-07 01:35:19 发布
最新推荐文章于 2024-05-07 01:35:19 发布
阅读量84 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53795576/article/details/119516205
版权

1.下载node.js

1).官网下载（14以上）

win7下载13

2).安装node.js
之后一路下一步安装即可.

3).检查node js版本    node -v

4).检查NPM版本号     npm -v

5).切换淘宝NPM库
      1).npm install -g cnpm --registry=https://registry.npm.taobao.org
方式2:
      2).npm config set registry https://registry.npm.taobao.org (建议使用第二种)
6).检查镜像配置是否生效 npm config list

7).安装VUE和客户端
命令: npm install -g @vue/cli --force      等待安装完成之后即可.

    附：如果报错

方案1) .删除用户目录下的文件,之后重新安装. (删除文件 不要删除目录)

方案2): 执行卸载命令 npm uninstall -g @vue/cli 之后重新安装

2 初始化VUE项目

2.1 初始化UI工程

在这里插入图片描述

 2.2 选择VUE 创建项目

 2.3 选择项目(如果报错切换到项目目录执行cmd)

在这里插入图片描述

选择：手动 

在这里插入图片描述

2.4选择功能 

 

选择ESLint+ StandardConfig

在这里插入图片描述

3 初始化项目

3.1 安装插件

选择如图所示的插件进行安装

 在这里插入图片描述

1).安装成功之后会提示配置插件 选择手动导入

在这里插入图片描述

 3.2 安装axios依赖

1).点击依赖项

   在这里插入图片描述

2).安装运行依赖

在这里插入图片描述 关闭代码质量校验

3.3.2 安装开发依赖 less-loader

安装开发依赖 less-loader
npm install less-loader@5.0.0 版本太高不适用
在VUE项目的根目录启动执行安装命令

3.3.3安装开发依赖 less

3.4 安装运行时依赖 富文本编辑器

  1. 通过客户端的方式安装
    有时候可能比较慢,所以需要提前安装
    源码网址: https://github.com/surmon-china/vue-quill-editor#readme
    组件名称: vue-quill-editor
  2. 方式2 通过命令安装
    命令: npm install vue-quill-editor --save在这里插入图片描述

 3.4.0 关闭ESLint校验

在这里插入图片描述

 

3.5 安装运行依赖 echars插件

在这里插入图片描述

 

3.4.1 添加依赖方式

在main.js中添加该操作

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme

Vue.use(VueQuillEditor, /* { default global options } */)

3.4.2 添加html 实现页面展现

<el-tab-pane label="商品详情" name="4">
            <!-- 定义富文本编辑器-->
            <quill-editor ref="myQuillEditor" v-model="addItemForm.itemDesc" />

          </el-tab-pane>

 效果展现

在这里插入图片描述

 设置富文本编辑器宽度

在这里插入图片描述

 

3.6 VUE中环境配置

在根目录中创建文件 vue.config.js 文件

在这里插入图片描述

2.添加环境配置

module.exports = {
  //配置项目开发时 是否使用esLint 进行校验. 学习时配置为false 为了高效的学习,开发时配置为true 力求专业
  lintOnSave: false,

  //实现多环境配置
  chainWebpack: config => {

    //定义生产环境的配置
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')
    })

    //定义开发环境的配置
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })

  }
}

 

3.7 VUE项目打包

方式有2种, 方式1: 通过express插件将项目打包
命令: 1. npm init -y

命令2: npm i express -S

3.8 VUE项目优化

3.8.1 编辑生产环境配置

module.exports = {
  //配置项目开发时 是否使用esLint 进行校验. 学习时配置为false 为了高效的学习,开发时配置为true 力求专业
  lintOnSave: false,

  //实现多环境配置
  chainWebpack: config => {

    //定义生产环境的配置
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')

      //通过externals 加载外部CDN资源 被修饰的包不会被添加
      config.set('externals',{
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios:  'axios',
        'vue-quill-editor': 'VueQuillEditor',
         echarts:  'echarts'

      })
    })

    //定义开发环境的配置
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })

  }
}

3.8.2 引入CDN配置


<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
		
		
		<!-- 引入样式表 -->
		<link href="https://cdn.staticfile.org/quill/1.3.6/quill.bubble.min.css" rel="stylesheet">
		<link href="https://cdn.staticfile.org/quill/1.3.6/quill.core.min.css" rel="stylesheet">
		<link href="https://cdn.staticfile.org/quill/1.3.6/quill.snow.min.css" rel="stylesheet">
		<link href="https://cdn.staticfile.org/element-ui/2.15.1/theme-chalk/index.min.css" rel="stylesheet">
		
		
		<!-- 引入其他JS -->
		<script src="https://cdn.staticfile.org/quill/1.3.6/quill.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>
		<script src="https://cdn.staticfile.org/vue/2.6.9/vue.min.js"></script>
		<script src="https://cdn.staticfile.org/vue-router/3.5.1/vue-router.min.js"></script>
		<script src="https://cdn.staticfile.org/axios/0.21.1/axios.min.js"></script>
		<script src="https://cdn.staticfile.org/echarts/5.1.0/echarts.min.js"></script>
		<script src="https://cdn.staticfile.org/element-ui/2.15.1/index.min.js"></script>
		
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

3.8.3 CDN网址

网址: http://www.staticfile.org/

3.9 实现路由懒加载

3.9.1 添加插件包

插件名称: babel/plugin-syntax-dynamic-import

在这里插入图片描述

 

3.9.2 添加JS文件

文件名称: @babel/plugin-syntax-dynamic-import

在这里插入图片描述

 

3.9.3 配置路由懒加载

官网地址: https://router.vuejs.org/zh/guide/advanced/lazy-loading.html
语法结构:

在这里插入图片描述

 

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

寒江巭影
关注
Vue+element搭建后台管理系统-二、安装插件
pythonxxoo的博客
04-15 499
Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.csdn.net/m0_56069948/article/details/122285941 我们继续上一章的内容，上一章讲到我们已经能将项目成功跑起来了，那么我们接下来把项目必用的东西完善一下。 一、安装elementUI 终于到了我们的男二了，继续在VSCode中新建一个终端，然后通过这个命
vue后端管理系统-基于IVIEW实现的VUE后端管理系统.zip
04-04
Vue 后端管理系统是现代 Web 开发中常见的一种架构，它允许开发者构建高效、可维护的后台管理界面。本项目是基于 Vue.js 框架和 iView UI 组件库实现的一个实例，提供了完整的前端解决方案，帮助开发者快速搭建功能...
babel-plugin-syntax-dynamic-import
热门推荐
路漫漫其修远兮~
07-02 2万+
作用：用以解析识别import()动态导入语法---并非转换，而是解析识别 安装： npm install babel-plugin-syntax-dynamic-import 使用：.babelrc { "plugins": ["syntax-dynamic-import"] } ...
syntax-dynamic-import插件实现懒加载
baidu_41601048的博客
02-08 8379
syntax-dynamic-import实现懒加载 1 npm install --save-dev @babel/plugin-syntax-dynamic-import 2 在根目录新建一个babel.config.js文件 （注意：本实例采用vuecli3） module.exports = { "presets": [ "@vue/app" ], "plugins": [...
2024年前端最新vue框架 做后台管理系统的总结（WZ）_vue后端管理系统实训报告，在线培训前端开发
java_dazhuzhu的博客
05-07 779
我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
管理系统系列--vue后端管理系统界面 基于ui组件iview.zip
02-25
【标题】"管理系统系列--vue后端管理系统界面 基于ui组件iview.zip" 提供的是一个基于Vue.js框架的后端管理系统的界面实现，它利用了流行的UI组件库iView。Vue.js是一个轻量级、高性能的前端JavaScript框架，广泛...
WarehouseManager仓库管理系统 前端代码VUE 后端代码JAVA毕设好资料
12-31
WarehouseManager仓库管理系统 前端代码VUE 后端代码SpringBoot JAVA 毕设好资料 SpringBoot + Vue的仓库管理系统 系统分为超级管理员、仓库管理员和普通用户三种角色，为不同角色的用户提供不同的功能和权限。超级...
校园信息发布系统 vue前端 后端java 一套完整
10-20
同时，Vue的插件生态系统丰富，如Vuex用于状态管理，Vue Router用于路由控制，都为系统的功能扩展提供了便利。 Java后端作为系统的业务处理层，通常选用Spring Boot框架，它简化了Java应用的搭建和配置过程。Spring...
Vue调用后端java接口的实例代码
10-16
在Vue项目中，我们通常需要先安装axios库，然后在Vue实例的`mounted`钩子函数中调用后端接口，并根据返回的结果来更新视图或者进行其他逻辑处理。 - **vue-resource**：是Vue的一个插件，提供了一种在Vue组件中发起...
【CSS Tricks】像素风字体、图片
09-17
包含像素风中英文字体，鼠标手势普通状态、点击状态和禁用状态，仅用作技术分享学习研究，不可用于其他用途。
卡瓦牙椅E50life中文使用说明书第一部分.pdf
09-17
卡瓦牙椅E50life中文使用说明书第一部分.pdf
ChromiumSetup.exe
09-17
ChromiumSetup.exe
Chain of thought 链式思考赋能Transformer模型解决串行计算难题
09-17
Chain of thought（CoT）使Transformer能够执行串行计算，扩展了它们解决问题的能力，超越了仅限并行的局限性。 增强Transformer的表达能力，特别是对于本质上是顺序问题。 原始问题: 大型语言模型（LLMs）在生成最终答案之前生成中间步骤（连续思考，CoT）时，展现出异常的推理能力。CoT有效性背后的机制尚不清楚，尤其是在zero shot和错误推理场景中。   本文的关键见解: • 在没有CoT的情况下，具有有限精度和多项式(n)嵌入大小的恒定深度Transformer只能解决AC0中的问题 • 通过T步骤的CoT，使用恒定位精度和O(log n)嵌入大小的恒定深度Transformer可以解决任何由大小为T的布尔电路可解决的问题 • CoT大幅提高了低深度Transformer在本质上是串行问题上的准确性   本文的解决方案: • 为通过如下特性解决问题的恒定深度Transformer定义了新的复杂性类CoT[T(n), d(n), s(n), e(n)]： T(n) CoT步骤 d(n) 嵌入大小 s(n) 精度位 e(n) 指数位
7a3b55460m422ea155d8f9aaa897e1dc(1).jsp
09-17
7a3b55460m422ea155d8f9aaa897e1dc(1).jsp
R 语言在统计计算与图形分析领域的应用
09-17
内容概要：本文对 R 语言做了详细介绍，包括其起源发展、特性亮点、安装指南、常用功能及其应用领域等内容。同时，文中也提供了简单的入门级代码样例帮助理解 R 基础语法规则，让没有接触过这门语言的人可以快速上手掌握基础操作。 适合人群：对统计学有研究兴趣的学生和工作者以及希望提升数据处理效率的研究人员等。尤其适合初学者或者是正在寻找一款优秀的数据分析解决方案的专业人士。 使用场景及目标：适用于各类数据清理整合与深度剖析挖掘的任务，特别适宜用于统计模型构建测试或金融市场量化预测模型构造等方面的工作。 其他信息：R拥有活跃的技术交流氛围和社会生态网络，能够帮助用户解决问题、分享经验成果并促进个人技术能力成长进阶；而R强大的图形界面也极大地提升了代码开发便捷度与体验感。
bashjumper是一个基于linux_bash的命令行下的超轻量跳板机。_bashjumper.zip
最新发布
09-17
bashjumper是一个基于linux_bash的命令行下的超轻量跳板机。_bashjumper
吉他谱_Supermassive Black Hole - Muse.pdf
09-17
初级入门吉他谱 guitar tab
吉他谱_Show Me How To Live - Audioslave.pdf
09-17
初级入门吉他谱 guitar tab
分片上传前端vue后端java
05-01
在前端Vue框架中，可以使用插件或组件实现分片上传功能，例如Element-UI或Vue-Upload-Component。而在后端Java中，可以使用SpringBoot或SpringMVC进行文件上传处理，同时结合使用阿里云、七牛云等云存储服务提高上传...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值