当前位置： 首页 > news >正文

开始第一个vue项目，环境搭建+html项目运行

news 2025/11/6 15:25:21

【用vue.js，通过script标签导入】

1. 搭建vue脚手架

  • 安装node js
  • 安装cnpm（淘宝源）

 【vue】在windows中搭建vue开发环境（全网最详细）_vue环境搭建_一起来学吧的博客-CSDN博客2a


 

2. 官网下载地址： 安装 - vue.js

tip：这个找了很久才找到，记录一下链接

3. 下载VSCode，官网下载安装即可

注意，VSCode和Visual Studio不是一个玩意儿！

4. 新建一个html

注意，不要点那个三角运行，下载一个live server插件，live运行，不然会报错

  • 新建一个html文件，！+tab
  • 下载安装 这个Live Server

  •  右键单击，open with Live Server

5. 写第一个vue文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../../vue.js/vue.js"></script></head><body><div id="app">hello,{{name}}<a :href="url" :x="xd">跳转官网</a></div><script>Vue.config.productionTip = false;new Vue({el: '#app',data: {name: '小滴课堂',url: 'https://xdclass.net',xd: '小滴',},});</script></body>
</html>

6. 可以配置一下代码片段，相当于一段代码的快捷键，提高开发效率

配置VS用户代码片段

相关文章：

开始第一个vue项目，环境搭建+html项目运行

【用vue.js&#xff0c;通过script标签导入】 1. 搭建vue脚手架 安装node js安装cnpm&#xff08;淘宝源&#xff09; 【vue】在windows中搭建vue开发环境&#xff08;全网最详细&#xff09;_vue环境搭建_一起来学吧的博客-CSDN博客2a 2. 官网下载地址&#xff1a; 安装 …...

编程日记 2023/6/1 14:13:04

Redis 的数据类型和命令帮助

文章结构 Redis 数据类型1. Redis全局命令&#xff08;跟key有关系&#xff0c;而跟value无关&#xff09;2. StringsGetting and setting StringsManaging counters 3. Lists(L)Basic commandsBlocking commands 4. Sets(S)Basic commands 5. Hashes(H)Basic commands 6. Sort…...

编程日记 2023/6/1 14:08:03

【C++11】智能指针

什么是智能指针&#xff1a; 智能指针是一个类&#xff0c;用来存储指向动态分配对象的指针&#xff0c;负责自动释放动态分配的对象&#xff0c;防止堆内存泄漏。动态分配的资源&#xff0c;交给一个类对象去管理&#xff0c;当类对象声明周期结束时&#xff0c;自动调用析构函…...

编程日记 2023/6/1 14:03:02

三、Go的常用命令以及Go的执行原理

Go的执行原理以及Go的命令 一、Go的源码文件 Go 的源码文件分类&#xff1a; 如上图&#xff0c;分为三类&#xff1a; 1、命令源码文件&#xff1a; 声明自己属于 main 代码包、包含无参数声明和结果声明的 main 函数。 命令源码文件被安装以后&#xff0c;GOPATH 如果…...

编程日记 2023/6/1 13:57:55

ESP32 CAM 模块和 OpenCV 的二维码扫描器

概述 该项目是关于使用 ESP32 CAM 模块和 OpenCV 设计的二维码扫描仪或阅读器。我们将使用 ESP32 摄像头模块和 python 库开发一个程序和设备，我们可以用它来扫描二维码。使用 ESP32 CAM，项目变得更便宜。 QR 码现在已经成为我们日常生活的一部分，因为我们几乎在任何地方都…...

编程日记 2023/6/1 13:52:54

多链路传输技术在火山引擎 RTC 的探索和实践

动手点关注 干货不迷路 传统的数据传输方式大多是利用一个链路、选择设备的默认网卡进行传输&#xff0c;使用这种方式实现实时音视频通话时&#xff0c;如果默认网络出现问题&#xff08;如断网、弱网等&#xff09;&#xff0c;用户的通信就会发生中断或者卡顿&#xff0c;影…...

