Vue初识别--环境搭建--前置配置过程

问题一: 在浏览器上的扩展程序上添加了vue-devtools后不生效:

解决方式:打开刚加入的扩展工具Vue.js devtools的允许访问文件地址设置

问题二:Vue新建一个项目

创建一个空文件夹hrsone,然后在VSCode中打开这个空文件夹

 打开端口新建终端:按顺序输入以下命令

1、全局安装vue-cli,vue-cli可以帮助我们快速构建Vue项目

npm install -g vue-cli
 

2、安装webpack,它是打包js的工具、

npm install -g webpack
 

3、在VS Code菜单:终端-新建终端,并创建项目命令

vue init webpack hrs

接着会出现一些配置项,可以根据需要配置,也可以默认,直接按回车。

然后继续等待安装依赖项。完成之后,一个基本的 vue项目就搭建完了。完成之后的vscode左边可以看到如下目录,

其中main.js就是入口。

4、运行项目

先cd到项目文件夹,cd hrsone,然后输入以下指令:

npm run dev

然后就开始报错了

报错一:

vue : 无法加载文件 D:\vue\node_global\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.micr osoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。 所在位置 行:1 字符: 1

解决方式:

首先在终端中执行命令:get-ExecutionPolicy,显示执行策略为:Restricted,表示脚本被禁止。
set-ExecutionPolicy RemoteSigned:设置执行策略为RemoteSigned。
然后我们再执行get-ExecutionPolicy
显示RemoteSigned,即表示可以正常执行脚本命令了。
 

报错二:

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js  'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序

解决方式:

先运行 npm install 然后npm run build,最后运行npm run dev后项目成功运行。

报错三:

Current existing ChromeDriver binary is unavailable, proceding with download and extraction.

解决方式:

安装下国内镜像:npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

再运行 npm install 就可以把相关依赖装上了

然后在运行 npm run dev 就可以了


成功之后,接着在浏览器里输入:http://localhost:8086,看到如下画面就是成功了。

ip跟端口地址配置在这个文件里

5、退出运行:在终端按Crtl+C

输入Y 结束。

6、项目打包发布

输入命令:

npm run build


完成之后,项目文件夹中会出现一个dist文件夹,里面就是打包之后的内容,直接部署就好了。

问题三:Use /* eslint-disable */ to ignore all warnings in a file. 报 错,不注释掉,启动运行都报错

解决方式:

有了eslint的校验,可以来规范开发人员的代码,是挺好的。但是有些像缩进、空格、空白行之类的规范,但是稍有不符合,就会在开发过程中一直报错,太影响心情和效率了。所以,还是会选择关闭eslint校验。 

路径:在build/webpack.base.conf.js文件中,注释或者删除掉:module->rules中有关eslint的规则

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/81896.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Java从0到1学习】09 正则表达式

1. 正则表达式概述 在编写处理字符串的程序或网页时,经常会有查找符合某些复杂规则的字符串的需要。正则表达式就是用于描述这些规则的工具。换句话说,正则表达式就是记录文本规则的代码。 正则表达式,又称正规表示法、常规表示法&#xff…

MybatisPlus整合p6spy组件SQL分析

目录 p6spy java为什么需要 如何使用 其他配置 p6spy p6spy是一个开源项目,通常使用它来跟踪数据库操作,查看程序运行过程中执行的sql语句。 p6spy将应用的数据源给劫持了,应用操作数据库其实在调用p6spy的数据源,p6spy劫持到…

2023最新版本~KEIL5使用C++开发STM32

先看效果 开始教学 因为是第一次写这个配置教程 我会尽量详细些 打开一个Keil工程 移除本地core 添加在线core 第一次编译代码 不会有报错 修改main.c文件类型为C 点击魔术棒 把ARM编译器修改为V6 第二次编译会报错语法不兼容 我把汇编部分的这些代码做了…

安防视频汇聚平台EasyCVR视频监控综合管理平台H.265转码功能更新,新增分辨率配置的具体步骤

安防视频集中存储EasyCVR视频监控综合管理平台可以根据不同的场景需求,让平台在内网、专网、VPN、广域网、互联网等各种环境下进行音视频的采集、接入与多端分发。在视频能力上,视频云存储平台EasyCVR可实现视频实时直播、云端录像、视频云存储、视频存储…

【idea】社区版idea运行Tomcat

使用 Smart Tomcat插件 配置运行:

vue导出文件流获取附件名称并下载(在response.headers里解析filename导出)

导出文件流下载,拦截器统一处理配置 需求以往实现的方法(各自的业务层写方法)现在实现的方法(axios里拦截器统一配置处理)把文章链接复制粘贴给后端,让大佬自己赏阅。 需求 之前实现的导出都是各自的业务层…

