Vue开发实例(一)Vue环境搭建第一个项目

news2024/11/17 19:36:29

Vue环境搭建&第一个项目

  • 一、环境搭建
  • 二、安装Vue脚手架
  • 三、创建Vue项目

一、环境搭建

  1. 下载方式从官网下载:http://nodejs.cn/download/
    在这里插入图片描述

建议下载v12.16.0版本以上的,因为版本低无法创建Vue的脚手架

  1. 检验是否安装成功
    在这里插入图片描述
  2. 配置环境变量
    • 新增NODE_HOME,值为:D:\vue\nodejs
    • 修改PATH并在最后添加:;%NODE_HOME%;%NODE_HOME%\node_global;
    • 到cmd下执行命令
      npm config set prefix "D:\vue\nodejs\node_global"
      npm config set cache "D:\vue\nodejs\node_cache"

Mac终端自行配置,可以使用Homebrew安装对应内容

  1. 更改镜像源

    • 淘宝镜像源:npm config set registry https://registry.npm.taobao.org
    • 华为镜像源:npm config set registry https://repo.huaweicloud.com/repository/npm/
    • 默认镜像源:npm config set registry https://registry.npmjs.org/

    查看镜像设置情况:npm get registry
    在这里插入图片描述

我默认使用的是华为的镜像源

二、安装Vue脚手架

npm install -g @vue/cli

可以在次之前安装一下cnpm

npm install -g cnpm

等待安装完成

三、创建Vue项目

切换到对应自己的目录

vue create vue-test

进入创建配置的选择界面
在这里插入图片描述
选择自己的对应的框架,或者选择Manually select features,自己进行配置

等待创建完成
在这里插入图片描述
创建完成
在这里插入图片描述
创建完成后,目录结构
在这里插入图片描述

进入项目目录,启动项目

cd vue-test
npm run serve

在这里插入图片描述

打开浏览器输入地址,启动完成之后有提示的:http://localhost:8080/
在这里插入图片描述
到此为止,vue初始化的项目就搭建好了~

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

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

相关文章

termux上安装Python

Termux是一款Android平台下的终端模拟器和Linux环境应用,它允许用户在移动设备上访问Linux命令行界面,以便使用命令行工具、脚本、开发环境等功能。 要在Termux上安装Python,请按照以下步骤进行操作: 一,下载termux …

Linux 开发工具vim、gcc/g++、makefile

目录 Linux编辑器-vim 1. 基本概念 2. 基本操作 3. 正常模式命令集 4. 末行模式命令集 5. 其他操作 6. 简单vim配置 Linux编译器-gcc/g 1、基本概念 2、程序翻译的过程 3. gcc如何完成程序翻译 4、动静态库 Linux项目自动化构建工具-make/Makefile 1、背景 2、…

Springboot+vue的医药管理系统(有报告)。Javaee项目,springboot vue前后端分离项目。

演示视频: Springbootvue的医药管理系统(有报告)。Javaee项目,springboot vue前后端分离项目。 项目介绍: 采用M(model)V(view)C(controller)三层…

C#,基于密度的噪声应用空间聚类算法(DBSCAN Algorithm)源代码

1 聚类算法 聚类分析或简单聚类基本上是一种无监督的学习方法,它将数据点划分为若干特定的批次或组,使得相同组中的数据点具有相似的属性,而不同组中的数据点在某种意义上具有不同的属性。它包括许多基于差分进化的不同方法。 E、 g.K-均值…

Vue开发实例(十)Tabs标签页打开、关闭与路由之间的关系

创建标签页 一、创建标签页二、点击菜单展示新标签页1、将标签数据作为全局使用2、菜单点击增加标签页3、处理重复标签4、关闭标签页 三、点击标签页操作问题1:点击标签页选中菜单进行高亮展示问题2:点击标签页路由也要跳转 四、解决bug 先展示最终效果 …

Bililive-go 实现直播自动监控录制

前言 最近有直播录制的需求,但是自己手动录制太麻烦繁琐,于是用了开源项目Bililive-go进行全自动监控录制,目前这个项目已经有3K stars了 部署 为了方便我使用了docker compose 部署 version: 3.8 services:bililive:image: chigusa/bilil…

B082-SpringCloud-Eureka

目录 微服务架构与springcloud架构演变为什么使用微服务微服务的通讯方式架构的选择springcloud概述场景模拟之基础架构的搭建模拟微服务之间的服务调用目前远程调用的问题 eureka注册中心的作用注册中心的实现服务提供者注册到注册中心 springcloud基于springboot 微服务架构与…

独立游戏《星尘异变》UE5 C++程序开发日志1——项目与代码管理

写在前面:本日志系列将会向大家介绍在《星尘异变》这款模拟经营游戏,在开发时用到的与C相关的泛用代码与算法,主要记录UE5C与原生C的用法区别,以及遇到的问题和解决办法,因为这是我本人从ACM退役以后第一个从头开始的项…

