VUE3环境搭建开发准备

VUE3

Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。

前期准备

先下载安装 Node.js(点击此处),下载长期支持版本 LTS,然后一路 next 安装。

1.安装VUE CLi

VUE CLI 参考网址:https://cli.vuejs.org/
安装很简单,打开终端,运行命令:npm install -g @vue/cli
安装完成,输入命令验证: vue --version
安装成功时显示:

到这里,一个VUE的项目安装就结束了

2.创建项目

打开创建项目的目录,打开其终端,运行命令 vue create vue-demo
注意:项目名称不能有大写!!!
运行后,终端会开始弹出项目配置,根据自己的需求选择,配置时使用上下调整选项,使用空格设置是否选中。

这里选择第三个进行手动选择,前两个是默认版本

这里选择 Babel 和 Progressive Web App (PWA) Support 即可。
注意要将 Linter/Formatter 取消掉,这个是代码规范化,会让代码变得非常严格。

版本选择,选择 3.x

选择配置文件存放位置 In dedicated config files ,将其放在默认位置即可

选择 N。这一步的意思是是否将刚才的配置放在以后预置。

然后回车,等待项目创建,到此,安装成功!!

运行项目

打开文件夹:cd vue-demo
运行项目:npm run serve

然后浏览器打开网址:
Local: http://localhost:8080/
Network: http://192.168.1.105:8080/
可以看到项目运行成功!

项目结构

再看项目结构,其他的不用管,我们后期的开发都在 SRC 文件夹中进行。

此外 vscode安装 volar 插件,这个是让 VUE 语法高亮的插件。不然你的 VUE 代码语法全部都是灰色的。不方便查看代码。

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

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

相关文章

【Prometheus】概念和工作原理介绍

目录 一、概述 1.1 prometheus简介 1.2 prometheus特点 1.3 prometheus架构图 1.4 prometheus组件介绍 1、Prometheus Server 2、Client Library 3、pushgateway 4、Exporters 5、Service Discovery 6、Alertmanager 7、grafana 1.5 Prometheus 数据流向 1.6 Pro…

100天精通Python(实用脚本篇)——第117天:基于selenium实现反反爬策略之代码输入账号信息登录网站

文章目录 专栏导读1. 前言2. 实现步骤3. 基础补充4. 代码实战4.1 创建连接4.2 添加请求头伪装浏览器4.3 隐藏浏览器指纹4.4 最大化窗口4.5 启动网页4.6 点击密码登录4.7 输入账号密码4.8 点击登录按钮4.9 完整代码4.10 GIF动图展示 五、总结 专栏导读 🔥&#x1f5…

httpx.InvalidURL: Invalid port

