vue系列——vscode,node.js vue开发环境搭建

news/2024/7/27 8:01:02/文章来源:https://blog.csdn.net/qq_43886548/article/details/136214250

第一步安装node.js

推荐使用nvm进行node.js 的安装
nvm(Node.js version manager) 是一个命令行应用,可以协助您快速地 更新、安装、使用、卸载 本机的全局 node.js 版本。
可以去网上查找相关版本
我这里使用
nvm-setu…
链接:https://pan.baidu.com/s/1UEUtmzw5xpyl6jlPMm3Xqw?pwd=12ow
提取码:12ow

点击安装好后
命令行
nvm ls 查看已安装node.js版本
nvm list available 查看可安装版本
nvm install 21.3.0 安装
nvm use 21.3.0 使用

第二步 安装镜像cnpm

命令行
npm install -g cnpm --registry=https://registry.npmmirror.com

如过报错

解决方案

清空相关代理,http-proxy 和 proxy

npm config delete https-proxy
npm config delete proxy

查看配置代理结果

npm config get proxy
npm config get https-proxy

如果二者都返回 null 说明删除成功

此时修改镜像源才可能有用。 

之后安装包就可以了

检查 cnpm
cnpm -v

安装完成后如果报错
不是内部或外部命令
解决
找到下面位置的包含这两个文件,
将这个路径添加到系统环境变量 path里面
D:\Node_JS\node_global
在这里插入图片描述

第四步 安装vue/cli脚手架

在终端面板输入以下语句执行

cnpm install -g @vue/cli

然后输入以下语句查看脚手架是否安装成功;

vue -V

5.创建vue项目

在cmd 或者 VScode 中创建项目
vue create vue-01
连续敲下回车,创建项目,也可以按键盘上下键配置项目。

注:vue-01 是项目名称。
在vscode中运行vue -V 或者创建vue项目可能会报错
在这里插入图片描述解决方法,修改权限
方法1、在VScode控制台修改权限

以管理员身份打开VScode,并执行以下命令,即可

Set-ExecutionPolicy RemoteSigned
在这里插入图片描述

方法2、在cmd或者powershell修改权限

同样以管理员身份,执行相同的语句,并按照提示选择Y或A,即可

修改权限后 创建项目 vue create vue-01
在这里插入图片描述default([Vue 2] babel, eslint):默认勾选 babel、eslint,回车之后直接使用vue2装包

default([Vue 3] babel, eslint):默认勾选 babel、eslint,回车之后直接使用vue2装包

manually:自定义勾选特性配置,选择完毕之后,才会进入装包

6.运行vue项目

命令行运行

进入项目
cd vue-01
运行项目

npm run serve

vscode运行
下载安装vscode ,
打开创建的文件夹
在这里插入图片描述Ctrl+shift+Y呼出控制台,在控制台终端输入npm install添加包依赖 。
同样在终于执行npm run dev代表开始运行项目,这条命令会自动在浏览器上运行项目
如果报错
在这里插入图片描述改用npm run serve

vue插件安装

vetur插件的安装
该插件是vue文件基本语法的高亮插件,在插件窗口中(快捷键是ctrl+shift+x)输入vetur点击安装插件就行

装好后点击文件->首选项->设置 打开设置界面,在设置界面右侧添加配置。点击“在settings.json中编辑”,进入代码编辑界面。

输入Vetur文档代码:

{
“emmet.syntaxProfiles”: {
“vue-html”: “html”,
“vue”: “html”
},
}

eslint插件的安装
eslint智能错误检测插件,在具体开发中作用很大,能够及时的帮我们发现错误。至于安装,同样打开插件扩展窗口输入eslint点击安装插件,装好后也需要进行配置,在同vetur插件一样的地方进行配置
输入eslint文档代码:

{
“eslint.validate”: [
“javascript”,
“javascriptreact”,
“html”,
“vue”
],

"eslint.options": {"plugins":["html"]
}

}

