vue安裝及配置 nodejs安装配置

vue安装及配置

vue安装步骤

nodejs安装

安装nodejs环境:https://nodejs.org/en/

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

查看node版本:node-v

在这里插入图片描述

vue3.0需要使用node 8版本以上

npm镜像配置

  • npm是nodejs内置的资源管理器

  • npm两个镜像:

    • 淘宝镜像:https://registry.npm.taobao.org

    • cnpmjs镜像

      • registry地址:https://r.cnpmjs.org
  • npm config set registry https://registry.npm.taobao.org 切换国内镜像,使用淘宝镜像

  • npm config get registry :查看当前镜像使用地址,返回成功,则代表设置成功

在这里插入图片描述

安装vue-cli 脚手架

  • 两种方式:
    • cnpm install -g @vue/cli
  • 查看安装的:
    • vue --version

vuecli和vue的区别

概念方面:

  • vue:是一套框架,用于构建用户界面的渐进式框架。
  • vue-cli: 而vue-cli 是一个基于 Vue.js进行快速开发的完整系统。

区别:

  • vue是一整套框架,而vue-cli只是它其中的一个脚手架
  • 脚手架是一个基于vue.js进行快速开发的完整系统,通过@Vue/cli实现快速搭建标准化项目

联系:

  • vue-cli 是vue的命令行工具
  • vue-cli是一个完整的vue项目核心构成

vue的版本和vueCli的版本的关系

  • vue版本不受脚手架版本的影响。
  • 使用vuecli构建项目时可以根据项目需求选择对应的vue版本

vue3.0 项目创建

第一步安装插件:

在这里插入图片描述

Vetur支持.vue文件的语法高亮显示,除了支持template模板以外,还支持大多数主流的前端开发脚本和插件,比如Sass、TypeScript、Jade和Less等等。

使用vite创建vue项目:

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

构建演示:

在这里插入图片描述

执行顺序:

先cd 进入目录,或直接使用vscode—>open 文件

1、cd vue-begin02
2、npm install   
3、npm run dev

在这里插入图片描述

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Parallel Desktop下的Centos 9 ping通网络,配置静态ip的全过程

目录 一、发现问题1. 找不到网卡配置文件2. 网络重启的命令一直无法执行成功 二、分析问题三、解决问题系统环境1. 打开网卡配置文件2. 修改ipv4配置3. 重载网卡配置文件4. ping通,可以正常上网了 四、疑问1. 如何确定自己是不是设置了静态ip2. DHCP是固定静态ip 的…

使用PyMC进行时间序列分层建模

在统计建模领域,理解总体趋势的同时解释群体差异的一个强大方法是分层(或多层)建模。这种方法允许参数随组而变化,并捕获组内和组间的变化。在时间序列数据中,这些特定于组的参数可以表示不同组随时间的不同模式。 今天,我们将深…

shell内置命令

目录 内置命令介绍内置命令列表alisa内置命令alias别名定义语法unalias 别名删除语法alias演示 echo内置命令echo命令介绍echo输出语法echo输出转义字符 read内置命令介绍语法options支持的参数示例1:多个变量赋值 exit内置命令介绍语法示例:Shell脚本文…

Day01 项目简介分布式基础概念

最近在改进公司开发的商城项目,看到了尚硅谷的谷粒商城,就快速学习了下,因为之前的Kafka,Redis都是在这学习的,还有大数据的Flink。所以感觉一定不错,就开始了。 这里做一下学习笔记 一、项目简介 1 、项目背景 1 &…

AutoSAR系列讲解 - AutoSAR标准文档概览

目录 一、文档下载 二、文档结构 三、文档内容 四、各部分介绍 1、Introduction and functional o 目录 一、文档下载 二、文档结构 三、文档内容 四、各部分介绍 1、Introduction and functional overview 2、Acronyms and abbreviations 3、Related documentati…

基于Java+SpringBoot+vue的口腔管家平台设计与实现

博主介绍:擅长Java、微信小程序、Python、Android等,专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇🏻 不然下次找不到哟 Java项目精品实战案例…

向日葵× 实在RPA擦出AI的火花,贝锐与实在智能官宣战略合作

6月19日,实在智能(Intelligence Indeed)与贝锐(Oray)正式宣布达成战略合作。实在智能作为国内AI准独角兽企业和超级自动化平台提供商,与国内领先的SaaS远程连接解决方案提供商贝锐的实力“牵手”&#xff0…

Yolov5(tag v7.0)网络结构解读,以yolov5s为例

