快速构建Vue2/Vue3项目

news2024/12/24 21:43:57

1.创建一个空文件夹

我创建了一个vue的空文件夹

2.使用vscode打开

3.终端输入npm init -y

npm init -y

含义是项目初始化

运行后会出现一个文件:package.json

在运行第四步前,我的项目出现的问题!!!

就是我的文件夹名称叫:vue,导致了执行第四步命令时一直出错。

因为vue是关键字导致了名称冲突。

解决方法是更换名称,删除package.json文件,重新从第三步开始,再执行第四步就可以了

自己踩得坑,希望能帮助到你们。

4.终端输入npm install vue

npm install vue

注意:不知道版本的话,默认下载的是最新版本(目前最新版本是vue3),如果想要指定版本,在vue后使用@加版本,例如:npm install vue@2

根据自身需求创建。

我以创建vue2为例。

5.编写简单的vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <h1>{{name}}, 你好</h1>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>


    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                name: "张三"
            }
        });
    </script>
</body>
</html>

6.运行

再分享一个我踩过的坑。

new Vue的时候,我把“v”写成了小写,就导致一直没有效果,找了半天错误才发现要大写“V”。

要注意检查哦!

7.页面效果

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

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

相关文章

Go——运算符,变量和常量,基本类型

一.运算符 Go语言内置的运算符有&#xff1a; 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 1.1 算术运算符 注意&#xff1a;(自增)和--(自减)在go语言中是单独的语句&#xff0c;并不是运算符。 1.2 关系运算符 1.3 逻辑运算符 1.4 位运算符 位运算符对整数在内存…

【每日八股】Java基础经典面试题2

前言&#xff1a;哈喽大家好&#xff0c;我是黑洞晓威&#xff0c;25届毕业生&#xff0c;正在为即将到来的秋招做准备。本篇将记录学习过程中经常出现的知识点以及自己学习薄弱的地方进行总结&#x1f970;。 本篇文章记录的Java基础面试题&#xff0c;适合在学Java基础的小白…

给多篇文章注音 只要拼音不要汉字 怎么办?快看过来 小编帮你解决

在日常办公和学习中&#xff0c;我们有时需要对Word文档中的文字进行拼音标注&#xff0c;特别是当我们需要教授儿童识字或者制作一些特殊的文档时。然而&#xff0c;很多时候&#xff0c;我们可能只需要拼音而不需要汉字本身。那么&#xff0c;如何在Word中给文字注音&#xf…

【你也能从零基础学会网站开发】Web建站之javascript入门篇 认识Document文档对象

&#x1f680; 个人主页 极客小俊 ✍&#x1f3fb; 作者简介&#xff1a;程序猿、设计师、技术分享 &#x1f40b; 希望大家多多支持, 我们一起学习和进步&#xff01; &#x1f3c5; 欢迎评论 ❤️点赞&#x1f4ac;评论 &#x1f4c2;收藏 &#x1f4c2;加关注 Document对象 …

Rust异步编程 Async Await 入门

Rust Async Await 入门 在本文中&#xff0c;我们将仔细研究 Rust 中的异步编程。到目前为止&#xff0c;我对 Rust 异步的体验主要是从 Stack Overflow 复制代码。本文旨在帮助您了解什么是异步代码以及如何有效地使用它。 什么是异步代码&#xff1f; 要了解什么是异步代码…

openGauss使用BenchmarkSQL进行性能测试(上)

一、前言 本文提供openGauss使用BenchmarkSQL进行性能测试的方法和测试数据报告。 BenchmarkSQL&#xff0c;一个JDBC基准测试工具&#xff0c;内嵌了TPC-C测试脚本&#xff0c;支持很多数据库&#xff0c;如PostgreSQL、Oracle和Mysql等。 TPC-C是专门针对联机交易处理系统…

金融知识分享系列之:MACD指标精讲

金融知识分享系列之&#xff1a;MACD指标精讲 一、MACD指标二、指标原理三、MACD指标参考用法四、MACD计算步骤五、MACD分析要素六、根据快线DIF位置判断趋势七、金叉死叉作为多空信号八、快线位置交叉信号九、指标背离判断行情反转十、差离值的正负十一、差离值的变化十二、指…

K 近邻算法

为什么学习KNN算法 KNN是监督学习分类算法&#xff0c;主要解决现实生活中分类问题。 &#xff08;1&#xff09;首先准备数据&#xff0c;可以是视频、音频、文本、图片等等 &#xff08;2&#xff09;抽取所需要的一些列特征&#xff0c;形成特征向量 &#xff08;3&…