编程日记 2023/6/1 13:47:53

在Flask中构建API接口

重定向行为 斜杠 以下两个路由的不同之处在于是否使用尾部的斜杠。 第一个路由的URL尾部有一个斜杠&#xff0c;看起来就像一个文件夹&#xff0c;访问一个没有斜杠结尾的URL时&#xff0c;Flask会自动进行重定向&#xff0c;在结尾加上一个斜杠。 第二个路由的URL没有尾部…...

编程日记 2023/6/1 13:42:52

Postgres vs MySQL

主要区别及示例 简而言之&#xff0c;Postgres 和 MySQL 之间的主要区别实际上归结为主索引和辅助索引的实现方式以及数据的存储和更新方式。 让我们进一步探讨这个问题。 但首先... 基础知识 索引是一种数据结构&#xff08;主要是 B 树&#xff09;&#xff0c;允许通过…...

编程日记 2023/6/1 13:37:51

02.IP地址以及静态路由配置

文章目录 IP地址IP地址分类IPV4地址(32位)IPV4地址的分类特殊IP地址 VLSM --- 可变长子网掩码(子网划分)CLDR --- 无类域间路由(汇总)配置静态路由的基础配置静态路由的拓展配置 IP地址 IP地址分类 IPV4(32位二进制构成) — 点分十进制IPV6(128位二进制构成) — 冒分十六进制…...

编程日记 2023/6/1 13:32:50

GD32(STM32)因为中断问题，导致不能进行程序 正常运行

项目中&#xff0c;之前定时器中断就用了个TIM2&#xff0c;但后来程序优化需要再加一个计数定时器TIM6&#xff0c; TIM_TimeBaseInitTypeDef TIM_TimeBaseStructure; // 开启定时器时钟,即内部时钟CK_INT72M RCC_APB1PeriphClockCmd(RCC_APB1Perip…...

编程日记 2023/6/1 13:27:49

华为OD机试真题B卷 Java 实现【统计字符】，附详细解题思路

一、题目描述 输入一行字符&#xff0c;分别统计出包含英文字母、空格、数字和其它字符的个数。 数据范围&#xff1a;输入的字符串长度满足 1 \le n \le 1000 \1≤n≤1000 。 二、输入描述 输入一行字符串&#xff0c;可以有空格。 三、输出描述 统计其中英文字符&#…...

编程日记 2023/6/1 13:22:48

深入理解设计原则之开闭原则(OCP)

系列文章目录 C高性能优化编程系列 深入理解设计原则系列 深入理解设计模式系列 高级C并发线程编程 OCP&#xff1a;开闭原则 系列文章目录1、开闭原则的定义和解读2、如何理解“对扩展开放&#xff0c;对修改关闭”3、实现开闭原则的方法4、如何在团队协作中保证开闭原则的实…...

编程日记 2023/6/1 13:17:46

【学习随笔】

2022/11/13 HTML :讲完了 css&#xff1a;讲完了 作业&#xff1a;编写登陆界面、整理一下sql优化,对于mybatis不熟练的继续练习 关于MySQL优化的问题? 思路总结&#xff1a;主要考虑数据库优化与SQL语句优化。 1&#xff0c;数据库优化&#xff0c;包括存储引擎的优化&…...

编程日记 2023/6/1 13:12:45

【多路IO复用】select

select: 1.select&#xff1a;当被监听的 fd&#xff08;文件描述符&#xff09;就绪后会返回&#xff0c;但是我们无法知道具体是哪些 fd 就绪了&#xff0c;只能遍历所有的 fd。通常来说某一时刻&#xff0c;就绪的 fd 并不会很多&#xff0c;但是使用 select 必须要遍历所有…...

编程日记 2023/6/1 13:07:42

cuda编程学习——基础知识介绍！干货向（三）

