开发工具--VUE安装

最新推荐文章于 2024-04-12 11:11:55 发布
最新推荐文章于 2024-04-12 11:11:55 发布
阅读量469 收藏 2
点赞数 1
分类专栏： 开发工具 文章标签： vue nodejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53244569/article/details/119887637
版权

文章目录

一.下载node.js

1.1官网下载:https://nodejs.org/zh-cn/

在这里插入图片描述

1.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

等待安装完成之后即可.

8.报错说明

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

二.初始化VUE项目

2.1 初始化UI工程

在这里插入图片描述

2.2 选择VUE 创建项目

在这里插入图片描述

2.3 选择项目

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

2.4 选择功能

在这里插入图片描述

在这里插入图片描述

选择ESLint+ StandardConfig
在这里插入图片描述
项目创建之后效果
在这里插入图片描述

三. 初始化项目

3.1 安装插件

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

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

在这里插入图片描述

3.2 安装axios依赖

1).点击依赖项

在这里插入图片描述

2).安装运行依赖

在这里插入图片描述

3.3 添加依赖项

1.问题描述

在这里插入图片描述

2 安装开发依赖 less-loader

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

3安装开发依赖 less

在这里插入图片描述

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

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

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

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

3.4 关闭ESLint校验

在这里插入图片描述

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 } */)
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.6VUE中环境配置

1.在根目录中创建文件 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.7VUE项目打包

方式有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.8VUE项目优化

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

  }
}
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 CDN网址

网址: http://www.staticfile.org/
在这里插入图片描述

4 优化后的结果

在这里插入图片描述

3.9 实现路由懒加载

1 添加插件包

插件名称: babel/plugin-syntax-dynamic-import
在这里插入图片描述

2.添加JS文件

