vue前端开发自学,使用yarn脚手架创建vue项目

news2025/1/26 14:16:03

vue前端开发自学,使用yarn脚手架创建vue项目!下面展示一下,如何在本机操作,使用yarn这款脚手架,创建一个vue项目。

第一步,你需要先创建好,即将存档项目的文件夹。我的路径是在:"D:\yarn\wb\manage".

如图,我放在了d盘下面。单独建立了一个文件夹方便对项目的管理。

然后再命令行模式下,进入该文件夹。

如图,我已经进入这个文件夹里面了。

如图,你可以使用命令“vue -V”来查看一下,当前你使用的cli的版本情况。

我的版本是5.0.8.

有些公司里面可能使用的4.0的版本。

接下来就是创建项目了。非常简单。使用命令:“vue create my-app”。

声明:项目的名字,不能使用驼峰命名法!会报错的。你可以使用中横,或者下划线。

它会提示你,让你选择vue的版本。默认vscode开发环境,会自动选择到vue3.、你可以使用键盘的上下箭头,控制,我选择了vue2版本。

之后,它还会再次提示你,让你选择,使用哪个脚手架。我们肯定是勾选yarn。来管理项目啊!

如图,在你配置参数后,它会自动执行安装依赖。

success。绿色的。当你看见,下面出现2行蓝色的内容,就说明安装初始化完毕了。

如图,my-app。就出现了。里面就是初始化之后的vue项目了。

后续执行,就是,进入该文件夹。然后使用yarn serve。指令,执行启动它。

里面初始化的内容,其实很少。如图。就仅仅几个文件夹而已。

如图,启动项目打开了本地浏览器,看见这个页面。说明你的本地vue项目,启动成功了。

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

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

相关文章

【Linux驱动】设备树中指定中断 | 驱动中获得中断 | 按键中断实验

🐱作者:一只大喵咪1201 🐱专栏:《Linux驱动》 🔥格言:你只管努力,剩下的交给时间! 目录 🏀在设备树中指定中断🏀代码中获得中断🏀按键中断⚽驱动…

spring boot mybatis plus mapper如何自动注册到spring bean容器

##Import(AutoConfiguredMapperScannerRegistrar.class) ##注册MapperScannerConfigurer ##MapperScannerConfigurer.postProcessBeanDefinitionRegistry方法扫描注册mapper ##找到mapper候选者 ##过滤mapper 类 候选者 ##BeanDefinitionHolder注册到spring 容器

JVM基础(4)——JVM存活判定算法

作者简介:大家好,我是smart哥,前中兴通讯、美团架构师,现某互联网公司CTO 联系qq:184480602,加我进群,大家一起学习,一起进步,一起对抗互联网寒冬 学习必须往深处挖&…

ArcGIS Pro中怎么加载在线地图

当我们在制图的时候,有的时候需要加载在线地图,在ArcGIS Pro中加载在线地图的方式有很多,这里为大家介绍一下加载的方法,希望能对你有所帮助。 加载底图 在菜单栏上选择地图,点击底图,可以看到所有可加载…

记录下载安装rabbitmq(Linux) 并整合springboot--详细版(全)

下载rabbitmq(Linux): erlang压缩包: https://share.weiyun.com/TGhfV8eZ rabbitMq-server压缩包: https://share.weiyun.com/ZXbUwWHD (因为RabbitMQ采用 Erlang 实现的工业级的消息队列(MQ)服务器&#…

【Nuxt3】Nuxt3脚手架nuxi安装项目和项目目录介绍

简言 最近学了Nuxt3,并使用它创建了自己的小网站。记录下学习到的nuxt3内容。 Nuxt3官网 Nuxt 是一个免费的开源框架,可通过直观、可扩展的方式使用 Vue.js 创建类型安全、高性能、生产级的全栈 Web 应用程序和网站。 支持SSR、SPA、建立静态网站,也可以…

C++ 图形界面学习效果及代码

#include <stdio.h> #include<conio.h> #include <stdlib.h> #include<graphics.h> #define WIDTH 800 #define HEIGHT 480 #define SIZE 20 int main() {const char* str "人生就是由欲望不满足而痛苦和满足之后无趣这两者所构成";const …

【征服redis1】基础数据类型详解和应用案例

博客计划 &#xff0c;我们从redis开始&#xff0c;主要是因为这一块内容的重要性不亚于数据库&#xff0c;但是很多人往往对redis的问题感到陌生&#xff0c;所以我们先来研究一下。 本篇&#xff0c;我们先看一下redis的基础数据类型详解和应用案例。 1.redis概述 以mysql为…

性能测试之全链路压测正确优化思路

