vue详细安装教程

news2025/7/11 15:28:03

这里写目录标题

  • 一、下载和安装node
  • 二、创建全局安装目录和缓存日志目录
  • 三、安装vue
  • 四、创建一个应用程序
  • 五、3x版本创建
  • 六、创建一个案例

一、下载和安装node

官网下载地址:https://nodejs.org/en/download

在这里插入图片描述
选择适合自己的版本,推荐LTS,长久稳定版本。 我这里选择的是Windows Installer(.msi) 64-bit

下载好后,双击下载的安装包。安装node(步骤省略,一路next即可)
安装完成后,检查一下是否安装成功。

node -v
npm -v

在这里插入图片描述


输出了版本号就说明安装成功了。

二、创建全局安装目录和缓存日志目录

在我们的安装目录下,创建名为node_cache和node_global的两个文件夹。
在这里插入图片描述


打开Dos窗口,执行如下命令,将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录

npm config set prefix “你的安装目录\node_global”
npm config set cache “你的安装目录\node_cache”

在这里插入图片描述
为了以后下载包快速,修改源为淘宝镜像

npm config set registry https://registry.npm.taobao.org

在这里插入图片描述

查看npm配置修改是否成功

npm config list

三、安装vue

用管理员身份运行!
Win + s 搜索 “命令提示符”,右键以管理员身份运行

安装vue.js

npm install vue -g

其中-g是全局安装,指安装到global全局目录去,如果不加-g,模块就会安装到当前路径下的node_modules文件夹下,没有目录则自动创建。

安装webpack模板

npm install webpack -g

安装打包的客户端

npm install webpack-cli -g

输入 webpack -v,能输出版本号就说明都安装好了

安装脚手架vue-cli

npm install vue-cli -g

输入vue --version,能输出版本号就说明安装好了。

四、创建一个应用程序

这两个用哪个都行

 vue init webpack 项目名
 vue create 项目名

在这里插入图片描述

创建好后执行蓝色提示命令运行项目

 $ cd vuetest     # 进入项目命名的目录
 $ npm run serve  # 运行项目

在这里插入图片描述
在这里插入图片描述
使用空格选择或者去除然后回车
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

五、3x版本创建

Default 表示使用默认配置
Manually 自定义勾选特性配置

在这里插入图片描述

自定义选择要安装的插件。( 按空格是选择勾还是不勾,按回车是代表确认)

在这里插入图片描述

选择vue的版本
在这里插入图片描述
选择css预处理语言 ,勾选 Less
在这里插入图片描述
选择代码格式校验使用哪种校验规范 一般用第三种
ESLint + Standard config 通用规范
ESLint + Prettier 比较漂亮的规范
在这里插入图片描述
选择什么情况下触发代码校验,按空格表示勾选,全选然后回车
Lint on save 当修改报错文件时触发
Lint and fix on commit 当执行git committ提交时
在这里插入图片描述
对应Babel, ESLint等配置文件是
In dedicated config files 生成保存到独立的配置文件中
In package.json 把插件的配置信息和package.json文件写在一起
在这里插入图片描述

六、创建一个案例

app.vue

<template>
  <div id="app">
    <Home></Home>
  </div>
</template>

<script>


  import Home from "@/components/Home";
  export default {
    name: 'App',

    components: {
      Home
    }

  }
</script>

<style>
  #app {
    height: 100%;
  }


</style>


在components下创建Home

<template>
  <div id="app">
  <h1>首页</h1>
  </div>
</template>

<script>

export default {
  name: 'App',

}
</script>

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

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

相关文章

模块化机柜PDU为数据中心机房末端配电提供可靠解决方案

数据中心是国家确定的“新基建”七大领域之一&#xff0c;数据中心在国民经济和社会发展中所起的作用越来越重要&#xff0c;数据中心已经成为了各行各业的关键基础设施&#xff0c;数据中心供配电系统相当于一个人的“心脏和血管”&#xff0c;负责把能量输送到系统的每一台设…

驱动开发11-1 编写IIC驱动-读取温湿度数据

头文件 head.h #ifndef __HEAD_H__ #define __HEAD_H__ #define GET_HUM _IOR(m, 1, int) #define GET_TEM _IOR(m, 0, int) #endif 应用程序 si7006.c #include <stdlib.h> #include <stdio.h> #include <sys/types.h> #include <sys/stat.h> #inc…

人人都能看懂的DDPM反向降噪过程公式推导

0 前言 上一篇介绍了前向加噪过程&#xff0c;得到如下从 x 0 x_0 x0​ 一步到 x t x_t xt​ 过程&#xff1a; α t β t 1 \alpha_t \beta_t1 αt​βt​1&#xff0c;其中 β t \beta_t βt​ 是正态分布方差&#xff0c;即第 t t t 步产生的噪声从 N ( 0 , β t ) …

伽马函数 简要总结

1、定义公式&#xff1a; &#xff08;上面一个△ 意为“定义为”&#xff09; 例1&#xff1a; 例2&#xff1a; 2、性质 3、举例 例1&#xff1a; 例2&#xff1a; 例3&#xff1a; 笔记记录时间&#xff1a;2023.11.01&#xff0c;笔记记录自汤老师讲解的伽马函数内容。…

算法与数据结构-回溯算法

文章目录 如何理解“回溯算法”&#xff1f;两个回溯算法的经典应用0-1 背包正则表达式 如何理解“回溯算法”&#xff1f; 笼统地讲&#xff0c;回溯算法很多时候都应用在“搜索”这类问题上。不过这里说的搜索&#xff0c;并不是狭义的指我们前面讲过的图的搜索算法&#xf…

损失函数总结(十一):Huber Loss、SmoothL1Loss