文件名称: @babel/plugin-syntax-dynamic-import
在这里插入图片描述

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')
望山。
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
使用vue开发移动端管理后台
ZJW222的博客
03-07 3294
独立完成一个移动端项目(不是很明白为何会有这样的商品管理后台)，还是有些经验不足，包括对产品的全局思考，对插件的选择等，都有考虑不周的缺点，导致自己中途想换图形界面插件，浪费了点时间，这里记录下，总结下经验，理一下思路。 1.对于项目的一些心得与体会 首先的一点，就是，对于图形界面框架的选型，这个很重要，对于一项目来说，开始动手前就要对项目的设计图有个完整的了解，以便于自己选择插件或者框架； ...
vite-plugin-vue-i18n:Vue I18n的快速插件
04-09
Intlify Project是一个开源项目，其中包括Vue I18n和i18n工具和自由软件，其持续的开发完全依靠赞助商的支持。 如果您想成为赞助商，请考虑： :1st_place_medal: 金牌赞助商 :2nd_place_medal: 银牌赞助商 :3rd_...
如何在浏览器中安装并使用vue开发者工具
孤狼B组喵儿的博客
02-09 2103
使用vue你肯定需要一个开发者工具，当然浏览器有自带的开发者工具，你想专业的vue开发工具可能更有助于编程学习，也更直观一点。废话不多讲，下面我就将我在安装和使用vue开发者工具走的一些弯路和困惑分享给大家。
学习笔记|Vue入门笔记—Vue安装详细教程
Jum的博客
03-14 8878
1. 创建项目（最好在cd到D盘、E盘的某个位置，即项目的路径，否则项目会新建在C:\Users\用户名\，也可以直接在想要的项目路径下输入cmd）可能会出现权限问题，所以我们还是以管理员运行。4、然后安装到这一步的时候有五组选项，就是安装的时候会安装一些组件和npm，同时会添加环境变量，具体点击每一个的时候右侧有说明。其中-g是全局安装，指安装到global全局目录去，如果不加-g，模块就会安装到当前路径下的node_modules文件夹下，没有目录则自动创建。选择【Next】，然后继续下一步。
Vue3-devtools开发者工具制作与安装
最新发布
2301_81591899的博客
04-12 1016
学习Vue3自然离不开调试工具Vue3-Devtools，所以我们需要来下载这个调试工具并放入谷歌浏览器里的扩展程序里面。帮助我们更好的调试vue3里的程序。
【CSDN软件工程师能力认证学习精选】vue.js 三种方式安装(vue-cli)
CSDN高校俱乐部官方博客
02-26 2114
CSDN软件工程师能力认证（以下简称C系列认证）是由中国软件开发者网CSDN制定并推出的一个能力认证标准。C系列认证历经近一年的实际线下调研、考察、迭代、测试，并梳理出软件工程师开发过程中所需的各项技术技能，结合企业招聘需求和人才应聘痛点，基于公开、透明、公正的原则，甑别人才时确保真实业务场景、全部上机实操、所有过程留痕、存档不可篡改。 我们每天将都会精选CSDN站内技术文章供大家学习，帮助大家系统化学习IT技术。 Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web .
vue安装详细步骤
qq_42680327的博客
10-11 5916
vue安装详细步骤
Node.js-electronelectron-vue代理工具抓包工具网络功能工具anyproxy
08-10
electron electron-vue 代理工具 抓包工具 网络功能工具 anyproxy
vue-devtools/vue调试工具/vue开发工具
04-09
拖动文件到浏览器安装即可
vue开发调试工具--vuejs-deltools
06-27
vue开发调试工具--vuejs-deltools
vue-audio-visual-Vue HTML5音频可视化组件。-Vue.js开发
05-27
vue视听Vue HTML5音频可视化组件概述安装和设置API通用道具AvLine道具AvBars道具AvCircle道具AvWavef vue视听Vue HTML5音频可视化组件概述安装和设置API常用道具AvLine道具AvBars道具AvCircle道具AvWaveform道具...
Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）
热门推荐
逆境清醒的博客
03-19 5万+
Vue3安装配置、开发环境搭建（图文详细），一、vue的主要安装方式，二、node.js安装和配置，三、npm 安装vue 和脚手架、webpack模板，四、打开Vue 项目管理器，五、创建运行 vue 3 项目，六、使用TypeScript进行开发 Vue3 的代码，七、vue及组件的卸载，八、vue项目结构，九、Vue 安装过程中遇到的问题记录
Vue Dev Tools安装
m0_37846059的博客
01-11 591
打开chrome浏览器，输入chrome://extentions/进入扩展程序，打开开发者工具。cd到vue devtool的下载解压目录，然后用cnpm install安装。路径要改成根据实际情况生成的目录，我生成的目录都在src下，不是在build下。下载后解压，然后将解压后的crx文件直接加入到chrome的扩展程序中直接安装。打开开发者工具可以看到vue页签，在这个页签中可以进行调试。cnpm安装成功，则可以直接安装vue devtool。但是通过这种方式安装的vue图标不亮，不能使用。
超级详细的Vue安装与配置教程
dd2016124的博客
10-26 2万+
vue安装，npm，node的安装与配置
Vue前端树形控件展开关闭
m0_46608027的博客
11-09 631
【代码】Vue前端树形控件展开关闭。
windows下载安装Vue开发者工具(VueDevtools)，同时支持vue2.0和vue3.0两个版本
见证自己学习,成长的记录
10-28 6485
vue开发者工具可以帮助我们提高开发效率，如果不安装控制台老是现在这些东西，对我这种强迫症患者来说痛苦至极,下面我就介绍下我的安装步骤。
Vue开发者工具 安装
Wxin0721的博客
05-05 1185
安装地址：Installation | Vue Devtools
Vue常用的组件库大全【前端工程师必备】
weixin_47615289的博客
01-07 2542
中文文档：https://dafrok.github.io/vue-baidu-map/#/zh/start/installation。原文链接：https://blog.csdn.net/qq_44757034/article/details/128090797。在线预览：https://dafrok.github.io/vue-baidu-map/#/zh/guide/painting。🔸一套基于 Vue.js 的高质量UI 组件库 https://www.iviewui.com/
深入理解Vue的插件机制与install
youshenshiwoye的博客
06-30 986
前言 我们在使用Vue的时候，经常会使用并写一些自定义的插件，然后利用Vue.use引入。所以提到写插件，install这个方法是必不可少的。Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。这是Vue官方对Vue插件的规范。那这install函数到底是什么东东呢，Vue内部到底用它做了什么处理，怎么调用的，今天我就给大家伙从源码层面把他整的明明白白。 看完这篇文章，你将学到： install函数可以做些什么； install内部
antd-mobile-vue
07-15
antd-mobile-vue是一个基于Vue.js框架的移动端组件库，它提供了一系列UI组件，用于开发高质量的移动端应用。 与其它UI组件库相比，antd-mobile-vue具有以下优势和特点： 1. 高质量的组件：antd-mobile-vue提供了...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

望山。

谢谢您的打赏！！！

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

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

打赏作者

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

抵扣说明：

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

余额充值