vue从0开始的项目搭建(含环境配置)

news2024/11/22 20:30:33

一、环境准备

     下载node.js + 检查node.js版本 + 替换npm下载源

1.下载node.js:  Node.js — 在任何地方运行 JavaScript (nodejs.org)

2.查看版本:   windows+r输入cmd进入输入node -v命令查看版本号是否出现确认是否安装

2.替换npm下载源:   npm config set registry https://registry.npmmirror.com

3.查看是否安装成功  npm -v

二、搭建项目

1.在电脑上新建一个文件夹作为vue项目的文件夹, 在此文件夹中空白处按shift键同时点击鼠标右键,选择在此处打开Powershell窗口 

2.在命令行中输入以下命令: npm create vue@latest    回车,出现下图这种一直回车

一直回车到新的需要输入为止,如下图

3.进入目录 cd vue-project ,执行 npm install 安装依赖

4.然后执行 npm run dev 运行项目

5.下图网址即是进入项目链接

6.当然还有一种打开方式,是我们最常用的

右键文件夹,选择vscode打开(如果没有vscode可以查看这个链接  点我  查看解决方案 )

然后ctrl+j 打开终端,输入npm run dev即可运行 

注意:如果报错如下图

那么先右键最顶部文件夹+打开终端输入npm run dev即可

下次给大家讲解进去之后的基础配置与作用,我是小辉,请多多关照!! 

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

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

相关文章

深入Semantic Kernel:插件开发与实践应用(进阶篇)

文章目录 一、引言二、开发Semantic Kernel插件三、实战3.1 时间信息插件3.2 小部件工厂插件3.3 初始化Semantic Kernel实例3.4 四个实战示例3.4.1 模型幻觉3.4.2 给模型提供时间信息3.4.3 AI自动调用函数3.4.4 AI自动调用和使用枚举 四、结论 一、引言 在上一篇入门文章《探索…

vue3.x系列之v-model的使用技巧及面试高频问题

在前面的一篇文章中&#xff0c;我们分析了v-model在v2版中的用法。这次我们分析下在v3中的使用技巧。学习之前&#xff0c;请忘记之前的v2语法&#xff0c;现在的更加简洁易用。 组件上面的v-model 在v3.4版之前的写法如下 子组件Child.vue <!-- Child.vue --> <…

MobileViews: A Large-Scale Mobile GUI Dataset论文学习

这一片论文的工作主要集中在探索app上。 “ 设计#1&#xff1a;LLM增强型自动应用爬虫。为了提高应用程序遍历效率&#xff0c;我们引入了MobileViews Crawler&#xff0c;它使用固定的交互规则来处理繁琐的应用程序操作&#xff0c;LLM增强了其处理复杂UI状态的能力。在这个…

[C++ 核心编程]笔记 4.1.2 struct和class的区别

4.1.2 struct和class的区别 在C中 struct和class唯一的区别就在于 默认的访问权限不同 区别: struct 默认权限为公共class 默认权限为私有 #include<iostream> using namespace std;class C1 {int m_A;//默认私有 }; struct C2 {int m_A;//默认共有 };int main() {//s…

Android -- [SelfView] 多动画效果图片播放器

Android – [SelfView] 多动画效果图片播放器 效果&#xff08;录制的有点卡&#xff09; 1. 引用&#xff1a; <com.nepalese.virgolib.widget.image.BaseImageViewandroid:id"id/base_image"android:layout_width"match_parent"android:layout_heigh…

2024让我爱不释手的Mac清理神器CleanMyMac X4.15.8免费版

大家好&#xff0c;今天我要和大家分享一款让我爱不释手的Mac清理神器——CleanMyMac X。作为一个长期使用Mac的用户&#xff0c;我深知电脑在长时间使用后容易出现卡顿、存储空间不足等问题。而自从我遇到了CleanMyMac X&#xff0c;这些问题都迎刃而解啦&#xff01; #### 一…

实现一个进度条对话框

效果如下&#xff1a; 点击按钮后开启1个线程模拟加载什么东西&#xff0c;同时弹出1个进度条对话框&#xff0c;进度条达到最大值后&#xff0c;进度条对话框慢慢变透明然后消失 关键点是我们要在进度条类中添加1个槽函数&#xff0c;在这个槽函数中设置进度条的值 代码如下…

高校学科竞赛平台:SpringBoot实现的高效开发流程

3系统分析 3.1可行性分析 通过对本高校学科竞赛平台实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本高校学科竞赛平台采用SSM框架&#xff0c;JAVA作为开发语…

【Java】集合中单列集合详解(一):Collection与List

