VUE前端管理插件安装

最新推荐文章于 2024-08-06 09:23:05 发布
最新推荐文章于 2024-08-06 09:23:05 发布
阅读量362 收藏
点赞数
分类专栏： 开发工具 文章标签： vue.js 后端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44591613/article/details/121778076
版权

目录

1.下载node.js

2 报错说明

2 初始化VUE项目

2.1 初始化UI工程

2.2 选择VUE 创建项目

2.3 选择项目

2.4选择功能

3 初始化项目

3.1 安装插件

3.2 安装axios依赖

3.3 添加依赖项

3.3.1 问题描述

3.3.2 安装开发依赖 less-loader

3.3.3安装开发依赖 less

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

3.4.0 关闭ESLint校验

3.4.1 添加依赖方式

 3.4.2 添加html 实现页面展现

3.5 安装运行依赖 echars插件

3.6 VUE中环境配置

3.7 VUE项目打包

3.8 VUE项目优化

3.8.1 编辑生产环境配置

 3.8.2 引入CDN配置

3.8.3 CDN网址

3.8.4 优化后的结果

3.9 实现路由懒加载

3.9.1 添加插件包

3.9.2 添加JS文件

3.9.3 配置路由懒加载

1.下载node.js

1).官网下载
在这里插入图片描述
如果是window7系统: 下载安装13的版本 URL: https://nodejs.org/dist/latest-v13.x/
在这里插入图片描述

2).安装node.js
之后一路下一步安装即可.
在这里插入图片描述
3).检查node js版本
在这里插入图片描述
4).检查NPM版本号
在这里插入图片描述

 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

等待安装完成之后即可.

2 报错说明

1).如果报错如下
在这里插入图片描述

 方案1) .删除用户目录下的文件,之后重新安装. (删除文件 不要删除目录)
在这里插入图片描述
方案2): 执行卸载命令 npm uninstall -g @vue/cli 之后重新安装

2 初始化VUE项目





2.1 初始化UI工程

执行命令：vue ui

在这里插入图片描述





2.2 选择VUE 创建项目

在这里插入图片描述

2.3 选择项目

在这里插入图片描述
选择:手动

在这里插入图片描述

2.4选择功能

在这里插入图片描述
在这里插入图片描述

选择ESLint+ StandardConfig
在这里插入图片描述

项目创建之后效果

在这里插入图片描述

3 初始化项目





3.1 安装插件

选择如图所示的插件进行安装
在这里插入图片描述

1).安装成功之后会提示配置插件 选择手动导入
在这里插入图片描述





3.2 安装axios依赖

1).点击依赖项
在这里插入图片描述

2).安装运行依赖
在这里插入图片描述





3.3 添加依赖项





3.3.1 问题描述

在这里插入图片描述





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

在这里插入图片描述

  1. 2.方式2 通过命令安装
    命令: npm install vue-quill-editor --save
    在这里插入图片描述

安装之后的效果:
在这里插入图片描述

3.4.0 关闭ESLint校验

在这里插入图片描述





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.5 安装运行依赖 echars插件

在这里插入图片描述

<template>
  <div>
    <!-- 定义卡片视图 -->
    <el-card>
      <el-row>
        <el-col><h1>数据统计</h1></el-col>
      </el-row>

     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
     <div id="main" style="width: 100%;height:600px;"></div>

    </el-card>

  </div>
</template>

<script>
  /* 导入echarts组件 */
  import * as echarts from 'echarts';


  export default {
    data() {
      return {

      }
    },
    created(){

    },
    //当页面dom对象初始化之后执行
    mounted(){
      var myChart = echarts.init(document.getElementById('main'));
      // 指定图表的配置项和数据
      var option = {
          title: {
              text: 'ECharts 入门示例'
          },
          tooltip: {},
          legend: {
              data:['销量']
          },
          xAxis: {
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
          },
          yAxis: {},
          series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
          }]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    methods: {

    }
  }
</script>

<style lang="less" scoped>
</style>

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: 编辑app.js 

const express = require('express')

const app = express()

app.use(express.static('./dist'))
app.listen(8090, () => {
	console.log("服务启动localhost:8090")
})

启动命令:
在这里插入图片描述
访问测试:
在这里插入图片描述





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.8.4 优化后的结果

在这里插入图片描述





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')

