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

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.rhkb.cn/news/267712.html

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

相关文章

chrome选项页面options page配置

options 页面用以定制Chrome浏览器扩展程序的运行参数。 通过Chrome 浏览器的“工具 ->更多工具->扩展程序”,打开chrome://extensions页面,可以看到有的Google Chrome扩展程序有“选项Options”链接,如下图所示。单击“选项Options”…

车载测试_UDS诊断:功能寻址、物理寻址

车载项目讲解 简历修改优化 模拟面试 面试录音辅导 预约面试技巧 面试一对一在线协助 车载入职技术支持三个月 诊断三要素:请求/肯定响应/否定响应(诊断服务失败或者无法完成)。 服务可以诊断通信管理请求、数据请求、故障代码请求、输入/输出…

SpringBoot约定大于配置

什么是约定大于配置 "约定大于配置"(Convention Over Configuration)是一种理念,旨在通过默认约定和规则来减少开发人员需要做的配置工作。在Spring Boot框架中,这一原则得到了充分应用,帮助开发者更快地构…

使用Spark探索数据

需求分析 使用Spark来探索数据是一种高效处理大规模数据的方法,需要对数据进行加载、清洗和转换,选择合适的Spark组件进行数据处理和分析。需求分析包括确定数据分析的目的和问题、选择合适的Spark应用程序和算法、优化数据处理流程和性能、可视化和解释…

(三)softmax分类--九五小庞

softmax分类 对数几率回归解决的是二分类的问题,对于多个选项的问题,我们可以使用softmax函数,它是对数几率回归在N个可能不同的值上的推广 softmax各样本分量之和为1,当只有两个类别时,与对数几率回归完全相同 损失…

vmware虚拟机centos中/dev/cl_server8/root 空间不够

在使用vmware时发现自己的虚拟机的/dev/cl_server8/root空间不够了,没办法安装新的服务。所以查了一下改空间的办法。 1.在虚拟机关闭的状态下,选中需要扩容的虚拟机->设置->硬件-> 硬盘->扩展->填写扩大到的值。 2.打开虚拟机&#xff…

CSS 盒子模型(box model)

概念 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin),边框(border),内边距(pad…

ELK+kafka+filebeat企业内部日志分析系统

目录 ELKkafkafilebeat企业内部日志分析系统 1、组件介绍 1、Elasticsearch: 2、Logstash: 3、Kibana: 4、Kafka: 5、Filebeat: 2、环境介绍 3、版本说明 4、搭建架构 5、实施部署 1、 Elasticsearch集群部署 1、安装配置jdk 2、安装配置ES…

2024 年适用于电脑的十大录制屏幕软件

录制屏幕软件的设计和开发旨在让您的工作流程更轻松、更高效。这些漂亮的工具有助于为教育目的捕获图像快照或记录屏幕以与客户共享模型。无论您寻找桌面屏幕录像机的原因是什么,这里都有最好的付费和免费实用程序。该类别中我们最喜欢的一些选择是 奇客录屏助手和 …

基于Springboot的人事管理系统 (有报告)。Javaee项目,springboot项目。

演示视频: 基于Springboot的人事管理系统 (有报告)。Javaee项目,springboot项目。 项目介绍: 采用M(model)V(view)C(controller)三层体系结构&am…

【机器学习】FashionMNIST数据集简介及下载方法(自动下载)

【机器学习】FashionMNIST数据集简介及下载方法(自动下载) 🌈 个人主页:高斯小哥 🔥 高质量专栏:Matplotlib之旅:零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程👈 希望得到您的订…

MATLAB环境下基于图像处理的计算病理学图像分割(MATLAB R2021B)

人工智能是病理学诊断和研究的重要新兴方法,其不仅可用于病理形态数据分析,还可整合免疫组化、分子检测数据和临床信息,得出综合的病理诊断报告,为患者提供预后信息和精准的药物治疗指导。计算病理学是病理学与AI、计算机视觉等信…

【LeetCode:2368. 受限条件下可到达节点的数目 + BFS】

🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持,因为它具有很高的价值,算法就是这样✨ 🌲 作者简介:硕风和炜,…

Java面试——Redis

优质博文:IT-BLOG-CN 一、Redis 为什么那么快 【1】完全基于内存,绝大部分请求是纯粹的内存操作,非常快速。数据存在内存中。 【2】数据结构简单,对数据操作也简单,Redis中的数据结构是专门进行设计的。 【3】采用单线…

(C语言)回调函数

回调函数是什么? 回调函数就是⼀个通过函数指针调⽤的函数。 如果你把函数的指针(地址)作为参数传递给另⼀个函数,当这个指针被⽤来调⽤其所指向的函数 时,被调⽤的函数就是回调函数。回调函数不是由该函数的实现⽅…

python 基础知识点(蓝桥杯python科目个人复习计划56)

今日复习内容:做题 例题1:最小的或运算 问题描述:给定整数a,b,求最小的整数x,满足a|x b|x,其中|表示或运算。 输入格式: 第一行包括两个正整数a,b; 输出格式&#…

【【C语言简单小题学习-1】】

实现九九乘法表 // 输出乘法口诀表 int main() {int i 0;int j 0;for (i 1; i < 9; i){for (j 1; j < i;j)printf("%d*%d%d ", i , j, i*j);printf("\n"); }return 0; }猜数字的游戏设计 #define _CRT_SECURE_NO_WARNINGS 1 #include<stdi…

一周学会Django5 Python Web开发-Django5详细视图DetailView

锋哥原创的Python Web开发 Django5视频教程&#xff1a; 2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~共计28条视频&#xff0c;包括&#xff1a;2024版 Django5 Python we…

【python报错】Intel MKL FATAL ERROR: Cannot load mkl/../../../libmkl_rt.so.2.

python报错&#xff1a; Intel MKL FATAL ERROR: Cannot load mkl/../../../libmkl_rt.so.2.在切换旧版numpy版本的时候&#xff0c;出现了这个报错&#xff0c;表现就是将numpy切换到<1.24的版本的时候&#xff0c;只要import numpy就弹出以上报错。 尝试了网上的各种方法…

MacBook将iPad和iPhone备份到移动硬盘

#创作灵感# 一个是ICloud不够用&#xff0c;想备份到本地&#xff1b;然而本地存储不够用&#xff0c;增加容量巨贵&#xff0c;舍不得这个钱&#xff0c;所以就想着能不能备份到移动硬盘。刚好有个移动固态&#xff0c;所以就试了一下&#xff0c;还真可以。 #正文# 说一下逻…