手把手教会你!如何快速在VSCode创建一个VUE项目|前端菜鸟进阶版

这篇具有很好参考价值的文章主要介绍了手把手教会你!如何快速在VSCode创建一个VUE项目|前端菜鸟进阶版。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

对于刚上手的朋友,我们可以先来了解一下什么是vue:

vscode vue框架,技术需要,前端,vscode,vue.js

VUE:渐进式javaScript框架。

什么是JS(JavaScript):我封装好一个函数,这个函数可以给其他人调用,这个就是一个js

什么是框架:框架的规则。

在项目开始创建之前,我们需要做好以下几点准备,具体操作可在官网下载。

前提条件:

  • 已安装 16.0 或更高版本的 Node.js
  • 已搭建好vue脚手架工具
  • 配置好环境变量

那么下面我们开始在VSCode创建一个VUE项目:

1.桌面创建一个空的文件夹,在这里我将它命名为test1

 

 

2.打开VSCode界面,菜单栏-终端-新建终端
 

 

3.在界面底部的终端窗口中输入:npm init vue@latest 

vscode vue框架,技术需要,前端,vscode,vue.js  

4.运行输出下面这些代码,如果你不确定选项具体是什么,这里的y/n问题全部回车跳过即可。 

vscode vue框架,技术需要,前端,vscode,vue.js

 这里我给他的文件命名为:vue-project,自己在创建时可以编辑自己的文件名

5.依照上图 绿色 字体的代码 复制并在终端粘贴运行代码:

执行结果如下:

vscode vue框架,技术需要,前端,vscode,vue.js

6.到这一步,恭喜你!已经创建好项目了。等待几分钟,自动弹出浏览器界面如下图,如果没有自动弹出浏览器窗口,我们可以手动复制图中倒数第三行local的地址,打开浏览器粘贴到地址栏,回车测试我们是否成功创建了vue项目。

vscode vue框架,技术需要,前端,vscode,vue.js

vscode vue框架,技术需要,前端,vscode,vue.js

浏览器出现上图的界面,表示成功创建好一个vue项目啦,现在可以开始你的前端小项目之旅啦。

参考文章:https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application文章来源地址https://www.toymoban.com/news/detail-688213.html

到了这里,关于手把手教会你!如何快速在VSCode创建一个VUE项目|前端菜鸟进阶版的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 全网最详细中英文ChatGPT接口文档(五)30分钟快速入门ChatGPT——手把手示例教程:如何建立一个人工智能回答关于您的网站问题,小白也可学

    This tutorial walks through a simple example of crawling a website (in this example, the OpenAI website), turning the crawled pages into embeddings using the Embeddings API, and then creating a basic search functionality that allows a user to ask questions about the embedded information. This is intended to be a starting point for more sophisticated applicat

    2023年04月17日
    浏览(57)
  • 手把手教你实现一个JavaWeb项目:创建一个自己的网页博客系统(前端+后端)(一)

    一篇博客带你实现一个真正的项目!  先来看看它是什么样式的: 目录: 1、大体步骤🦖:         1、创建Maven项目🦕         2、引入依赖🦕         3、创建必要的目录🦕         4、编写代码🦕         5、打包部署(基于SmartTomcat)🦕         

    2024年02月06日
    浏览(57)
  • IntelliJ IDEA安装教程,三分钟手把手教会,非常简单!

    链接:JDK安装教程 1、进入官网 官网地址:https://www.jetbrains.com/ ​ 2、点击【Developer Tools】开发者工具,选择【IntelliJ IDEA】点击跳转。 ​ 3、来到IntelliJ IDEA界面,点击【Download】跳转到下载页面 ​ 4、然后你会看见旗舰版和社区版两个版本,旗舰版的组件很全面,但是要钱(

    2024年03月14日
    浏览(62)
  • 手把手教会Git分布式系统版本管理工具

    前言 一、Git是什么? 1.1 版本控制器的概念 1.2 Git的强大 1.3 Git的安装 二、Git 基本操作 2.1 创建 Git 本地仓库 2.2 认识⼯作区、暂存区、版本库 2.3 add、commit命令 2.4 Git log命令 2.5 .git文件 index: 暂存区,git add 后会更新该内容。 HEAD: 默认指向 master 分⽀的⼀个指针。 refs/heads/ma

    2024年04月14日
    浏览(55)
  • Socket实现服务器和客户端(手把手教会)

    😎 作者介绍:我是程序员行者孙,一个热爱分享技术的制能工人。计算机本硕,人工制能研究生。公众号:AI Sun,视频号:AI-行者Sun 🎈 本文专栏:本文收录于《网络编程实战》系列专栏,相信一份耕耘一份收获,我会手把手教分享网络编程实战内容,届时可以拳打字节,

    2024年04月12日
    浏览(54)
  • 手把手教会搭建网站详细全过程(从域名到网站部署)

    过年在家,闲的没有什么事做,刚好在之前通过腾讯的学生认证购买了部署了一个轻量应用服务器,可以用来建站。想到可以用自己域名建一个专属网站,做一回站长就好激动 刚刚提到了腾讯的学生认证购的轻量应用服务器,这个挺实惠的,这里推销一波😁。 腾讯轻量应用

    2023年04月08日
    浏览(46)
  • VMware下载到安装Centos7详细教程(手把手教会)

    一、安装前的准备工作 VMware下载官网:VMware 中国 - 交付面向企业的数字化基础 | CN Centos镜像文件:CentOS-7-x86_64-Minimal-2009.iso 二、开始下载安装VMware 1、选择下一步安装  2、选择VMware安装位置 3、完成VMware安装 三、开始安装Centos7 1、打开VMware,点击“创建新的虚拟机”   2、选

    2024年02月09日
    浏览(54)
  • 【VScode】手把手教你如何搭建C/C++开发环境

    目录 1.VScode是什么 2.VScode的下载和安装  安装中文插件 3.VScode配置C/C++开发环境 3.1 下载MinGW-w64 编译器套件 3.2 配置MinGW-w64  3.3 安装C/C++插件 4.在VScode上编写C语言代码并编译成功 4.1打开文件夹 4.2 新建C语言文件,编写C语言代码 4.3设置C/C++编译的选项 4.4 创建执行任务:tasks.

    2023年04月21日
    浏览(54)
  • Python爬虫入门教程!手把手教会你爬取网页数据

    其实在当今社会,网络上充斥着大量有用的数据,我们只需要耐心的观察,再加上一些技术手段,就可以获取到大量的有价值数据。这里的“技术手段”就是网络爬虫。今天就给大家分享一篇爬虫基础知识和入门教程: 爬虫就是自动获取网页内容的程序,例如搜索引擎,Go

    2023年04月26日
    浏览(116)
  • 【初识数据结构】手把手教会你时间复杂度的计算方法

    前言   大家好啊,这里是幸麟 一名普通的大学牲 🧩希望可以不断的进步,因此也一直在学习 如果有写的不好或者写错的地方 欢迎在评论区指正 前言后的小前言 不知道在大家学习算法时有没有遇到这样一种情况,在看大佬题解或者讲解视频时 总能找到一个叫 时间复杂度

    2024年02月09日
    浏览(92)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包