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.mzph.cn/news/716089.shtml

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

相关文章

win11系统中nginx简单的代理配置

一.背景 为了公司安排的师带徒任务。 操作系统版本:win11家庭版 nginx版本:1.24.0 二.配置代理 之前文章已经说明了nginx简单的安装,要看阅读这个文章哈。web服务器nginx下载及在win11的安装-CSDN博客 1.配置需求识别 前端服务nginx(80…

【探索AI】十七 深度学习之第3周:卷积神经网络(CNN)(一)-CNN的基本原理与结构

第3周:卷积神经网络(CNN) CNN的基本原理与结构 常见的卷积层、池化层与全连接层 LeNet、AlexNet等经典CNN模型 实践:使用CNN进行图像分类任务 CNN的基本原理与结构 引言与背景介绍 卷积神经网络(CNN)是…

双周回顾#007 - 前端与后端

前端的问题不是难,而是它面对最终用户。只要用户的喜好和口味发生变化,前端就必须跟上。 这导致前端不得不快速变化,因为用户的口味正在越来越快地改变。 后端不需要面对最终用户,需要解决的都是一些经典的计算机科学问题&#…

什么是Vue指令?请列举一些常见的Vue指令以及它们的用法

Vue.js 是一款流行的前端框架,它的指令(Directives)是 Vue.js 提供的一种特殊属性,用于在模板中对 DOM 元素进行直接操作。指令通常是以 v- 开头的特殊属性,用于响应式地将数据绑定到 DOM 元素上。 在 Vue 中&#xf…

C语言初阶—函数(函数的声明和定义,函数递归)

函数声明: 1.告诉编译器有一个函数叫什么,参数是什么,返回类型是什么,但是具体是不是存在,函数声明决定不了。 2.函数的声明一般出现在函数使用之前,要满足先声明后使用。 3.函数的声明一般要放在头文件中。…

Launch学习

参考博客: (1) 史上最全的launch的解析来啦,木有之一欧 1 ROS工作空间简介 2 元功能包 src目录下可以包含多个功能包,假设需要使用机器人导航模块,但是这个模块中包含着地图、定位、路径规划等不同的功能包,它们的逻…

agent内存马

搭建一个简单的Servlet项目 ServletDemo package com.naihe;import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException;…

vue2+若依框架plus交互 路由介绍

本周及寒假 参加了校企合作的工程过程管理,和学长学姐一起写项目,之前学了vue也没有应用,然后对框架很多组件的用法不太了解,前期耽误了一些时间。 框架模块 首先是框架模块的介绍 api存了一些系统管理及发送请求的方法 例如p…

【python】`assert`断言语句

assert是一个断言语句,用于在代码中检查某个条件是否为真。 如果条件为假,将触发AssertionError 异常,从而指示存在错误。

在您的下一个项目中选择 Golang 和 Node.js 之间的抉择

作为一名软件开发者,我总是在寻找构建应用程序的最快、最高效的工具。在速度和处理复杂任务方面,我认为 Golang 和 Node.js 是顶尖技术。两者在性能方面都享有极高的声誉。但哪一个更快——Golang 还是 Node?我决定深入一些硬核基准测试&…

java-ssm-jsp-宠物护理预定系统

java-ssm-jsp-宠物护理预定系统 获取源码——》公主号:计算机专业毕设大全

物联网与智慧城市:融合创新,塑造未来城市生活新图景

一、引言 在科技飞速发展的今天,物联网与智慧城市的融合创新已成为推动城市发展的重要力量。物联网技术通过连接万物,实现信息的智能感知、传输和处理,为智慧城市的构建提供了无限可能。智慧城市则运用物联网等先进技术,实现城市…

使用R语言进行Logistic回归分析(2)

一、数据集描述,问题要求 下表是40位肺癌病人的生存资料,X1表示生活行为能力平分(1到100),X2为病人的年龄(年),X3由诊断到进入研究的时间(月),X4…

计算机设计大赛 深度学习火车票识别系统

文章目录 0 前言1 课题意义课题难点: 2 实现方法2.1 图像预处理2.2 字符分割2.3 字符识别部分实现代码 3 实现效果4 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 图像识别 火车票识别系统 该项目较为新颖,适…

Pycharm的下载安装与汉化

一.下载安装包 1.接下来按照步骤来就行 2.然后就能在桌面上找到打开了 3.先建立一个文件夹 二.Pycharm的汉化

ABAP - SALV教程07 斑马纹显示和SALV标题

SALV设置斑马纹和标题 METHOD set_layout.DATA: lo_display TYPE REF TO cl_salv_display_settings. * 取得显示对象lo_display co_alv->get_display_settings( ).* 设置ZEBRA显示lo_display->set_striped_pattern( X ). * 设置Titlelo_display->set_list_he…

企业微信变更主体怎么改?

企业微信变更主体有什么作用?做过企业运营的小伙伴都知道,很多时候经常会遇到现有的企业需要注销,切换成新的企业进行经营的情况,但是原来企业申请的企业微信上面却积累了很多客户,肯定不能直接丢弃,所以这…

【二】【SQL】去重表数据及分组聚合查询

去重表数据 表的准备工作 去除表中重复的数据,重复的数据只留一份。 mysql> create table duplicate_table (-> id int,-> name varchar(20)-> ); Query OK, 0 rows affected (0.03 sec)mysql> insert into duplicate_table values-> (100,aaa)…

Day24-yum与rpm软件包管理2

Day24-yum与rpm软件包管理2 1. 配置缓存rpm包2. 为什么要缓存?3. 组包相关指令4. yum帮助与补全功能4.1 补全4.2 什么是yum源4.3 常见互联网 yum 源 5. 搭建局域网YUM仓库实践 1. 配置缓存rpm包 修改yum.conf配置 [rootoldboy ~]# sed -i.bak s#keepcache0#keepca…

批次大小对ES写入性能影响初探

问题背景 ES使用bulk写入时每批次的大小对性能有什么影响?设置每批次多大为好? 一般来说,在Elasticsearch中,使用bulk API进行批量写入时,每批次的大小对性能有着显著的影响。具体来说,当批量请求的大小增…