Visual Studio Code搭建VUE开发环境

Vue.js 是一款易学易用,性能出色,适用场景丰富的 Web 前端框架。它基于标准 HTML、CSS 和 JavaScript 构建,提供容易上手的 API 和一流的文档。可以用来开启PC网页、移动端网页页面、小程序等等

实验环境

  • VS Code 1.88.1
  • Node 20.16.0
  • Vue3.2.13

下载NodeJs

访问NodeJs官网:https://nodejs.org/en/download,找到window,64位版本下载
在这里插入图片描述
安装的话,基本是点Next即可,安装成功后检查一下环境变量,正常是会自己加上的,不过我们也可以自己调整一下,新增一个系统变量
在这里插入图片描述
然后在Path变量后面加上%NODE_PATH%,允许cmd命令,检查一下是否安装成功

在这里插入图片描述

修改npm配置

安装成功后,npm安装的全局模块和缓存默认安装在C:\Users\用户名\AppData\Roaming\npm文件夹里,这里可以进行路径更改,统一放在我们的Nodejs安装文件夹里,新建两个文件夹

在这里插入图片描述

在cmd窗口输入命令,修改默认安装文件夹路径,之后,npm install -g ... 这些命令安装的组件都会放在这个文件夹下面

npm config set prefix "D:/Program Files/nodejs/node_global"

修改缓存文件夹路径

npm config set cache "D:/Program Files/nodejs/node_cache"

如果不修改镜像地址,使用默认的地址去下载的话,在国内速度会比较慢,所以可以修改为国内的,比如使用淘宝的或者阿里云的

npm config set registry http://registry.npm.taobao.org

安装cnpm

有时候,npm有些资源被屏蔽,经常会导致用npm安装依赖包的时候失败,所以还需要npm的国内镜像,cnpm

npm install -g cnpm --registry=http://registry.npm.taobao.org

在这里插入图片描述

安装Vue脚手架vue-cli

使用命令:

npm install -g @vue/cli-init
npm install -g @vue/cli

安装成功截图

在这里插入图片描述

安装后,使用vue -v校验是否安装成功

在这里插入图片描述

安装webpack

webpack是一个模块打包器,是一个用于JavaScript应用程序的静态模块打包工具。安装webpack可以使用命令:

npm install -g webpack

安装成功可以在对面目录下面看到webpack这个文件夹

在这里插入图片描述

创建Vue项目

创建VUE项目可以使用多种方式

  • 方式一:cmd命令行创建

    管理员运行cmd命令,然后cd到对应文件夹,使用webpack构建一个项目

vue init webpack vue-demo
这个过程会有很多选项,可以选择默认的,一步一步回车即可

创建成功后,cd到项目文件夹

npm install

然后允许vue项目

npm run dev
  • 方式二:VUE图片界面创建
vue ui

在这里插入图片描述

启动成功,会弹出VUE项目管理页面

在这里插入图片描述

选择创建项目,输入项目名称

在这里插入图片描述

选择vue版本等等

在这里插入图片描述

  • 方式三:在VSCode里面创建

Ctrl+J弹出terminal页面,敲一下命令,使其支持调用vue这些命令

set-ExecutionPolicy RemoteSigned

Restricted:表示禁止终端使用命令的

RemoteSigned:表示可以使用终端命令

然后cd 到对应文件夹

vue create sample

这个命令会让你选择vue版本等等一些选项,可以选择默认,然后回车

  • Choose Vue version:选择Vue版本

  • Babel:解析 es6 转 es5 的插件

  • TypeScript:TypeScript插件

  • Progressive Web App (PWA) Support:渐进式Web应用程序(PWA)支持

  • Router:vue路由插件

  • Vuex:Vuex插件

  • CSS Pre-processors:css预处理插件

  • Linter/Formatter:格式化程序

  • E2E Testing:端到端(end-to-end)

  • Unit Testing:单元测试

项目创建成功:

在这里插入图片描述
vue项目结构图:
在这里插入图片描述

  • node_modules: 所有依赖项
  • public 静态内容
  • favicon.ico 小图标
  • index.html
  • src 项目执行的主目录
  • assets :静态文件(图片 、json、icon、font)
  • components: 组件
  • router :路由配置文件
  • views: 放置页面内容
  • App.vue: 项目的根组件,文件中可以写路由出口和路由链接 ,在 main.js里引入
  • main.js :项目的主入口文件
  • .gitignore: git的忽略文件
  • babel.config.js: 设置 babel 的配置的
  • package.json :所有依赖包配置文件
  • README.md: 项目文档

