Vue项目的快速搭建

Vue项目的快速搭建

    • 一、下载并安装node.js
    • 二、安装Vue脚手架
    • 三、创建vue项目
    • 四、项目启动
    • 五、VS Code下载安装

一、下载并安装node.js

首先确保已经安装了Node.js。如果没有安装,可以去官网(https://nodejs.org/)下载并安装最新版本的Node.js。( node.js下载地址 )
在这里插入图片描述
下载完成后即可双击下载的 .msi 文件,点击下一步
在这里插入图片描述
若不想安装在C盘,可以将默认地址更改为自己指定的位置。点击下一步,直到点击install,并等待安装完成。
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
安装完成后查看一下环境变量是否配有node.js的路径,没有则配置node.js的环境路径。
在这里插入图片描述
打开cmd窗口检查是否安装成功:node -v(如果显示出了版本号,那么说明安装成功了)
在这里插入图片描述

二、安装Vue脚手架

Vue脚手架是Vue官方提供的标准化开发工具。vue官网:https://cn.vuejs.org/

全局安装@vue/cli (仅第一次搭建环境时执行)

npm install -g @vue/cli

如果出现下载缓慢,可配置npm淘宝镜像:

npm config set registry https://registry.npm.taobao.org

在这里插入图片描述
把cmd关掉,再次打开,输入vue -v,出现如下信息,代表安装完成。
在这里插入图片描述

三、创建vue项目

选择一个你想要创建项目的文件夹,打开控制端执行如下命令:

vue create 项目名

在这里插入图片描述
这里选择默认用vue3直接回车即可,等待项目创建完成。在这里插入图片描述

四、项目启动

创建完项目后,控制端页面会如上图所示,此时我们我们只要按上图提示内容,执行相关命令即可。

cd 项目名 // 进入到该项目的文件目录下
npm run serve  // 启动内置的webback本地热更新开发服务器

在这里插入图片描述
项目启动成功,控制台出现如下提示:
在这里插入图片描述
即可访问本地地址:http://localhost:8080/,即可出现如下界面。
在这里插入图片描述

五、VS Code下载安装

vue前端开发环境一般使用Vs Code,下载地址:https://code.visualstudio.com/download
在这里插入图片描述
下载完成VSCodeUserSetup-x64-1.85.1.exe,傻瓜式安装即可:
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
VS Code 配置中文:安装中文(简体)包:在这里插入图片描述
通过ctrl + shift + p快捷键,搜Configure Display Language:
在这里插入图片描述
选择中文简体:
在这里插入图片描述
重启vs code即可
在这里插入图片描述
vs code 新建终端: ctrl + shift + ` ,输入启动命令,启动vue项目:
在这里插入图片描述

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

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

相关文章

基于STC12C5A60S2系列1T 8051单片机的TM1638键盘数码管模块的数码管显示应用

基于STC12C5A60S2系列1T 8051单片机的TM1638键盘数码管模块的数码管显示应用 STC12C5A60S2系列1T 8051单片机管脚图STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式及配置STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式介绍TM1638键盘数码管模块概述TM1638键盘数码管…

mybatis-传递参数的方式

mybatis 传递参数的7种方法 在实际开发过程中,增删改查操作都要涉及到请求参数的传递,今天这节就集中讲下在mybatis中传递参数的7中方法 单个参数的传递很简单没有什么好将的,这里主要说下多个参数的传递 1、第一种方式 匿名参数 顺序传递…

[electron]窗口 BrowserWindow

优雅的显示窗口 const {app, BrowserWindow} require(electron);function createMainwindow(){const mainwindow new BrowserWindow({x: 300,y: 400,width: 600,height: 600,});mainwindow.loadFile(index.html); }app.on(ready, ()>{createMainwindow(); });对于这样的代…

前端发起请求,后端模型需处理很久,怎样设置前端直接完成请求响应,后端计算完在返回结果给前端?

在这种情况下,可以采用异步处理的方式来解决。具体步骤如下: 前端发起请求:前端向后端发送请求,但是不等待后端处理完成而是立即得到响应。 后端异步处理:后端接收到请求后,不立即进行处理,而是…

Codeforces Round 886 (Div. 4)----->E. Cardboard for Pictures

一,思路: 这题我们可以通过二分 w来直接得到答案,时间复杂度是nlogn的级别,但是这里有个很坑的地方,就是假如你用二分做,会面临报 long long 的问题,但是问题不大,直接用 unsigned …

题目:金三银四求职季:如何脱颖而出

题目:金三银四求职季:如何脱颖而出 引言: 随着春天的脚步渐近,对于许多程序员来说,一年中最繁忙、最重要的面试季节也随之而来。金三银四,即三月和四月,被广大程序员视为求职的黄金时期。在这两…

蓝桥杯倒计时 41天 - KMP 算法

KMP算法 KMP算法是一种字符串匹配算法,用于匹配模式串P在文本串S中出现的所有位置。 例如S“ababac,P“aba”,那么出现的所有位置是13。 在初学KMP时,我们只需要记住和学会使用模板即可,对其原理只需简单理解&#xff…

用Socks5代理游戏,绕过“网络海关”去探险

1. 出海大冒险的开始 在游戏世界,就像在现实生活中一样,有时我们需要越过海洋去探索未知的世界。但是,网络上也有一些“海关”,限制我们访问某些网站或游戏服务器。这就是我们今天要克服的挑战! 2. Socks5代理&#xf…

Django 官网项目 四

内容: 利用HTTP的post方法,更改数据并显示。 创建detail.html文件,来创建POST内容 修改应用的视图文件views.py,vote方法 修改应用的视图文件views.py,results方法。 创建results.html文件。 结果:单…

.NET开源功能强大的串口调试工具

前言 今天大姚给大家分享一款.NET开源的、功能强大的串口调试工具:LLCOM。 工具介绍 LLCOM是一个.NET开源的、功能强大的串口调试工具。支持Lua自动化处理、串口调试、串口监听、串口曲线、TCP测试、MQTT测试、编码转换、乱码恢复等功能。 功能列表 收发日志清晰…

将SpringBoot项目改造成solon项目

solon项目介绍 官网 Java “生态型”应用开发框架:更快、更小、更简单。 启动快 5 ~ 10 倍;并发高 2~ 3 倍; 内存省 1/3 ~ 1/2;打包缩到 1/2 ~ 1/10;同时支持 java8, java11, java17, java21&a…

数据结构学习(二)字符串

字符串 1. 概念 字符串就是特殊的字符数组,字符数组末尾的元素为 ‘\0’。和数组一样可以使用arr[i]或*(arri)来访问元素。 无论是用数组保存字符串(如:char arr[] "Hello,World";),还是用指针…

汉诺塔问题(c++题解)

题目描述 1、一次只许移动一个盘 2、任何时候、任何柱子不允许把大盘放在小盘上面。 3、可使用任一一根立柱暂存圆盘。 问&#xff1a;如何使用最少步数实现n个盘子的移动&#xff1f;打印出具体移动方案。 输入格式 一行一个数n, 1< n < 18 输出格式 输出若干行…

关于HTML5表单验证的方法教程

简介 HTML5表单验证是一种在客户端对用户输入进行验证的方法&#xff0c;可以有效地减少对于服务器端验证的依赖。通过使用HTML5表单验证&#xff0c;可以为用户提供实时的错误提示和更好的用户体验。本教程将介绍如何在HTML5中使用各种验证属性和技术来实现表单验证。 基本表…

flynn发布服务小结

背景 flynn是一个基于容器的paas平台&#xff0c;可以快速的发布运行新的应用&#xff0c;用户只需要提交代码到git上&#xff0c;flynn就会基于提交的代码进行发布和部署&#xff0c;本文就简单看下flynn发布部署的流程 flynn发布服务 1.首先flynn会基于用户的web代码构建一…

Nature 研究亮点(Volume 626 Issue 8001, 29 February 2024)

文章目录 激光雕刻肥皂膜卵细胞的回收系统巴斯克语的起源产后抑郁症的治疗 激光雕刻肥皂膜 研究者&#xff1a;Haitao Xu 和 Yu Zhao&#xff0c;清华大学&#xff0c;北京。 发现&#xff1a;在特定条件下&#xff0c;可以使用激光在肥皂膜上进行雕刻。肥皂膜由洗涤剂分子&am…

AJAX 学习笔记(Day1)

「写在前面」 本文为黑马程序员 AJAX 教程的学习笔记。本着自己学习、分享他人的态度&#xff0c;分享学习笔记&#xff0c;希望能对大家有所帮助。 目录 0 课程介绍 1 AJAX 入门 1.1 AJAX 概念和 axios 使用 1.2 认识 URL 1.3 URL 查询参数 1.4 常用请求方法和数据提交 1.5 HT…

H264的打包,nal,es,pes,pts,dts,ps,ts

编码层次 视频编码层&#xff1a;预测、变换、量化、熵编码等操作slice层&#xff1a;将视频帧分割成若干个编码单元&#xff0c;包含一定数量的宏块&#xff0c;提高编解码的并行性和容错性。NAL层&#xff1a;提升对网络传输和数据存储的亲和性 视频编码层 基准-Baseline …

云计算与大数据课程笔记(一)云计算背景与介绍

如何实现一个简易搜索引擎&#xff1f; 实现一个简易的搜索引擎可以分为几个基本步骤&#xff1a;数据收集&#xff08;爬虫&#xff09;、数据处理&#xff08;索引&#xff09;、查询处理和结果呈现。下面是一个概括的实现流程&#xff1a; 1. 数据收集&#xff08;爬虫&am…

Java实战:Spring Boot项目中如何利用Redis实现用户IP接口限流

引言 在高并发的Web应用中&#xff0c;接口限流是一项至关重要的技术手段&#xff0c;它有助于保护系统资源&#xff0c;防止因瞬间流量高峰导致服务崩溃。本文将深入探讨如何在Spring Boot项目中借助Redis实现用户IP级别的接口限流策略&#xff0c;通过具体的代码示例&#x…