最近yolov5用的多,发现确实好用,于是较深入学了一下。下面按照训练的流程梳理一下网络的结构,同时也是自己记一下便于后面查阅。 同时,我也查了一些关于yolov5网络结构介绍的资料,发现大多是v5.0,少数v6.0的…

游泳戴的耳机推荐,列举感受水下快乐的游泳耳机

​游泳是个真心好玩的活动,对一般人来说简直是大杀器!它不仅对身体没有太大伤害,还能锻炼到身体的大部分肌肉,对心肺也超级有帮助。不过,问题来了: 之前很少见到有人戴耳机游泳,主要是担心进水…

mpi实现矩阵乘法,卷积,池化(gemm,covn,pooling)

矩阵乘法: 卷积: 池化: Mpi基本原理: 1.什么是MPI Massage Passing Interface:是消息传递函数库的标准规范,由MPI论坛开发。 一种新的库描述,不是一种语言。共有上百个函数调用接口,提供与C和F…

phpstorm+xdebug/php项目调试

前提:项目使用xampp集成 一、下载xdebug,当到xampp/php/exp目录下 二、配置php.ini [Xdebug] zend_extension"D:/xampp/php/ext/php_xdebug.dll" xdebug.collect_paramsOn xdebug.collect_returnOn xdebug.auto_traceOn xdebug.trace_output_…

android adb 获取电池信息以及设置

本文主要包含 1、设置adb 无线调试桥连接步骤 2、打印设备电池状态(当前电量、充电状态、充放电电流大小、电池种类等) 3、更改电池充电状态、电量百分比、电池还原命令 4、断开adb 远程调试桥 -----------------------------------------------------------------…

【数据结构与算法分析】树上漫步之探究前序、中序、后序、广度优先遍历算法的实现与优化

文章目录 前言二叉树的遍历方式构建二叉树递归遍历二叉树非递归遍历二叉树层次遍历 示例二叉树结果总结 前言 二叉树是数据结构中最基本的数据结构之一,它在计算机科学中有着非常重要的应用。二叉树的遍历是指按照一定的顺序遍历二叉树中的所有节点,是二…

【STM32训练—WiFi模块】第二篇、STM32驱动ESP8266WiFi模块获取天气

目录 第一部分、前言 1、获取心知天气API接口 2、硬件准备 第二部分、电脑串口助手调试WIFI模块获取天气 1、ESP8266获取天气的流程 2、具体步骤 第三部分、STM32驱动ESP8266模块获取天气数据 1、天气数据的解析 1.1、什么函数来解析天气数据? 2.1、解析后…

C语言之运算符

C语言运算符 文末附运算符的优先表和ASCII表 一、算术运算符 加()减(—)乘(*)除(/)模(余)运算符(%):不允许出现浮点型,…

Linux---详细讲解linux计算机体系结构

前言 Linux是一种开源的操作系统,它的核心思想是基于冯诺依曼体系结构。在本文中,我们将深入探讨Linux的基本原理和操作系统的概念。 Linux是一款基于Unix操作系统的开源软件,它的核心是由Linus Torvalds在1991年开发的。Linux的出现&#x…

CSS | CSS中height:100vh和height:100%的区别

目录 1、对于设置height:100%;有下面几种情况 2、对于设置height:100vh时有如下的情况 首先,我们得知道1vh它表示的是当前屏幕可见高度的1/100,而1%它表示的是父元素长或者宽的1% 1、对于设置height:100%;有下面几种情况 (1)当…

Win10 hyper-v与vmware不兼容解决方案

Win10 hyper-v与vmware不兼容怎么办 一、异常1.1 异常描述 - V M w a r e W o r k s t a t i o n 与 H y p e r − V 不兼容 \color{red}{VMware Workstation 与 Hyper-V 不兼容} VMwareWorkstation与Hyper−V不兼容1.2 异常原因 二、解决办法2.1 关闭Hyper-V启动2.2 关闭内核…

OpenGL 光照贴图

1.简介 现实世界中的物体通常并不只包含有一种材质,而是由多种材质所组成。想想一辆汽车:它的外壳非常有光泽,车窗会部分反射周围的环境,轮胎不会那么有光泽,所以它没有镜面高光,轮毂非常闪亮。 2.漫反射…

pyspark安装教程

pyspark安装教程 一、Windows下配置pyspark环境1.1 JDK下载安装1.2 Scala下载安装1.3 spark下载安装1.4 Hadoop下载安装1.5 pyspark下载安装 二、pyspark原理简介 一、Windows下配置pyspark环境 在python中使用pyspark并不是单纯的导入pyspark包就可以实现的,而是需…