安装一下需要的组件

npm install

运行项目

npm run serve

如果出现npm run serve报错missing script: serve,检查一下package.json文件,是否有这个

在这里插入图片描述

加上后,再npm run serve,是npm run serve,还是npm run dev,就看package.json文件,运行成功截图

在这里插入图片描述

访问http://127.0.0.1:8080可以看到页面:

在这里插入图片描述

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

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

相关文章

趋动科技联合超聚变,让超融合彻底释放算力潜能

近日,趋动科技联合超聚变推出基于FusionOne HCI超融合的AI算力资源池化解决方案。该方案基于业内领先的AI算力资源池化技术,实现智能调度、异构算力融合管理等功能,让客户能够低成本获取AI算力,便捷使用AI算力,加速AI业…

AI学习记录 - transformer的Embedding层

创作不易,免费的赞 前面有介绍了GPT2如何进行token化的过程,现在讲下transformer的Embedding层 Embedding层就是一个巨大的矩阵,边长分别是词汇表长度和词向量维度,矩阵里面的每一个数字都是一个随机初始化的,或者是…

TinyWebserver的复现与改进(1):服务器环境的搭建与测试

计划开一个新坑, 主要是复现qinguoyi/TinyWebServer项目,并且使用其它模块提升性能。 本文开发服务器配置:腾讯云轻量级服务器,CPU - 2核 内存 - 2GB,操作系统 Ubuntu Server 18.04.1 LTS 64bit 打开端口 需要打开服务器3306、80…

常见硬件工程师面试题(四)

大家好,我是山羊君Goat。 对于硬件工程师,学习的东西主要和电路硬件相关,所以在硬件工程师的面试中,对于经验是十分看重的,像PCB设计,电路设计原理,模拟电路,数字电路等等相关的知识…

DriftingBlues2靶机渗透测试

DriftingBlues2靶机 文章目录 DriftingBlues2靶机信息收集FTP渗透web渗透权限提升靶机总结 信息收集 nmap扫描得到21,22和80端口,其中21ftp协议可以使用匿名用户登录 使用目录扫描一下网站,得到了blog目录 FTP渗透 匿名用户登录进去,发现…

WPF篇(8)- Button按钮

1. 用法解析 Button因为继承了ButtonBase&#xff0c;而ButtonBase又继承了ContentControl&#xff0c;所以&#xff0c;Button可以通过设置Content属性来设置要显示的内容。例如 <Button Content"确定"/>我们使用Button的时机&#xff0c;通常是鼠标点击事件…

补录:day023-回溯法

40.组合II 给定一个候选人编号的集合 candidates 和一个目标数 target &#xff0c;找出 candidates 中所有可以使数字和为 target 的组合。 candidates 中的每个数字在每个组合中只能使用 一次 。 注意&#xff1a;解集不能包含重复的组合。 思路:组合题目二&#xff0c;这个题…

2024世界机器人大会将于8月21日至25日在京举行

2024年的世界机器人大会预定于8月21日至25日&#xff0c;在北京经济技术开发区的北人亦创国际会展中心隆重举办。 本届大会以“共育新质生产力 共享智能新未来”为核心主题&#xff0c;将汇聚来自全球超过300位的机器人行业专家、国际组织代表、杰出科学家以及企业家&#xff0…

【云原生】Prometheus Pushgateway使用详解

目录 一、前言 二、Pushgateway概述 2.1 什么是Pushgateway 2.1.1 Pushgateway在Prometheus中的位置 2.2 为什么需要Pushgateway 2.3 Pushgateway作用 2.4 Pushgateway 工作原理 2.5 Pushgateway 使用场景 2.6 Pushgateway 优缺点 三、Pushgateway 部署 3.1 二进制安…

ip透传及实例

IP 透传介绍 “IP 透传”&#xff08;IP Passthrough&#xff09;是一种网络配置方式&#xff0c;指的是将网络服务提供商分配给用户的公网 IP 地址直接传递或分配给用户设备&#xff0c;而不是经过网络地址转换&#xff08;NAT&#xff09;处理。 在传统的网络环境中&#xf…