损失函数总结&#xff08;十一&#xff09;&#xff1a;Huber Loss、SmoothL1Loss 1 引言2 损失函数2.1 Huber Loss2.2 SmoothL1Loss 3 总结 1 引言 在前面的文章中已经介绍了介绍了一系列损失函数 (L1Loss、MSELoss、BCELoss、CrossEntropyLoss、NLLLoss、CTCLoss、PoissonNL…

c语言基础:L1-067 洛希极限

科幻电影《流浪地球》中一个重要的情节是地球距离木星太近时&#xff0c;大气开始被木星吸走&#xff0c;而随着不断接近地木“刚体洛希极限”&#xff0c;地球面临被彻底撕碎的危险。但实际上&#xff0c;这个计算是错误的。 洛希极限&#xff08;Roche limit&#xff09;是一…

01-开发第一个Vue程序,了解Vue构造函数的配置项data,template,插值语法,el

Vue的快速入门 下载并安装vue.js Vue是一个基于JavaScript实现的框架, 要使用它就需要从Vue官网下载 vue.js文件 第一步&#xff1a;打开Vue2官网&#xff0c;点击下图所示的起步 第二步&#xff1a;继续点击下图所示的安装 第三步&#xff1a;在安装页面向下滚动&#xff0…

永恒之蓝(MS17-010)漏洞利用

永恒之蓝&#xff08;eternalblue) 永恒之蓝&#xff08;Eternal Blue&#xff09;爆发于2017年4月14日晚&#xff0c;是一种利用Windows系统的SMB协议漏洞来获取系统的最高权限&#xff0c;以此来控制被入侵的计算机。甚至于2017年5月12日&#xff0c; 不法分子通过改造“永恒…

k8s约束调度

Kubernetes 是通过 List-Watch **** 的机制进行每个组件的协作&#xff0c;保持数据同步的&#xff0c;每个组件之间的设计实现了解耦。 list-watch核心组件为Controller Manager、Scheduler 和 kubelet&#xff0c;这三者协助完成了pod节点的建立过程。 在 Kubernetes 中&…

89 柱状图中最大的矩形

柱状图中最大的矩形 类似接雨水&#xff08;反过来&#xff0c;相当于找接雨水最少的一段&#xff09;题解1 暴力搜索&#xff08;超时&#xff09; O ( N 2 ) O(N^2) O(N2)另一种 题解2 单调栈【重点学习】常数优化 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的…

【接口测试】目前市面上流行的接口大多有哪几种协议的接口?

首先&#xff0c;关于协议这个词&#xff0c;你要清楚。 接口测试它是基于什么进行测试的&#xff0c;接口测试是什么测试类型&#xff0c;其实有有时候问到一个问题&#xff0c;关联性很强。很多关联性的问题你都可以去考虑。 首先接口测试一个功能黑盒测试&后端&#x…

Snackbar使用介绍及自定义

Snackbar使用介绍及自定义 前言一、Snackbar是什么&#xff1f;二、简单使用三、进阶使用参考 [Android 快别用Toast了&#xff0c;来试试Snackbar](https://blog.csdn.net/g984160547/article/details/121269520) 总结 前言 有个UI要显示自定义样式的toast&#xff0c;并居中…

APISpace 天气预报查询API接口案例代码

1.天气预报查询API产品介绍 APISpace 的 天气预报查询&#xff0c;支持全国以及全球多个城市的天气查询&#xff0c;包含国内3400个城市以及国际4万个城市的实况数据&#xff0c;同时也支持全球任意经纬度查询&#xff0c;接口会返回该经纬度最近的站点信息&#xff1b;更新频率…

【JavaScript】jQuery 使用案例

使用JS实现猜数字游戏 原生JS版&#xff1a; <!DOCTYPE html> <html lang"cn"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Docum…

视频编码转换技巧:视频批量转码H264转H265,高效且顺畅

随着数字媒体的广泛应用&#xff0c;视频编码转换已成为一种普遍的需求。不同的视频格式和编码标准使得在不同设备上播放视频成为可能&#xff0c;同时也带来了兼容性和传输效率的问题。本文讲解引用云炫AI智剪使视频编码转换技巧&#xff0c;即批量将H264编码转换为H265编码&a…

Java修仙传之神奇的ES(基础使用)

前言 ES是什么&#xff1a;一款强大的搜索引擎ES拓展&#xff1a;elasticsearch结合kibana、Logstash、Beats&#xff0c;也就是elastic stack&#xff08;ELK&#xff09; kibana&#xff1a;可视化 ES&#xff1a;搜索引起 Logstash&#xff1a;数据抓取&#xff0c;数据同步…

Element UI的table不同应用

目录 一、自定义表头 二、纵向表头(动态表头) 2.1、分别拿到表头和表头中日期对应的行数据 2.2、拿到每个日期对应的列数据 一、自定义表头 <el-table-column prop"chu" align"center"><!-- 自定义表头 --><template slot"header…

uniapp 微信小程序 授权隐私流程 网上没有的踩坑记录!

首先什么时候我们需要授权操作&#xff0c;比如下图我们调用这些接口时候首先必须让用户授权&#xff0c;这个政策是2022年2月21日24时起对一下接口增加用户授权操作&#xff0c;详情可以看微信文档 授权的逻辑按照官网的意思是&#xff1a; 这个时候就踩坑了&#xff0c;我把…

Linux命令超详细

Linux基础命令 Linux的目录结构 /&#xff0c;根目录是最顶级的目录了Linux只有一个顶级目录&#xff1a;/路径描述的层次关系同样适用/来表示/home/itheima/a.txt&#xff0c;表示根目录下的home文件夹内有itheima文件夹&#xff0c;内有a.txt ls命令 功能&#xff1a;列出…