Auto Close Tag 自动闭合HTML/XML标签,
Auto Rename Tag 自动完成另一侧标签的同步修改

Debugger for Chrome 映射vscode上的断点到chrome上,方便调试
报错解决
在这里插入图片描述

解决方法
在这里插入图片描述

“runtimeExecutable”: “C:/Program Files/Google/Chrome/Application/chrome.exe”

Error: Cannot find module ‘core-js/core/array’
在这里插入图片描述在vue.config.js 里删除//const { turn } = require(‘core-js/core/array’)
在这里插入图片描述调试 无法命中断点
unbound breakpoint
在这里插入图片描述

如果 vue 文件中不能加断点,是由于 vscode 配置问题导致

如下修改:首选项 => 设置 => 搜索”debug“ => 功能/调试 => 勾选 Debug:Allow Breakpoints Everywhere

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

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

相关文章

【数据结构】红黑树(RBTree)

介绍 概念 红黑树,是一种二叉搜索树,但在每个结点上增加一个存储位表示结点的颜色,可以是Red或Black。 通过对任何一条从根到叶子的路径上各个结点着色方式的限制,红黑树确保没有一条路径会比其他路径长出两倍,因而是…

专家解读:2024年十大项目管理工具综合排名与评价

2024年涌现出一批新的项目管理工具,各具特色的功能和设计为企业解决了诸多的管理难题。今天我们就来盘点2024年的十款项目管理工具Zoho Projects、AgileMaster、PlanItAll、CommuniQ、WorkFlowRanger、GanttGenius、RiskAssessor、TeamHarmony、BudgetBoss、CloudCo…

智能控制:物联网智能插座对接文档

介绍 一开始买的某米的插座,但是好像接口不开放,所以找到了这个插座,然后自己开发了下,用接口控制插座开关。wifi的连接方式,通电后一般几秒后就会连接上wifi,这个时候通过接口发送命令给他。 产品图片 通…

#QT(DEMO)

1.IDE:QTCreator 2.实验:打印"hello wolrd" 3.记录 (1)创建一个新工程: 新建好一个工程存放文件夹(路径不能有中文),然后按下图配置 (2)点击widgets.ui拖入以…

聚焦两会 | 从2024年政府工作报告看网络安全新机

在今年的《政府工作报告》(下面简称“报告”)中,除了对2023年里我国所取得的重大成就作了全面总结外,针对2024年全年经济社会发展作出的部署安排引起全国人民的关注。报告中与网络安全相关的内容也引起网络安全行业相关从事人员的…

如何查看前端的vue项目是vue2还是vue3项目

1. 检查package.json文件 在项目的根目录下,打开package.json文件,查找dependencies或devDependencies部分中的vue条目。版本号将告诉你是Vue 2还是Vue 3。例如: Vue 2.x: "vue": "^2.x.x"Vue 3.x: "vue": &…

vue svelte solid 虚拟滚动性能对比

