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的规则

 

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

el-table实现懒加载(el-table-infinite-scroll)

2023.8.15今天我学习了用el-table对大量的数据进行懒加载。 效果如下: 1.首先安装: npm install --save el-table-infinite-scroll2 2.全局引入: import ElTableInfiniteScroll from "el-table-infinite-scroll";// 懒加载 V…

CentOS系统环境搭建(九)——centos系统下使用docker部署项目

centos系统环境搭建专栏🔗点击跳转 关于Docker-compose安装请看CentOS系统环境搭建(三)——Centos7安装Docker&Docker Compose,该文章同样收录于centos系统环境搭建专栏。 Centos7部署项目 采用前后端分离的形式部署。使用Do…

JVM——引言+JVM内存结构

引言 什么是JVM 定义: Java VirtualMachine -java 程序的运行环境 (ava 二进制字节码的运行环境) 好处: 一次编写,到处运行自动内存管理,垃圾回收功能数组下标越界检查,多态 比较: jvm jre jdk 学习jvm的作用 面试理解底层实现原理中…

【Freertos基础入门】队列(queue)的使用

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、队列是什么?二、队列的操作二、示例代码总结 前言 本系列基于stm32系列单片机来使用freerots FreeRTOS是一个广泛使用的开源实时操作系统&…

CVE-2015-5254漏洞复现

1.漏洞介绍。 Apache ActiveMQ 是美国阿帕奇(Apache)软件基金会所研发的一套开源的消息中间件,它支持 Java 消息服务,集群,Spring Framework 等。Apache ActiveMQ 5.13.0之前 5.x 版本中存在安全漏洞,该漏…

CW4-3A-S(004)CW4-6A-S(004)CW4-10A-S(004)CW4-20A-S(004)CW4-30A-S(004)端子台式滤波器

CW4L3-3A-S(003) CW4L3-6A-S(003) CW4L3-10A-S(003) CW4L3-20A-S(003) CW4L3-30A-S(003)端子台式滤波器 CW4-3A-S(004) CW4-6A-S(004) CW4-10A-S(004) CW4-20A-S(004) CW4-30A-S(004)端子台式滤波器 CW4L4-3A-R CW4L4--6A-R CW4L4-10A-R CW4L4-20A-R CW4L4-30A-R端…

使用SSH隧道将Ubuntu云服务器Jupyter Notebook端口映射到本地

本文主要实现了在Ubuntu云服务器后台运行Jupyter Notebook,并使用SSH隧道将服务器端口映射到本地 1. 生成配置文件 运行以下命令生成Jupyter Notebook的配置文件: jupyter notebook --generate-config这将在用户主目录下生成一个名为.jupyter的文件夹&…

集群、负载均衡集群、高可用集群简介,LVS工作结构、工作模式、调度算法和haproxy/nginx模式拓扑介绍

一.集群的定义 1.定义 2.分类 (1)负载均衡集群(LBC/LB) (2)高可用集群(HAC) 二.使用集群的意义 1.高性价比和性能比 2.高可用性 3.可伸缩性强 4.持久和透明性高 三.常见的…

java面试基础 -- 普通类 抽象类 接口

目录 抽象类语法 抽象类特性 普通类 & 抽象类 抽象类 & 接口 什么是接口 语法 接口方法 变量 接口特性 抽象类&接口的区别 抽象类语法 在Java中,一个类如果被 abstract 修饰称为抽象类,抽象类中被 abstract 修饰的方法称为抽象…

无涯教程-Perl - splice函数

描述 此函数从LENGTH元素的OFFSET元素中删除ARRAY元素,如果指定,则用LIST替换删除的元素。如果省略LENGTH,则从OFFSET开始删除所有内容。 语法 以下是此函数的简单语法- splice ARRAY, OFFSET, LENGTH, LISTsplice ARRAY, OFFSET, LENGTHsplice ARRAY, OFFSET返回值 该函数…

Linux 网络发包流程

哈喽大家好,我是咸鱼 之前咸鱼在《Linux 网络收包流程》一文中介绍了 Linux 是如何实现网络接收数据包的 简单回顾一下: 数据到达网卡之后,网卡通过 DMA 将数据放到内存分配好的一块 ring buffer 中,然后触发硬中断CPU 收到硬中…

动态loading中转页

动态loading中转页 template <div class"loading"><div class"wavy"><!-- --i是自定义属性&#xff0c;可通过var函数调用 --><span style"--i: 1">登</span><span style"--i: 2">录</span>…