iPhone, Android 手机是如何收到推送通知的?

本文转自 公众号 ByteByteGo&#xff0c;如有侵权&#xff0c;请联系&#xff0c;立即删除 iPhone, Android 手机是如何收到推送通知的&#xff1f; 我们的手机或电脑是如何收到推送通知的&#xff1f; 通常我们可以使用消息解决方案 Firebase 来支持通知推送。下图显示了 Fi…

云数据库Redis配置用户名密码连接

一般情况,生产环境6379端口是禁止对外开放的, 所有用户名密码可以不设置。 但是如果有格鲁需求,需要开放redis公网访问,建议端口限制IP,并设置用户密码 spring中配置 阿里云数据库 云数据库 Redis_缓存数据库_高并发_读写分离-阿里云 添加白名单 申请公网访问地址 配…

2024年共享WiFi项目到底怎么样?

共享WiFi项目是近年来兴起的一种新型商业模式&#xff0c;商家通过在自己店铺升级wifi链接模式使其数字化&#xff0c;让用户能够方便地连接到互联网&#xff0c;提升到店体验&#xff0c;增加线上引流。这一项目的出现&#xff0c;为人们的生活带来了诸多便利&#xff0c;同时…

基于SpringBoot的“实习管理系统”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“实习管理系统”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统首页界面图 学生注册界面图 后台登录界面图 …

1.Python是什么?——《跟老吕学Python编程》

1.Python是什么&#xff1f;——《跟老吕学Python编程》 Python是一种什么样的语言&#xff1f;Python的优点Python的缺点 Python发展历史Python的起源Python版本发展史 Python的价值学Python可以做什么职业&#xff1f;Python可以做什么应用&#xff1f; Python是一种什么样的…

LoadBalancer负载均衡服务调用

LoadBalancer负载均衡服务调用 1、Ribbon目前也进入维护 ​ Spring Cloud Ribbon是基于Netflix Ribbon实现的一套客户端 负载均衡的工具。 ​ 简单的说&#xff0c;Ribbon是Netflix发布的开源项目&#xff0c;主要功能是**提供客户端的软件负载均衡算法和服务调用。**Ribbon…

自动备份文件:守护数据安全新利器

随着信息化时代的到来&#xff0c;文件已经成为我们日常生活和工作中不可或缺的一部分。然而&#xff0c;数据丢失或损坏的风险也随之而来&#xff0c;因此自动备份文件的重要性愈发凸显。自动备份文件不仅可以保护我们的宝贵数据&#xff0c;还可以在意外发生时迅速恢复&#…

Seata源码流程图

1.第一阶段分支事务的注册 流程图地址&#xff1a;https://www.processon.com/view/link/6108de4be401fd6714ba761d 2.第一阶段开启全局事务 流程图地址&#xff1a;https://www.processon.com/view/link/6108de13e0b34d3e35b8e4ef 3.第二阶段全局事务的提交 流程图地址…

Python | Logger通用日志记录器

一、代码 通用日志记录器&#xff0c;可以输出不同颜色的记录到控制台&#xff0c;并输出到指定文件夹下可以在不同py文件中同时使用&#xff0c;共用同一个记录器适用window或linux平台 #!/usr/bin/env python # -*- coding: utf-8 -*- import os import inspect import log…

镭速教你如何解决大数据量串行处理的问题

大数据的高效处理成为企业发展的关键。然而&#xff0c;大数据量串行处理的问题常常困扰着许多企业&#xff0c;尤其是在数据传输方面。本文将探讨大数据量串行处理的常见问题&#xff0c;并介绍企业常用的处理方式&#xff0c;最后重点阐述镭速如何提供创新解决方案&#xff0…

Claude3发布,将取代ChatGPT4?

目录标题 前言Claude简介Claude 3 的能力高级推理视觉分析代码生成多语言处理 性能比较 前言 一夜之间&#xff0c;全球最强 AI 模型易主。大模型行业再次经历变革。OpenAI 最大的竞争对手 Anthropic 发布了新一代 AI 大模型系列 ——Claude 3。该系列包含三个模型&#xff0c…

鸿蒙开发之MPChart图表开发

一、简介 随着移动应用的不断发展,数据可视化成为提高用户体验和数据交流的重要手段之一,因此需要经常使用图表,如折线图、柱形图等。OpenHarmony提供了一个强大而灵活的图表库是实现这一目标的关键。 在 ohpm 中心仓(https://ohpm.openharmony.cn/)中,汇聚了众多开发者…