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

news2024/11/19 3:27:17

问题一: 在浏览器上的扩展程序上添加了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文件夹,里面就是打包之后的内容,直接部署就好了。

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

操作系统-笔记-第二章-进程同步与互斥

目录 二、第二章——【进程同步与互斥】 1、进程同步(异步) 2、进程互斥 & 共享 3、总结(互斥、同步) 4、进程互斥(软件实现) (1)单标志法——谦让【会让他们轮流访问、其…

李沐pytorch学习-卷积网络及其实现

一、卷积定义 卷积计算过程如图1所示,即输入矩阵和核函数对应的位置相乘,然后相加得到输出对应位置的数。 图1. 卷积计算过程 该过程可以形象地从图2中展现。 图2. 二维卷积示意图 二、代码实现 2.1 实现互相关运算 import torch from torch import n…

CANoe软件Tools中无法找到LDF Explorer

关联文章: LDF概述和LDF Explorer工具介绍 问题描述 使用CANoe软件的菜单栏Tools中无法找到LDF Explorer 原因分析/解决方案: ①查看CANoe硬件是否带LIN license,并且license在正常激活时间内。 ②查看CANoe是否配置了LIN通道,…

嵌入式设备应用开发(程序构建)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing @163.com】 编译是嵌入式开发很重要的一个环节。记得早年在上海一家通讯公司上班的时候,单位还专门有一个人维护编译脚本。当时用的是makefile,这位同学的主要工作就是替大家维护好各个项目的…

设备绑定驱动

头文件 驱动程序 应用程序 串口实现LED灯亮灭

postgresql 数据排序

postgresql 常见操作 排序总结 排序 -- 排序的时候null是最大的值(看一下) select employee_id,manager_id from employeesorder by manager_id desc;-- nulls first使null值排在第一位 select employee_id,manager_id from employeesorder by manager_id nulls first;-- null…

无涯教程-TensorFlow - 分布式计算

本章将重点介绍如何开始使用分布式TensorFlow,目的是帮助开发人员了解重复出现的基本分布式TF概念,如TF服务器。无涯教程将使用Jupyter Notebook分布式TensorFlow。 第1步 - 导入分布式计算必需的必要模块- import tensorflow as tf 第2步 - …

【Zorro】点击蒙层关闭模态框modal,用nzMaskClosable

使用 nzMaskClosable 例子&#xff1a; <nz-modalnzTitle"新增流程"[nzMaskClosable]"false"[nzWidth]"1200"[(nzVisible)]"visible"[nzCancelLoading]"saving"[nzOkLoading]"saving"(nzOnCancel)"onMo…

SQL Server Express 自动备份方案

文章目录 SQL Server Express 自动备份方案前言方案原理SQL Server Express 自动备份1.创建存储过程2.设定计划任务3.结果检查sqlcmd 参数说明SQL Server Express 自动备份方案 前言 对于许多小型企业和个人开发者来说,SQL Server Express是一个经济实惠且强大的数据库解决方…

LDF概述和LDF Explorer工具介绍

文章目录 一、LDF是什么?二、LDF实践创建LDF工程规范&发展历史一、LDF是什么? LDF:LIN description file - LIN总线描述性文件,使用LIN规范中定义的LIN配置语言,在汽车行业应用广泛。主要描述了: ①节点的定义:主节点和从节点(一主多从) 关联文章:LIN是什么? ②…

mac m1上系统内录内部声音的方法/无需安装Blackhole

总所周知&#xff0c;m1的mac不能录制桌面音频&#xff0c;obsstudio都不行。 最快的解决方法就是下载飞书&#xff1a; 登陆后新建直播/视频会议&#xff1a; 共享的时候选择下面的两个钩上去就好了

【GeoDa实用技巧100例】018:制作条件图和条件地图

严重声明:本文为CSDN博主刘一哥GIS原创,原文地址为:https://blog.csdn.net/lucky51222/article/details/132377143,拒绝转载。 文章目录 一、条件图介绍二、制作条件图1. 条件散点图2. 条件直方图3. 条件箱线图三、制作条件地图一、条件图介绍 条件图是一种类似于矩阵统计…

服务器安装centos7踩坑

1、制作启动工具 下载iso https://developer.aliyun.com/mirror/?spma2c6h.25603864.0.0.20387abbo2RFbn http://mirrors.aliyun.com/centos/7.9.2009/isos/x86_64/?spma2c6h.25603864.0.0.1995f5ad4AhJaW下载 UltraISO https://cn.ultraiso.net/插入u盘启动 到了如图所示页面…

关于docker-compose up -d在文件下无法运行的原因以及解决方法

一、确认文件下有docker-compose.yml文件 二、解决方法 检查 Docker 服务是否运行&#xff1a; 使用以下命令检查 Docker 服务是否正在运行&#xff1a; systemctl status docker 如果 Docker 未运行&#xff0c;可以使用以下命令启动它&#xff1a; systemctl start docker …

(二)Qt的安装(Linux系统下安装Qt6过程)

一、Qt资源下载网址 网址&#xff1a;点击下载http://download.qt.io/ 下载&#xff1a;点击下载(CSDN) 二、下载二进制安装包 进入Qt资源下载网址&#xff0c;进入对应的资源目录&#xff0c;找对应系统平台的二进制安装包选择进行下载&#xff0c;在这这里我们选择Linux下的二…

马上七夕到了,用各种编程语言实现10种浪漫表白方式

目录 1. 直接表白&#xff1a;2. 七夕节表白&#xff1a;3. 猜心游戏&#xff1a;4. 浪漫诗句&#xff1a;5. 爱的方程式&#xff1a;6. 爱心Python&#xff1a;7. 心形图案JavaScript 代码&#xff1a;8. 心形并显示表白信息HTML 页面&#xff1a;9. Java七夕快乐&#xff1a;…

时尚易用的健康手表,时刻关注身体状况,dido E56S Max体验

智能手表的功能大多只限于显示时间和记录运动数据、睡眠质量等简单的任务&#xff0c;除了漂亮的表盘&#xff0c;其他实质性的提升并不多&#xff0c;而对于重视健康的朋友来说&#xff0c;更需要的是一块能够时刻监测血氧、血压、血糖等身体数据的智能手表。 现在我用的这块d…

__format__和__del__

目录 一、__format__ 二、__del__ python从小白到总裁完整教程目录:https://blog.csdn.net/weixin_67859959/article/details/129328397?spm1001.2014.3001.5502 一、__format__ 自定制格式化字符串 date_dic {ymd: {0.year}:{0.month}:{0.day},dmy: {0.day}/{0.month}/…

stack、queue 和 priority_queue 相关的练习

目录 一、stack 相关的练习 1.1 - 最小栈 1.2 - 栈的压入、弹出序列 1.3 - 逆波兰表达式求值 1.4 - 用栈实现队列 二、queue 相关的练习 2.1 - 二叉树的层序遍历 2.2 - 二叉树的层序遍历 II 2.3 - 用队列实现栈 三、priority_queue 相关的练习 3.1 - 数组中的第K个最…