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

news2024/9/20 22:54:35

第一步安装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.coloradmin.cn/o/1480507.html

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

相关文章

spring事务方法调用不生效的场景

同一个类中&#xff0c;事务方法调用非事务方法时&#xff0c;事务是可以生效的。反例事务不生效见以下 4. 同一个类中&#xff0c;方法内部调用 Autowired private XXXMapper xxxMapper; Autowired private YYYMapper yyyMapper; Transactional public ResultVO<AssetCh…

pag动效预览

潮玩apk里面分析静态资源发现动效有lottie 和pag文件 PAG官网 | PAG动效PAG动效组件可以降低或消除动效相关的研发成本&#xff0c;接入SDK后&#xff0c;设计师可通过PAGExpoter、PAGViewer等工具&#xff0c;一键将设计师在 AE 中制作的动效内容导出成素材文件&#xff0c;并…

【QT 5 +Linux下软件qt软件打包+qt生成软件创建可以安装压缩包+学习他人文章+第三篇:学习打包】

【QT 5 Linux下软件qt软件打包qt生成软件创建可以安装压缩包学习他人文章第三篇&#xff1a;学习打包】 1、前言2、实验环境3、自我学习总结-本篇总结&#xff08;1&#xff09;了解安装包的目录结构&#xff08;2&#xff09;了解要编写文件与编写脚本1. control文件2. postin…

vue3+vite 项目的创建

这里要提醒一下&#xff0c;如果我们要使用 vue3 的组合式api 的写法的话&#xff0c; 那么我们使用的 vue 版本不能低于 vue3.2 版本&#xff0c;不能低于 vue3.2 版本&#xff0c;不能低于 vue3.2 版本 vue2 已停止维护了&#xff0c; 现在全面拥抱vue3 之前用 vue-cli 创建…

鸿蒙Harmony应用开发—ArkTS声明式开发(通用属性:图片边框设置)

设置容器组件的图片边框样式。 说明&#xff1a; 从API Version 9开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 borderImage borderImage(value: BorderImageOption) 设置组件的图片边框。 卡片能力&#xff1a; 从API version 9开始…

2.2_4 调度算法的评价指标

文章目录 2.2_4 调度算法的评价指标&#xff08;一&#xff09;CPU利用率&#xff08;二&#xff09;系统吞吐量&#xff08;三&#xff09;周转时间&#xff08;四&#xff09;等待时间&#xff08;五&#xff09;响应时间 总结 2.2_4 调度算法的评价指标 注&#xff1a;要理解…

CentOs的yum报错: except KeyboardInterrupt, e:

1.报错 File “/bin/yum”, line 30 except KeyboardInterrupt, e: ^^^^^^^^^^^^^^^^^^^^ 2.原因&#xff1a;yum需要用python2编译&#xff0c;如果服务器安装的是python3.6并作为默认编译器的话&#xff0c;就会出现这个错误。 3.解决方法&#xff1a;whereis python 4.修改y…

【EI会议征稿通知】第三届新能源、储能与电力工程国际学术会议(NESP 2024)

第三届新能源、储能与电力工程国际学术会议&#xff08;NESP 2024&#xff09; 2024 3rd International Conference on New Energy, Energy Storage and Power Engineering (NESP 2024) 近几十年来&#xff0c;全球能源消耗迅速增加&#xff0c;因此寻找和开发性能优良的环保…

如何根据我的世界/Minecraft玩家数量选择合适的服务器配置,包括内存和CPU核心数的实际案例分析?

根据Minecraft玩家数量选择合适的服务器配置&#xff0c;首先需要考虑的是服务器的处理能力&#xff0c;这主要由CPU和内存决定。对于Minecraft服务器来说&#xff0c;CPU核心数直接影响到服务器能够同时处理的任务数量&#xff0c;而内存容量则决定了服务器能承载的人数。 对…

P1160 队列安排题解

