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

第一步安装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

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

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

相关文章

私域运营的7个关键策略

1.通过私域工具实现标签,话术,聚合聊天等 2、公域获客,私域精准化运营,变现解决方案 3、标签化运营,筛选不同层级客户,根据对方需求提供解决方案 4、做私域需要坚持,不断累计信任 5、高复购…

matplotlib——折线图(python)

前言 在学习数据分析前,一定要有python基础,不一定要非常熟练的掌握这门语言,但一定要对python有个大概的了解(就像我一样,大一学过python,但是现在忘的差不多了,但是没关系,有个大…

MYSQL 解释器小记

解释器的结果通常通过上述表格展示: 1. select_type 表示查询的类型 simple: 表示简单的选择查询,没有子查询或连接操作 primary:表示主查询,通常是最外层的查询 subquery :表示子查询,在主查询中嵌套的查询 derived: 表示派…

vue2 开发记录

el-select 如何修改选择项的样式/el-select-dropdown__item 文字上下显示 测试代码 <div stylemargin-left: 100px><!-- 测试代码--><el-select filterablesizemini><div classxxx-el-select><el-optionv-foritem in [{key:1,des:2,…

构建产业图谱,实现产业链精准招商!

​产业链招商是一种以产业链为基础的招商引资方式&#xff0c;它不仅仅关注单个企业的引入&#xff0c;而是侧重于整个产业链的布局和发展&#xff0c;通过吸引产业链上下游相关企业共同入驻&#xff0c;形成产业集群&#xff0c;从而提升地区或园区的产业竞争力和经济效益&…

数据之光:探索数据库技术的演进之路

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua&#xff0c;在这里我会分享我的知识和经验。&#x…

Linux - 基本指令

1、ls 指令 语法&#xff1a;ls [选项][目录或文件] 功能&#xff1a;对于目录&#xff0c;该命令列出该目录下的所有子目录与文件。对于文件&#xff0c;将列出文件名以及其他信息。 常用选项&#xff1a; -a 列出目录下的所有文件&#xff0c;包括以 . 开头的隐含文件-l …

重塑计算:ICP 打造无限智能合约云解决方案

作者&#xff1a;Lynn Cadet 编译&#xff1a;TinTinLand 原文&#xff1a;https://www.hostingadvice.com/blog/internet-computer-offers-a-limitless-smart-contract-cloud-solution/ 摘要&#xff1a;与其前身互联网一样&#xff0c;区块链行业寻求引领一个新时代及其经济…

力扣-跳跃游戏

问题 给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标&#xff0c;如果可以&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 解答 class Solu…

linux系统Jenkins工具添加自由项目和maven项目

Jenkins添加自由项目 添加自由项目操作流程代码远程代码邮件标题邮件正文 添加maven项目准备环境操作流程 添加自由项目 gitlab配置基本代码页面等&#xff0c;拉取代码&#xff0c;打包&#xff0c;发布操作流程 代码 远程代码 echo ssh root192.168.188.177 "tar cz…

C++的常用排序(未完待续)

注&#xff1a;本文以升序为例 一、冒泡排序 1.1 操作方法 步骤1比较相邻元素&#xff0c;如果前者比后者大&#xff0c;则交换它们。步骤2对头到尾&#xff0c;对所有元素按序执行一轮这样的操作(这样可以找到第一最大值)步骤3再从第一个元素开始&#xff0c;重复上述比较操…

数据可视化基础与应用-02-基于powerbi实现连锁糕点店数据集的仪表盘制作

总结 本系列是数据可视化基础与应用的第02篇&#xff0c;主要介绍基于powerbi实现一个连锁糕点店数据集的仪表盘制作。 数据集描述 有一个数据集&#xff0c;包含四张工作簿&#xff0c;每个工作簿是一张表&#xff0c;其中可以销售表可以划分为事实表&#xff0c;产品表&am…

Python 在Word中查找并高亮指定文本

当你需要在长文档或报告中快速找到特定的关键词或短语&#xff0c;Word中提供的查找并高亮这一功能可以帮助你迅速定位这些内容。本文将介绍如何使用Python在Word中查找并突出显示指定的文本。 所需工具&#xff1a;第三方库 Spire.Doc for Python。该库支持创建、编辑、转换Wo…

笔记72:关于IMU(惯性测量单元)传感器的作用【不涉及公式推导】

一、IMU传感器是什么&#xff1a; 惯性测量单元IMU&#xff08;Inertial Measurement Unit&#xff09;是一种使用【加速度计】和【陀螺仪】来测量【物体三轴姿态角&#xff08;空间姿态&#xff09;】的装置&#xff1b;IMU在坐标系的每个坐标轴上&#xff0c;均安装有1个陀螺…

Zabbix“专家坐诊”第231期问答

问题一 Q&#xff1a;用docker-compose部署zabbix&#xff0c;部署完后如果要修改zabbix的配置应该要改docker-compose文件里的环境变量吧&#xff1f;改了环境变量之后只能重建容器才能生效吗&#xff1f;能不能在不影响已经配好的那些监控项的情况下让新的环境变量生效&#…

Vue+SpringBoot打造天然气工程运维系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统角色分类2.2 核心功能2.2.1 流程 12.2.2 流程 22.3 各角色功能2.3.1 系统管理员功能2.3.2 用户服务部功能2.3.3 分公司&#xff08;施工单位&#xff09;功能2.3.3.1 技术员角色功能2.3.3.2 材料员角色功能 2.3.4 安…

谷歌seo推广秒收录怎么做?

谷歌SEO推广秒收录想要做到&#xff0c;可以利用我们光算科技独家技术&#xff0c;GSI快速收录&#xff0c;通过技术手段和操作&#xff0c;帮你的网站快速被谷歌发现和记录 这项技术具体核心就是GPC爬虫池系统&#xff0c;这个系统是专门研究谷歌搜索引擎优化的规律和算法创造…

Makefile从入门到项目编译实战(学习笔记)

1.make和makefile介绍 1. make make 是一个应用程序&#xff0c;位于 /usr/bin/make 目录下&#xff0c;make 有如下的功能&#xff1a; &#xff08;1&#xff09;解析源程序之间的依赖关系 &#xff08;2&#xff09;根据依赖关系自动维护编译工作 &#xff08;3&#xff09…

「MySQL」增删查改

在操作数据库中的表时&#xff0c;需要先使用该数据库&#xff1a; use database;新增 创建表 先用 use 指定一个数据库,然后使用 create 新增一个表 比如建立一个学生表 mysql> use goods; mysql> create table student(-> name varchar(4),-> age int,-> …

React富文本编辑器开发(三)

现在我们的编辑器显示的内容很单一&#xff0c;这自然不是我们的目标&#xff0c;让呈现的内容多元化是我们的追求。这就需要让编辑器能够接收多元素的定义。从初始数据的定义我们可以推断数据的格式远不止一种&#xff0c;那么其它类型的数据如何定义及呈现的呢&#xff0c;我…