目录 引言 一、Collection接口 1.1 主要方法 1.1.1 添加元素 1.1.2 删除元素 1.1.3 清空元素 1.1.4 判断元素是否存在 1.1.5 判断是否为空 1.1.6 求取元素个数 1.2 遍历方法 1.2.1 迭代器遍历 1.2.2 增强for遍历 1.2.3 Lambda表达式遍历 1.2.4 应用场景 二、…

Autosar Dcm配置-App到Boot的跳转及1002回复配置及实现-基于ETAS软件

文章目录 前言App软复位的实现Dcm配置BswM配置BswMModeRequestPortBswMModeConditionBswMLogicalExpressionBswMActionListApp回复1002的实现Dcm配置代码实现App回NRC78的实现Dcm配置代码实现总结前言 在软件刷写流程中,上位机(诊断仪)发送1002后,APP检查允许跳转boot后,在…

python脚本处理--批量压缩解压文件(zip、rar) / 读取txt文件并在txt每行文件后面增加内容

一、批量压缩、解压文件 os库是为了监测生成的文件夹是否已存在。主要的库是zipfile&#xff0c;它提供了有关windows下的文件/文件夹的压缩、解压的函数。 压缩、解压函数及整体代码如下&#xff1a; import os import zipfiledef Compress_path_zip(path_all):path_all_list…

接口测试-day3-jmeter-3http请求默认值

postman只需要写上请求方式和url即可&#xff0c;但是在jmeter中则是分开写的。 对于同一个项目的接口而言&#xff1a;他们的协议、域名、端口号、内容编码都是一样的。这样就相当于做了重复的工作。 不一样的地方只是在路径。不同的页面的路径是不同的。 如果我们设置了相…

文心智能体:我的旅游小助手

文章目录 一、全球旅游推荐官&#xff08;旅游小帮手介绍&#xff09;二、为什么会创建全球旅游推荐官呢&#xff1f;1.创意灵感2.实现思路 三、开发步骤和方法四、调试方法和总结五、探索AI未来&#xff0c;开启无限可能&#xff1a;文心智能体平台&#xff0c;智能创新的领航…

6.Pytest快速上手

1.安装pytest pip install pytest 2.编写测试用例 1.test_开头的文件 2.test_开头的函数 3.Test_开头的类 4.用例中应该有断言 def test_cofool():assert "浩宇" "真帅" 3.执行测试用例 1.用命令行启动 pytest 2.用代码启动 import pytest#对用例进…

hadoop全分布式搭建(三台虚拟机,一个主节点,两个从节点)

根据尚硅谷哔哩哔哩视频搭建&#xff1a;bilibili.com/video/BV1Qp4y1n7EN/ 安装虚拟机教程可参考&#xff1a;VMware虚拟机 安装 Centos7(linux)&#xff08;新手超详细教程&#xff09;_vmware安装centos7教程-CSDN博客 集群配置如下&#xff1a; 一、先配置一台虚拟机hadoo…

【详细版教程】vue-cli 卸载(卸载不了)vue2.x.x版本卸载不了,无法更新版本的解决方案

今天新建vue的项目时&#xff0c;遇到以下问题 vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6. You may want to run the following to upgrade to Vue CLI 3: 官网给出的解决方案&#xff1a; npm uninstall -g vue-cli npm install -g vue/…

springcloud之服务提供与负载均衡调用 Eureka

前言 提供一个基于Eurka的服务注册中心&#xff0c;两个服务提供者之后分别使用Ribbon、Fegin方式进行调用&#xff0c;测试负载均衡。 服务提供者Service Provider 本质上是一个 Eureka Client&#xff0c;它在服务启动时&#xff0c;会调用服务注册方法&#xff0c;向 Eurek…

Vue:若依部门数据权限设置

目录 一、修改菜单树二、后台修改三、新建用户配置数据权限 一、修改菜单树 修改菜单树&#xff0c;增加权限字符system:user:list&#xff0c;权限字符根据自己后台数查询的权限判断 二、后台修改 在Mapper层增加DataScope(deptAlias "sys_dept")注解&#xff0c…

Unity中搜索不到XR Interaction Toolkit包解决方法

问题&#xff1a; 针对Unity版本2020.3在中PackageManager可能搜素不到XR Interaction Toolkit包 在Package Manager中未显示XR Interaction Toolkit包 解决方法&#xff1a; Package manager左上角&#xff0c;点加号&#xff0c;选择 Add package from git URL..&#xff0c;…

动力电池SOC估算方法

1. SOC介绍 电池的荷电状态SOC反映电池的剩余容量状况&#xff0c;即在一定的放电倍率下&#xff0c;当前电池的剩余容量与总容量的比值。 为了充分发挥电池性能和提高安全性&#xff0c;需要准确估算电池SOC。动力电池在使用过程中表现的高度非线性提高了SOC估算的难度&#…