本文主要内容为介绍CUDA编程前的一些基础知识 参考资料&#xff1a; 高升博客 《CUDA C编程权威指南》 以及 CUDA官方文档 文章、讲解视频同步更新公众《AI知识物语》&#xff0c;B站&#xff1a;出门吃三碗饭 1&#xff1a;并行计算 并行程序可以分为 指令并行&#xff1…...

编程日记 2023/6/1 13:02:42

30 VueComponent 事件的绑定

前言 这是最近的碰到的那个 和响应式相关的问题 特定的操作之后响应式对象不“响应“了 引起的一系列的文章 主要记录的是 vue 的相关实现机制 呵呵 理解本文需要 vue 的使用基础, js 的使用基础 测试用例 用例如下, 我们这里核心关注 事件的处理流程 问题的调试 整个…...

编程日记 2023/6/1 12:57:40

作用域及作用域链

作用域 隔离变量的集合 作用域最大的用处就是隔离变量&#xff0c;不同作用域内的同名变量不会有命名冲突。 作用域类型 全局作用域&#xff0c;函数作用域和块级作用域。 1&#xff09;全局作用域&#xff0c;在整个代码文件中都可以访问的作用域。 2&#xff09;函数作用域…...

编程日记 2023/6/1 12:52:20

深入解析Linux C/C++ 编程中的内存泄漏问题

深入解析Linux C/C 编程中的内存泄漏问题 I. 前言 (Introduction)1.1 文章目的与内容概述 (Purpose and Overview of the Content)1.2 重要性和实用性的说明 (Significance and Practicality Explanation)1.3 数据结构与内存泄漏的基本概念 (Basic Concepts of Data Structure …...

编程日记 2023/6/1 12:41:42

【爬虫第三章】 Python基础

预计更新一、 爬虫技术概述 1.1 什么是爬虫技术 1.2 爬虫技术的应用领域 1.3 爬虫技术的工作原理 二、 网络协议和HTTP协议 2.1 网络协议概述 2.2 HTTP协议介绍 2.3 HTTP请求和响应 三、 Python基础 3.1 Python语言概述 3.2 Python的基本数据类型 3.3 Python的流程控制语句 3…...

编程日记 2023/6/1 12:36:24

电力系统的虚假数据注入攻击和MTD系统研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/6/1 12:31:23

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2025/11/2 9:57:20

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2025/11/2 20:33:45

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

编程新知 2025/8/6 2:19:46

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

编程新知 2025/11/5 15:38:35

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...

编程新知 2025/7/8 18:12:44

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言&#xff1a; 双亲委派机制对于面试这块来说非常重要&#xff0c;在实际开发中也是经常遇见需要打破双亲委派的需求&#xff0c;今天我们一起来探索一下什么是双亲委派机制&#xff0c;在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言&#xff1a; 类加载器 1. …...

编程新知 2025/10/30 0:20:10

Java求职者面试指南：Spring、Spring Boot、Spring MVC与MyBatis技术解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; Spring框架的核心容器是IoC&#xff08;控制反转&#xff09;容器。它的主要作用是管理对…...

编程新知 2025/7/17 8:16:30

Modbus RTU与Modbus TCP详解指南

目录 1. Modbus协议基础 1.1 什么是Modbus？ 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么？ 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...

编程新知 2025/9/10 17:50:53

算法—栈系列

一&#xff1a;删除字符串中的所有相邻重复项 class Solution { public:string removeDuplicates(string s) {stack<char> st;for(int i 0; i < s.size(); i){char target s[i];if(!st.empty() && target st.top())st.pop();elsest.push(s[i]);}string ret…...

编程新知 2025/10/28 11:37:41

【版本控制】GitHub Desktop 入门教程与开源协作全流程解析

目录 0 引言1 GitHub Desktop 入门教程1.1 安装与基础配置1.2 核心功能使用指南仓库管理日常开发流程分支管理 2 GitHub 开源协作流程详解2.1 Fork & Pull Request 模型2.2 完整协作流程步骤步骤 1: Fork&#xff08;创建个人副本&#xff09;步骤 2: Clone&#xff08;克隆…...

编程新知 2025/10/30 20:56:15