网络编程(字节序)

一、字节序的概念 字节序是指不同类型CPU主机,内存存储 多字节整数 序列的方式。 float, char, 字符串均没有字节序的说法 short, int , long , long long 有字节序的说法 小端字节序:低字节存储在低地址,高字节存储在高地址 大端字节序…

常见架构类型

目录 1.单机架构 2.应用数据分离架构 3.读写分离架构 4.冷热分离架构 5.垂直分库架构 6.微服务架构 7.容器编排架构 1.单机架构 单机架构是简单的将应用服务和数据库服务部署到同一台机器上。 缺点:存在很大的性能限制。 2.应用数据分离架构 引入负载均衡&a…

vue3+elementPlus table里添加输入框并提交校验

<template><div><el-form :model"info" ref"forms"><el-tableref"tableRef":data"info.data"border><el-table-column align"center" property"name" label"*姓名"><…

mapper.xml中循环执行多条语句时报错,但是单独拿SQL到数据库却可以执行

我是批量修改数据&#xff0c;用foreach标签包住update语句&#xff0c;报错信息如下&#xff1a; nested exception is java.sql.SQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the …

Dubbo 融合 Nacos 成为注册中心

快速上手 Dubbo 融合 Nacos 成为注册中心的操作步骤非常简单&#xff0c;大致步骤可分为“增加 Maven 依赖”以及“配置注册中心“。 增加 Maven 依赖 只需要依赖Dubbo客户端即可&#xff0c;关于推荐的使用版本&#xff0c;请参考Dubbo官方文档或者咨询Dubbo开发人员&#…

vite打包遇到的错误

1.js emit is not supported 2.将package.json中的bulid后面写成“vue-tsc --noEmit --skipLibCheck && vite build” 3.再次打包成功

微信程序 自定义遮罩层遮不住底部tabbar解决

一、先上效果 二 方法 1、自定义底部tabbar 实现&#xff1a; https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html 官网去抄 简单写下&#xff1a;在代码根目录下添加入口文件 除了js 文件的list 需要调整 其他原封不动 代码&#xf…

RT1052的EPWM

文章目录 1 EPWM介绍1.1 引脚1.2 时钟1.3 比较寄存器 2 函数 1 EPWM介绍 RT1052 具有 4 个 eFlexPWM(eFlexWM1~eFlex_PWM4)。 每个 eFlexPWM 可以产生四路互补 PWM即产生 8 个 PWM&#xff0c;也可以产生相互独立的 PWM 波。四路分别是模块0-3每个 eFlexPWM 具有各自的故障检…

opencv进阶09-视频处理cv2.VideoCapture示例(打开本机电脑摄像头)

视频信号&#xff08;以下简称为视频&#xff09;是非常重要的视觉信息来源&#xff0c;它是视觉处理过程中经常要处理的一类信号。实际上&#xff0c;视频是由一系列图像构成的&#xff0c;这一系列图像被称为帧&#xff0c;帧是以固定的时间间隔从视频中获取的。获取&#xf…

react之路由的安装与使用

一、路由安装 路由官网2021.11月初&#xff0c;react-router 更新到 v6 版本。使用最广泛的 v5 版本的使用 npm i react-router-dom5.3.0二、路由使用 2.1 路由的简单使用 第一步 在根目录下 创建 views 文件夹 ,用于放置路由页面 films.js示例代码 export default functio…

如何在前端实现WebSocket发送和接收UDP消息(多线程模式)

目录 简介&#xff1a;步骤1&#xff1a;创建WebSocket连接步骤2&#xff1a;创建Web Workers步骤3&#xff1a;发送和接收UDP消息&#xff08;多线程模式&#xff09;结束语&#xff1a; 简介&#xff1a; 本文将继续介绍如何在前端应用中利用WebSocket技术发送和接收UDP消息…

C#生产流程控制(串行,并行混合执行)

开源框架CsGo https://gitee.com/hamasm/CsGo?_fromgitee_search 文档资料&#xff1a; https://blog.csdn.net/aa2528877987/article/details/132139337 实现效果 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37…

vue 关闭prettier警告warn

这个就是我们创建vue cli的时候 把这个给默认上了 关闭这个只需在.eslintrc.js页面里边添加一行代码"prettier/prettier": "off"

从零开始创建 Spring Cloud 分布式项目,不会你打我

目录 一、Spring Cloud 和 分布式 二、创建新项目 三、导入 Spring Cloud 依赖 四、配置 Spring Cloud 一、Spring Cloud 和 分布式 Spring Cloud是一个基于Spring框架的开源微服务框架&#xff0c;它提供了一系列工具和组件&#xff0c;用于帮助开发人员构建分布式系统中…