#空城
关注
专栏目录
Vue3-devtools开发者工具正确安装方法
Zhang_wang_yun的博客
05-30 1万+
学习Vue3自然离不开调试工具Vue3-Devtools，所以我们需要来下载这个调试工具并放入谷歌浏览器里的扩展程序里面。帮助我们更好的调试vue3里的程序。
vue前端截图插件electron的
02-05
Vue前端截图插件的实现通常包括以下步骤： 1. **安装Electron**: 首先，你需要在项目中安装 Electron。如果你还没有创建 Electron 应用，可以使用`electron-init`或`electron-forge`等工具初始化项目。在已有的Vue...
VUE后端管理插件安装
热门推荐
qq_16804847的博客
05-10 5万+
1.下载node.js 1).官网下载 2).安装node.js 之后一路下一步安装即可. 3).检查node js版本 4).检查NPM版本号 5).切换淘宝NPM库 npm install -g cnpm --registry=https://registry.npm.taobao.org 6).检查镜像配置是否生效 npm config list 7).安装vue-cli cnpm install -g vue-cli ...
vue一些常用的控件
最新发布
weixin_58885580的博客
08-06 295
Vue.js是一个流行的前端JavaScript框架，常用于开发单页应用（SPA）。在Vue中，控件通常指的是组件（Component），组件是Vue的基本构建块，用于封装可重用的代码。
Vue-开发工具的安装
weixin_33804990的博客
11-23 149
1. github官网下载vue工具：https://github.com/vuejs/vue-devtools。并解压 2. 在有package.json的文件夹下，按住shift右键，选择“在此处打开CLI” 执行 cnpm i （没装镜像用 npm i） 3.node_modules安装完毕后，在命令行输入 cnpm run bu...
Vue开发者工具 安装
Wxin0721的博客
05-05 1211
安装地址：Installation | Vue Devtools
Vue -- 搭建Vue环境 & 安装Vue开发者工具
天行健 君子以自强不息，地势坤 君子以厚德载物。
09-11 661
1. 搭建Vue环境 1.1 引入Vue Vue官网 VueDemo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,
前端vue浏览器插件vue-devtools，前端vue开发
04-10
在前端开发过程中，Vue DevTools 是一个不可或缺的工具，它是Chrome浏览器的一个扩展，专门用于调试Vue.js应用。 Vue Devtools 提供了丰富的功能，帮助开发者深入理解Vue应用的运行机制。以下是Vue Devtools的一些...
vue wps插件引入到前端项目js
06-30
Vue.js 是一款流行的前端JavaScript框架，它以组件化开发、易用性和高性能著称。WPS，全称为“Web Processing Service”，通常是一个用于处理地理空间数据的服务，但在本场景中，可能指的是金山WPS办公软件的Web版...
vue前端表单插件支持栅格和tab 嵌套布局，支持表格定义，适应于做动态数据模型管理
06-24
Vue前端表单插件是开发Web应用时常用的一种工具，尤其在处理动态数据模型管理和用户交互时显得尤为重要。本文将详细介绍这款支持栅格和Tab嵌套布局、表格定义的Vue表单插件，以及它如何适应动态数据模型管理场景。 ...
VUE 配置vue-devtools调试工具及安装方法
10-17
vue-devtools是一款基于chrome浏览器的插件，用于vue应用的调试，这款vue调试神器可以极大地提高我们的调试效率。帮助我们快速的调试开发vue应用。这篇文章主要介绍了VUE 配置vue-devtools调试工具及安装步骤 ,需要的朋友可以参考下
vue开发工具
01-10
vue开发工具
Vue安装浏览器开发工具的步骤详解
11-29
开发vue时，浏览器有一个好的开发调试工具能让开发事半功倍，磨刀不误砍柴工。 步骤 1.下载工具 地址：  https://github.com/vuejs/vue-devtools  2.安装依赖 cmd进入vue-devtools文件夹，安装相关依赖，依次执行npm install,再执行npm run build。 3.修改配置 打开shells>chrome>src>manifest.json，修改”persistent”:false为true。 4.浏览器安装 经过前面几步，工具基本已经准备好了。接下来，打开浏览器。 · 打开里面的设置>点击拓展程序>点击开发者模式 · 再点击加载
Vue 安装开发者工具
xiaowude_boke的博客
08-14 1558
Vue 安装开发者工具
vue安装开发者工具
七十多岁的人了、
11-09 1012
vue3安装开发者工具
VUE---安装开发者调试工具（Vue.js Devtools）
sinat_34896766的博客
01-09 986
a、在极简插件页面选择Vue.js.devtools，选择获取。d、点击详细信息，勾选允许访问文件URL。c、在扩展中查看，有如下则表示安装成功。打开一个vue页面，在开发者工具中，有如下tab页签，即代表安装成功。下载 → 开发者模式 → 拖拽安装 → 插件详情允许访问文件。2、edge浏览器：下载。→添加→插件详情允许访问文件。
Vue的开发者调试工具（devtools5.3.4）安装
weixin_45204443的博客
04-15 4916
1.下载Vue的开发者工具 链接：https://pan.baidu.com/s/17u8tWbdHkwdp-53umieNlw 提取码：zlss （如果过期了，请评论区说一下） 2.安装开发者工具（Chrome和Egde浏览器） （1）在Chrome浏览器安装的方式： ①点击浏览器右上角三个点 ②点击更多工具--->点击扩展程序 ...
vue 后台标签插件_Vue的全球站点标签插件
cuk5340的博客
07-31 841
vue 后台标签插件 Vue标签 (vue-gtag) The global site tag (gtag.js) is a JavaScript tagging framework and API that allows you to send event data to Google Analytics, Google Ads, and Google Marketing Platform. ...
Vue.js前端权限管理实践与解析
本文档“基于Vue前端权限管理”深入探讨了如何在Vue项目中实施权限控制，确保用户只能访问他们被授权的功能和数据。 首先，Vue的组件化特性使得权限管理变得模块化和易于管理。每个组件可以有自己的权限检查逻辑，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

#空城

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值