性能测试之全链路压测的优化需要从多个方面入手&#xff0c;包括明确压测目标、模拟真实场景、选择合适的工具和技术、合理设计压测方案、分析性能瓶颈以及持续监控和改进等。通过这些措施的实施&#xff0c;可以有效地提高系统的性能和稳定性&#xff0c;为用户提供更好的服务…

ffmpeg解码音频planar模式和packed模式

转载&#xff1a;原文地址&#xff1a; FFmpeg连载4-音频解码-阿里云开发者社区ffmpeg连载系列https://developer.aliyun.com/article/1197520 转载的&#xff0c;看到了&#xff0c;留着备份一下 导读 前面我们介绍了使用FFmpeg解码视频&#xff0c;今天我们使用FFmpeg解码音…

MySQL的多表数据记录查询笔记

关系数据操作 合并查询数据记录 在MySQL中通过关键字UNION来实现并操作&#xff0c;即可以通过其将多个SELECT语句的查询结果合并在一起组成新的关系。 两张表&#xff0c;表1 和表2 带有关键字UNION的合并操作 关键字UNION会把查询结果集直接合并在一起&#xff0c;同时将…

现代控制理论基础

在学习卡尔曼滤波、粒子滤波、隐马尔可夫模型时候&#xff0c;经常会提到状态方程的概念&#xff0c;这边联想到当时学习过的一门课程现代控制理论&#xff0c;这边就简单回顾一下吧。在回顾之前&#xff0c;串联下高等数学中微分方程的知识点。 一. 微分方程 高等数学上册第…

今年的年终奖开了个寂寞

大家好啊&#xff0c;我是董董灿。 年底了&#xff0c;又到了一些公司开年终奖的时候了&#xff0c;往年这个时候&#xff0c;网上都是争相"炫富"的声音。 还记得去年某公司&#xff0c;在春节前一下子开出了十几个月的年终奖&#xff0c;让我羡慕了好长时间。 可…

JAVAEE——request对象(三)

1. request对象 1.1 知识点 &#xff08;1&#xff09;乱码问题的两种解决方式 &#xff08;2&#xff09;post和get提交的区别 &#xff08;3&#xff09;request接收同名参数的问题 1.2 具体内容 使用request接收参数 <%page contentType"text/html; charsetut…

深入理解 go chan

go 里面&#xff0c;在实际程序运行的过程中&#xff0c;往往会有很多协程在执行&#xff0c;通过启动多个协程的方式&#xff0c;我们可以更高效地利用系统资源。 而不同协程之间往往需要进行通信&#xff0c;不同于以往多线程程序的那种通信方式&#xff0c;在 go 里面是通过…

C++ Primer 6.3 返回类型和return语句 知识点+练习题

C Primer 6.3 返回类型和return语句 无返回值函数有返回值的函数两个错误值是如何被返回的返回类类型的函数和调用运算符引用返回左值列表初始化返回值主函数main的返回值返回数组指针 递归练习题疑问待更新 无返回值函数 用在返回值类型为void的函数中&#xff0c;可以不写re…

01章【JAVA开发入门】

计算机基本概念 计算机组成原理 计算机组装 计算机&#xff1a;电子计算机&#xff0c;俗称电脑。是一种能够按照程序运行&#xff0c;自动、高速处理海量数据的现代化智能电子设备。由硬件和软件所组成&#xff0c;没有安装任何软件的计算机称为裸机。常见的形式有台式计算机、…

浅析五种 React 组件设计模式

作为一名 React 开发者&#xff0c;你可能会面临下面几个问题&#xff1a; 如何构建一个高复用度性的组件&#xff0c;使其适应不同的业务场景&#xff1f;如何构建一个具有简单 API的组件&#xff0c;使其易于使用&#xff1f;如何构建一个在 UI 和功能方面具有可扩展性的组件…

Vue3-TS中的接口-泛型-自定义类型

1首先一般在src下新建types文件夹&#xff0c;用来存放接口类型 2定义一个接口&#xff0c;用于限制person对象的具体属性 当需要用这个类型形成数组时&#xff0c;有2种写法 export type Persons Array<PersonInter> export type Persons PersonInter[] 3在文件中使…

检索增强生成技术(RAG)深度优化指南:原理、挑战、措施、展望

ChatGPT、Midjourney等生成式人工智能&#xff08;GenAI&#xff09;在文本生成、文本到图像生成等任务中表现出令人印象深刻的性能。然而&#xff0c;生成模型也不能避免其固有的局限性&#xff0c;包括产生幻觉的倾向&#xff0c;在数学能力弱&#xff0c;而且缺乏可解释性。…