前言 由于svelte solid 两大无虚拟DOM框架,由于其性能好,在前端越来越有影响力。 因此本次想要验证,这三个框架关于实现表格虚拟滚动的性能。 比较版本 vue3.4.21svelte4.2.12solid-js1.8.15 比较代码 这里使用了我的 stk-table-vue(np…

微信小程序用户登陆和获取用户信息功能实现

官方文档: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html 接口说明: https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/user-login/code2Session.html 我们看官方这个图,梳理一下用户…

IEEE754标准的c语言阐述,以及几个浮点数常量

很多年前,调研过浮点数与整数之间的双射问题: win7 intel x64 cpu vs2013 c语言浮点数精度失真问题 最近重新学习了一下IEEE754标准,也许实际还有很多深刻问题没有被揭示。 计算机程序设计艺术,据说这本书中也有讨论。 参考&…

校招中的“熟悉linux操作系统”一般是指达到什么程度?

校招中的“熟悉linux操作系统”一般是指达到什么程度? 在开始前我有一些资料,是我根据网友给的问题精心整理了一份「Linux的资料从专业入门到高级教程」, 点个关注在评论区回复“888”之后私信回复“888”,全部无偿共享给大家&am…

官网:随便搞个?那不如不搞,搞不好就给公司减分了。

官网建设确实需要认真对待,不能随便搞。一个粗制滥造的官网可能会给公司带来负面影响,降低品牌形象和用户体验。以下是一些官网建设的重要原则: 专业性:官网应该展示公司的专业性和专业知识。它应该以专业的设计、内容和功能来展示…

uipath调用js代码

1,调用js代码,不带参数,没有返回值 为了去掉按钮的disabled属性 function(){ document.getElementsByClassName(submitBtn)[0].removeAttribute(disabled); } 2,调用js代码,带参数,没有返回值 输入参数&a…

Day 6.有名信号量(信号灯)、网络的相关概念和发端

有名信号量 1.创建: semget int semget(key_t key, int nsems, int semflg); 功能:创建一组信号量 参数:key:IPC对像的名字 nsems:信号量的数量 semflg:IPC_CREAT 返回值:成功返回信号量ID…

Hololens 2应用开发系列(2)——MRTK基础知识及配置文件配置(上)

Hololens 2应用开发系列(2)——MRTK基础知识及配置文件配置 一、前言二、MRTK基础知识2.1 MRTK概述2.2 MRTK运行逻辑2.3 MRTK配置文件介绍2.4 MRTK服务 三、配置文件使用3.1 总配置文件3.2 相机配置3.3 其他配置 参考文献 一、前言 在前面的文章中&…

有一点好看的wordpress外贸独立站模板

手机配件wordpress外贸网站模板 充电器、移动电源、手机膜、手机电池、手机壳、手机转接头等手机配件wordpress外贸网站模板。 https://www.jianzhanpress.com/?p3809 车载电器wordpress外贸网站模板 车载吸尘器、空气净化器、行车记录仪、车载充电器、车载影音导航等车载电…

两数之和(c++ 、c)

给定一个整数数组nums和一个整数目标值target,请你再该数组中找出和为目标值target的那两个数,并返回它们的数组下标 题目介绍方法一思路及算法复杂度分析 方法二:哈希表什么是哈希表思路及算法C中unordered_map用法复杂度分析 方法三&#x…

C++ STL自定义排序

更具体的看【速记】C STL自定义排序 - 知乎 (zhihu.com) sort sort第三个位置放的greater<int>和less<int>萌新可能会弄错&#xff0c;这两个单词不是更大和更小的意思&#xff0c;而是大于和小于&#xff0c;并且比较就是自定义排序中的前者和后者。 如果是less…

【CSP试题回顾】201503-3-节日

CSP-201503-3-节日 关键点&#xff1a;格式化输出 在C中&#xff0c;格式化输出通常利用iostream库中的功能&#xff0c;特别是iomanip头文件提供的一系列操作符。这些操作符用于控制输出格式&#xff0c;如宽度、填充、对齐方式等。在你提供的代码中&#xff0c;用于格式化输…

电脑要用多少V的电源?电脑电源输入电压是市电

台式电源的输出电压是多少&#xff1f; 电脑电源输出一般有三种不同的电压&#xff0c;分别是&#xff1a; 12V、5V、3.3V。 电脑电源负责给电脑配件供电&#xff0c;如CPU、主板、内存条、硬盘、显卡等&#xff0c;是电脑的重要组成部分。 工作电流根据不同的硬件及其使用状…

Linux 开发工具 yum、git、gdb

目录 一、yum 1、软件包 2、rzsz 3、注意事项 4、查看软件包 5、安装软件 6、卸载软件 二、git操作 1、克隆三板斧 2、第一次使用会出现以下情况&#xff1a; 未配置用户名和邮箱&#xff1a; push后弹出提示 三、gdb使用 1、背景 2、使用方法 例一&#xff1a…