HTML5+JavaScript绘制彩虹和云朵

HTML5JavaScript绘制彩虹和云朵 彩虹&#xff0c;简称虹&#xff0c;是气象中的一种光学现象&#xff0c;当太阳光照射到半空中的水滴&#xff0c;光线被折射及反射&#xff0c;在天空上形成拱形的七彩光谱&#xff0c;由外圈至内圈呈红、橙、黄、绿、蓝、靛、紫七种颜色。事实…

Qt WebEngine基于WebEngineScript注入js脚本

在之前的文章中&#xff0c;我们介绍了Qt WebEngine注入js的用法&#xff0c;及runJavaScript()的用法&#xff0c;该方法主要是用在页面加载完成后&#xff0c;为了和网页做一些交互时使用。有时候需要监听网页加载完成的一些状态或信息&#xff0c;则需要网页加载前注入js来实…

VSCODE platformio ESP32-S3 内置 JTAG 接口断点单步调试笔记

ESP32 S3的两种JTAG调试方法 ESP32 S3的有两种JTAG调试方法&#xff0c;直接连接板子上的JTAG引脚进行调试&#xff0c;或者用ESP32-S3 内置 JTAG 接口进行调试&#xff0c;这些方法有助于开发者在开发过程中进行更深入的调试。 1、ESP32-S3 内置 JTAG 接口 使用 ESP32-S3 内…

VSCode Markdown Preview Enhanced启用PlantumlL支持

目录 VSCode Markdown Preview Enhanced启用Plantuml支持安装Java下载Plantuml最新版本jar文件配置Markdown Preview Enhanced中Plantuml Jar Path路径 VSCode Markdown Preview Enhanced启用Plantuml支持 当需要Markdown支持PlantUML语法显示支持时&#xff0c;需要进行如下设…

学单片机怎么在3-5个月内找到工作?

每个初学者&#xff0c;都如履薄冰&#xff0c;10几年前&#xff0c;我自学单片机时&#xff0c;也一样。 想通过学习&#xff0c;找一份体面点的工作&#xff0c;又害怕辛辛苦苦学出来&#xff0c;找不到工作。 好在&#xff0c;当初执行力&#xff0c;还算可以&#xff0c;自…

使用FFmpeg实现摄像头RTMP实时推流

在当今的数字时代,视频直播已成为连接人与人之间的重要桥梁,广泛应用于在线教育、远程会议、娱乐直播等多个领域。随着技术的不断进步,人们对于直播的实时性、稳定性和高质量需求日益增加。为了实现高效的视频直播,选择合适的工具和协议至关重要。 RTMP(Real-Time Messagi…

LVS集群中的负载均衡技术

目录 一、LVS技术原理 二、NAT模式原理及部署方法 1、工作原理 2、部署方法 1、网络配置 2、软件安装与启用 3、测试 三、DR模式原理及部署方法 1、工作原理 2、部署方法 1、网络配置 2、解决vip响应问题 3、测试 四、ipvsadm命令及参数 1、管理集群服务&#x…

MySQL增删改查(基础)

1、. 新增&#xff08;Create&#xff09; 语法&#xff1a; INSERT [INTO] table_name[(column [, column] ...)] VALUES (value_list) [, (value_list)] ... 例子&#xff1a; -- 创建一张学生表 DROP TABLE IF EXISTS student; CREATE TABLE student (id INT,sn INT com…

DC-DC控制器芯片内部如何实现PWM控制?

大家好,这里是大话硬件。 在前面文章中,结合UC3842芯片内部框图,陆续实现了芯片的振荡器功能,参考电压功能,过欠压保护功能。今天这篇文章对PWM控制功能进行仿真。 根据框图,器件内部主要是误差放大器和高速比较器。 实现思路如下:模拟一个输出电压,纹波变化频率和…

较新版本Cesium使用本地源码编译打包

0 写作背景 较新版本的Cesium&#xff08;1.100版本及以后&#xff09;在代码结构上做了一定的调整&#xff0c;打包方式也随之发生了一些变化。 Starting with version 1.100, CesiumJS will be published alongside two smaller packages cesium/engine and cesium/widgets …