题目 一个学校里老师要将班上N个同学排成一列&#xff0c;同学被编号为1∼N&#xff0c;他采取如下的方法&#xff1a; 先将1号同学安排进队列&#xff0c;这时队列中只有他一个人&#xff1b; 2∼N号同学依次入列&#xff0c;编号为i的同学入列方式为&#xff1a;老师指定编…

我写了个ImageWindow应用

文章目录 0 引言1 应用简介2 主要功能和特点2.1 多图像同/异步像素级对比2.2 支持多达30种图像格式2.3 高效率的图像处理性能 3 简明使用教程3.1 软件下载安装与更新3.1.1 软件下载与安装3.1.2 软件更新 3.2 多视窗添加并自动最优排列3.3 多样化图像导入方式3.4 自动切换显示模…

如何实现WordPress后台显示文章、分类目录、标签等的ID?

我们平时在使用WordPress的过程中&#xff0c;偶尔需要用到文章的ID&#xff0c;或分类目录ID&#xff0c;或标签ID&#xff0c;或媒体库ID&#xff0c;或评论ID&#xff0c;或用户ID等&#xff0c;但是WordPress后台默认是不显示它们的ID的。 今天boke112百科就跟大家分享如何…

Linux 下安装Jupyter

pip3 install jupyter pip3 install ipython -------------------------------------------- pip3 install jupyterlab jupyter lab pip3 list | grep jupyterlab 启动&#xff1a; python3 -m jupyter lab 2.安装朱皮特 pip3 install -i https://pypi.douban.com/simpl…

力扣1107 每日新用户统计

力扣SQL查询案例——在过去90天内&#xff0c;每个日期首次登录的用户数 目录 题目描述 解题思路 完整代码 题目描述 Traffic 表&#xff1a; ------------------------ | Column Name | Type | ------------------------ | user_id | int | | activity …

计算机二级MySQL-错题、知识点合集04

计算机二级MySQL 第四章 索引 主键约束&#xff0c;不允许为空也不允许重复。 NOT NULL非空约束属于自定义完整约束 PRIMARY KEY 属于实体完整性约束 FOREIGN KEY外键约束 外键与其引用的主键应分别属于不同的表&#xff0c;可以属于同一个关系&#xff1b;一个关系中可以定…

如何在Window系统部署BUG管理软件并结合内网穿透实现远程管理本地BUG

文章目录 前言1. 本地安装配置BUG管理系统2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射本地服务3. 测试公网远程访问4. 配置固定二级子域名4.1 保留一个二级子域名5.1 配置二级子域名6. 使用固定二级子域名远程 前言 BUG管理软件,作为软件测试工程师的必备工具之一。在…

css5定位

css 一.定位1.概念&#xff08;定位定位模式边位移&#xff09;2.静态位移static&#xff08;不常用&#xff09;3.相对定位relative&#xff08;不脱标&#xff09;&#xff08;占位置&#xff09;4.绝对定位absolute&#xff08;脱标&#xff09;&#xff08;不占位置&#x…

Unity(第十七部)Unity自带的角色控制器

组件Character Controller 中文角色控制器 using System.Collections; using System.Collections.Generic; using UnityEngine;public class player : MonoBehaviour {private CharacterController player;void Start(){player GetComponent<CharacterController>();}v…

leetcode刷题(javaScript)——栈相关场景题总结

在LeetCode刷题中&#xff0c;栈是一个非常有用的数据结构&#xff0c;可以解决许多问题&#xff0c;包括但不限于以下几类问题&#xff1a; 括号匹配问题&#xff1a;例如检查括号序列是否有效、计算表达式的值等。逆波兰表达式求值&#xff1a;使用栈来实现逆波兰表达式的计算…

Linux线程【1概念】

目录 前言&#xff1a; 正文&#xff1a; 1.什么是线程&#xff1f; 1.1基本概念 1.2线程理解 1.3进程与线程的关系 1.4线程使用 2.重谈地址空间 2.1页表的大小 2.2、内存与磁盘的交互 2.3深入页表 2.4小结 3.线程概念总结 3.1、再谈线程 3.2线程的优点 3.3…