Windows操作系统中各种功能、快捷键

目录 引言一、系统1.任务管理器(当前进程属性)2.画图板3.计算器4.CMD命令行窗口5.控制面板6.记事本7.写字板 二、浏览器1.打开开发者工具2.页面搜索 三、AcWing1.替换2.对多处进行相同操作3.光标变为下划线 引言 由于本专业是计算机专业,所以…

力扣 分割回文串

输出的是不同的分割方案 class Solution { public:vector<vector<bool>>flag;vector<string>ans;vector<vector<string>>nums;void dfs(string &s,int i){int ns.size();if(in){i表示s长度&#xff0c;等于即全部分割完毕nums.push_back(ans…

力扣hot100:42.接雨水

一、从单个水柱本身考虑 下标为i的水柱能接的雨水&#xff0c;取决于它左边最高的水柱 和 右边最高的水柱的最小值&#xff08;包括它本身&#xff09;。 为了理解这一性质&#xff0c;我们可以这样想象&#xff1a;取出左边最高和最边最高的水柱&#xff0c;将其比作一个碗的边…

python封装,继承,复写详解

目录 1.封装 2.继承 复写和使用父类成员 1.封装 class phone:__voltage 0.5def __keepsinglecore(self):print("单核运行")def callby5g(self):if self.__voltage > 1:print("5g通话开启")else:self.__keepsinglecore()print("不能开启5g通…

c++高阶数据结构 二叉搜索树的实现

二叉搜索树 二叉搜索树二叉搜索树的基本概念二叉搜索树的查找方法 二叉搜索树的代码实现二叉搜索树的结点二叉树的构造函数 析构函数二叉排序树的插入二叉树的删除二叉树的拷贝构造递归删除版本 完整代码 二叉搜索树 二叉搜索树的基本概念 二叉搜索树的特点&#xff1a; 左子…

代码随想录算法训练营第八天

344. 反转字符串 方法&#xff1a; 方法一&#xff1a; 直接用reverse函数 注意&#xff1a; 代码&#xff1a; class Solution { public:void reverseString(vector<char>& s) {return reverse(s.begin(), s.end());} };运行结果&#xff1a; 方法&#xff1…

一份简单的前端开发指南

文章目录 一、HTML1、表格2、常见标签3、行内、块级4、行内块级元素 二、CSS1、三种样式2、链接样式3、浮动4、清除浮动5、伪类&#xff0c;伪元素6、position7、后代选择器8、弹性布局 三、JavaScripts1、null和undefined的区别2、var let const3、原生数据类型4、双等和三等5…

C++入门和基础

目录 文章目录 前言 一、C关键字 二、命名空间 2.1 命名空间的定义 2.2 命名空间的使用 2.3 标准命名空间 三、C输入&输出 四、缺省参数 4.1 缺省参数的概念 4.2 缺省参数的分类 五、函数重载 5.1 函数重载的简介 5.2 函数重载的分类 六、引用 6.1 引用的…

Linux和Windows操作系统在腾讯云幻兽帕鲁服务器上的内存占用情况如何?

Linux和Windows操作系统在腾讯云幻兽帕鲁服务器上的内存占用情况如何&#xff1f; 对于Linux操作系统&#xff0c;有用户分享了个人最佳实践来解决内存问题&#xff0c;包括使用Linux脚本让服务器每天重启一次&#xff0c;以及建议在不需要时尽量减少虚拟内存的使用。此外&…

【React 报错】—Remove untracked files, stash or commit any changes, and try again.

【React 报错】—Remove untracked files, stash or commit any changes, and try again. 在react项目中通过.less文件进行样式定义&#xff0c;先暴露webpack配置文件&#xff0c;执行命令&#xff1a;yarn eject 或 npm run eject&#xff0c;报错如下&#xff1a; 原因是因…

暗黑大气MT苹果CMS MT主题源码-PC版适用于苹果CMS V10

苹果CMS MT主题是一款多功能的主题&#xff0c;适用于苹果CMS V10的暗黑大气风格。 地 址 &#xff1a; runruncode.com/houtai/19704.html 初次使用说明&#xff1a; 在后台设置中&#xff0c;选择MT主题&#xff0c;并在模板目录中填写HTML。 后台地址为&#xff1a;MT主题…

Facebook元宇宙大观:数字化社交的未来愿景

近年来&#xff0c;元宇宙&#xff08;Metaverse&#xff09;概念备受关注&#xff0c;被认为是数字化社交的未来趋势。作为全球领先的社交媒体平台之一&#xff0c;Facebook正积极探索元宇宙的发展路径&#xff0c;构想着一个数字化社交的未来愿景。在本文中&#xff0c;我们将…