httpx.InvalidURL: Invalid port 介绍解决方案总结 介绍 httpx包的bug,使用GPT-SoVITS时无法运行报的错 解决方案 改源码的这个文件lib/python3.9/site-packages/httpx/_urlparse.py:149行左右: def urlparse(url: str "", **…

IDEA安装配置以及安装配置Maven

IEDA官方下载地址,有专业版(收费,破解),社区版(免费) 下载 IntelliJ IDEA – 领先的 Java 和 Kotlin IDE 安装配置Maven 1.解压apache-maven-3.6.3-bin.zip,安装maven到D盘softwar…

台湾旺泓-WH4530A三合一光距感 接近传感芯片

WH4530A是一款集成了环境光传感器(PS)接近传感器(ALS)和红外LED灯三合一为一体的光距感传感芯片,可以测距从0到100厘米以内范围;并采用I2C接口具有超高的灵敏度和精准的测距检测范围。 该WH4530A​​​​​…

真香!NineData SQL开发全面适配 GaiaDB

2 月,新年伊始,NineData 重磅发布,提供了对百度云原生关系型数据库 GaiaDB 的支持。 这一次的发布不仅仅是简单的数据源支持,而是覆盖了整个 SQL 开发能力的重要发布,意味着您已经可以完整地使用 NineData SQL 开发的…

MySQL 事务原理分析

事务 前提:并发连接访问。定义:事务是用户定义的一系列操作,这些操作要么都做,要么都不做,是一个不可分割的单位。目的:事务将数据库从一种一致性状态转换为另一种一致性状态,保证系统始终处于…

半导体物理基础-笔记(续)

源内容参考:https://www.bilibili.com/video/BV11U4y1k7zn/?spm_id_from333.337.search-card.all.click&vd_source61654d4a6e8d7941436149dd99026962 掺杂半导体的费米能级与温度及杂质浓度的关系图 在温度一定的条件下,施主杂质浓度越高&#xff0…

接口测试实战--读取yaml用例

一、yaml模块用法 使用场景: 配置文件、测试用例文件等 语法: 大小写敏感 使用缩进表示层级关系 缩进时不允许用tab键,只能使用空格 缩进的空格数目不重要,只要相同层级的元素左对齐 #表示注释 基本数据类型:字符串、整型、列表、null(可使用~表示)、布尔型、时间 1)…

Redis操作

1、KEY操作 1.1 exists 1.2 expire 设置过期时间 expire name 5 1.3 ttl 如果不过期返回-1 1.4 del 2、字符串值(String) 2.1 set 2.2 get 2.3 setnx 当且仅当key不存在时才新增 不存在时返回1,存在返回0 2.4 setex 设置key的存活时间&am…

Oracle EBS GL 外币折算逻辑

背景 由于公司财务在10月份期间某汇率维护错误,导致帐套折算以后并合传送至合并帐套生成合并日记帐凭证的借贷金额特别大,但是财务核对的科目余额有没有问题,始终觉得合并日记帐生成会计分发有问题,需要我们给出外币折算逻辑。 基础设置 汇率 Path: GL->设置->币种-&…

pclpy 最小二乘法拟合平面

pclpy 最小二乘法拟合平面 一、算法原理二、代码三、结果1.左边原点云、右边最小二乘法拟合平面后点云投影 四、相关数据 一、算法原理 平面方程的一般表达式为: A x B y C z D 0 ( C ≠ 0 ) Ax By Cz D 0 \quad (C\neq0) AxByCzD0(C0) 即: …

【JSON详细讲解】

JSON讲解 1. 介绍2. JSON的基本规则3. JSON中的数据类型4. JSON的基本结构5. 在不同的语言中使用JSON 1. 介绍 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它是基于JavaScript的一个子集,但它是独立于语言的&a…

矢量扩散模型初探

import paddle from matplotlib import pyplot as plt import numpy as np from tqdm import tqdm# 从零开始构建一个简单的扩散模型 # 首先是扩散过程 # loss=label-net(sqrt(alpha_prod[t])*x0+sqrt(1-alpha_prod[t])*label) # label =正太分布采样 # alpha 是 一个斜边为1 的…

Java中使用链表实现的数据结构

在Java中,链表实现主要体现在以下几种数据结构中: 1. LinkedList LinkedList类实现了List接口和Deque接口,提供了双向链表的实现。它允许null元素,提供了列表的顺序访问以及在列表的头部和尾部进行高效的插入和移除操作。Linked…

Spring Boot对接RocketMQ示例

部署服务 参考RocketMq入门介绍 示例 引入maven依赖 <dependency><groupId>org.apache.rocketmq</groupId><artifactId>rocketmq-spring-boot-starter</artifactId><version>2.2.2</version></dependency>完整依赖如下&am…

C++ 游戏飞机大战, 字符型的

//#define _CRT_SECURE_NO_WARNINGS 1 用于禁止不安全函数的警告 #include<iostream> #include<stdlib.h> #include<string> #include<conio.h> #include<Windows.h> #include<time.h> #include <graphics.h> using namespace std;…

Rust升级慢,使用国内镜像进行加速

背景 rustup 是 Rust 官方的跨平台 Rust 安装工具&#xff0c;国内用户使用rustup update的时候&#xff0c;网速非常慢&#xff0c;可以使用国内的阿里云镜像源来进行加速 0x01 配置方法 1. Linux与Mac OS用户配置环境变量 修改~/.bash_profile文件添加如下内容&#xff1…

微信小程序 --- 小程序基础知识

小程序基础知识 1. 认识什么是小程序 什么是微信小程序 微信小程序是一种运行在微信内部的 轻量级 应用程序。 在使用小程序时 不需要下载安装&#xff0c;用户 扫一扫 或 搜一下 即可打开应用。它也体现了 “用完即走” 的理念&#xff0c;用户不用关心安装太多应用的问题…

力扣链表篇

以下刷题思路来自代码随想录以及官方题解 文章目录 203.移除链表元素707.设计链表206.反转链表24.两两交换链表中的节点19.删除链表的倒数第N个节点面试题 02.07. 链表相交142.环形链表II 203.移除链表元素 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链…