vue详细安装教程

这里写目录标题

  • 一、下载和安装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.mzph.cn/news/130388.shtml

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

相关文章

Quartus II 13.0波形仿真(解决无法产生仿真波形问题)

目录 前言 新建工程 创建Verilog文件&#xff0c;写代码 波形仿真&#xff08;解决没有输出波问题&#xff09; 前言 这么说把Quartus II 13.0是我目前来讲见过最恶心的软件&#xff0c;总是一大堆麻烦事&#xff0c;稍微哪里没弄好就后面全都出问题。很多人在写完Verilog代…

数组反转(LeetCode)

凑数 ... 描述 : 给你一个 32 位的有符号整数 x &#xff0c;返回将 x 中的数字部分反转后的结果。 如果反转后整数超过 32 位的有符号整数的范围 [−231, 231 − 1] &#xff0c;就返回 0。 假设环境不允许存储 64 位整数&#xff08;有符号或无符号&#xff09;。 题目…

OpenCV检测圆(Python版本)

文章目录 示例代码示例结果调参 示例代码 import cv2 import numpy as np# 加载图像 image_path DistanceComparison/test_image/1.png image cv2.imread(image_path, cv2.IMREAD_COLOR)# 将图像转换为灰度 gray cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)# 使用高斯模糊消除…

node插件express(路由)的基本使用(一)

文章目录 一、express的了解1.定义2.作用3.使用express的前提条件&#xff08;1&#xff09;如果是新文件夹需要薪资package.json文件&#xff0c;如果有就忽略&#xff08;2&#xff09;安装第三方依赖包&#xff08;3&#xff09;在使用的地方导入express 二、express的基本使…

Jetpack:028-Jetpack中的Card

文章目录 1. 概念介绍2. 使用方法2.1 主要类型2.2 其它类型 3. 示例代码4. 内容总结 我们在上一章回中介绍了Jetpack中Switch相关的内容&#xff0c;本章回中 主要介绍Card。闲话休提&#xff0c;让我们一起Talk Android Jetpack吧&#xff01; 1. 概念介绍 我们在本章回中介…

node教程(四)Mongodb+mongoose

文章目录 一、mongodb1.简介1.1Mongodb是什么&#xff1f;1.2数据库是什么&#xff1f;1.3数据库的作用1.4数据库管理数据的特点 2.核心概念3.下载安装与启动4.命令行交互4.1数据库命令4.3文档命令 二、Mongoose1.介绍2.作用3.使用流程4.插入文档5.mongoose字段类型 一、mongod…

el-cascader级联选择器选中一个全选中问题

问题 只选中一个却把同级全选中 解决 :props中添加label、value、children属性 label、value、children属性值需要和后端返回的集合中的字段名保持一致 后端返回数据&#xff1a;

3000 台 Apache ActiveMQ 服务器易受 RCE 攻击

超过三千个暴露在互联网上的 Apache ActiveMQ 服务器容易受到最近披露的关键远程代码执行 (RCE) 漏洞的影响。 Apache ActiveMQ 是一个可扩展的开源消息代理&#xff0c;可促进客户端和服务器之间的通信&#xff0c;支持 Java 和各种跨语言客户端以及许多协议&#xff0c;包括…

网络安全(网络安全)小白自学

想自学网络安全&#xff08;黑客技术&#xff09;首先你得了解什么是网络安全&#xff01;什么是黑客&#xff01; 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全…

【Midjourney入门教程2】Midjourney的基础操作和设置

文章目录 Midjourney的常用命令和基础设置1、 /imagine2、 /blend3、 /info4、 /subscribe5、 /settings&#xff08;Midjourney的基础设置&#xff09;6、 /shorten 有部分同学说我不想要英文界面的&#xff0c;不要慌&#xff1a; 点击左下角个人信息的设置按钮&#xff0c;找…

网际控制报文协议ICMP

网际控制报文协议ICMP 一.网际控制报文协议ICMP概述 为了更有效地转发IP数据报以及提高IP数据报交付成功的机会&#xff0c;TCPIP体系结构的网际层使用了网际控制报文协议(Internet Control Message Protocol&#xff0c;ICMP)[RFC 792].主机或路由器使用ICMP来发送差错报告报…

图解系列--路由器和它庞大的功能

03.01 何为路由器 路由器是指主要负责 OSI参考模型中网络层的处理工作&#xff0c;并根据路由表信息在不同的网络 之间转发IP 分组的网络硬件(图3-1)。这里的网络一般是指IP 子网&#xff0c;也可以称为广播域。此外&#xff0c;现在的路由器还会搭载其他各种各样的功能。 0…

【ES专题】ElasticSearch搜索进阶

目录 前言阅读导航前置知识特别提醒笔记正文一、分词器详解1.1 基本概念1.2 分词发生的时期1.3 分词器的组成1.3.1 切词器&#xff1a;Tokenizer1.3.2 词项过滤器&#xff1a;Token Filter1.3.3 字符过滤器&#xff1a;Character Filter 1.4 倒排索引的数据结构 <font color…

IDEA中如何移除未使用的import

&#x1f468;&#x1f3fb;‍&#x1f4bb; 热爱摄影的程序员 &#x1f468;&#x1f3fb;‍&#x1f3a8; 喜欢编码的设计师 &#x1f9d5;&#x1f3fb; 擅长设计的剪辑师 &#x1f9d1;&#x1f3fb;‍&#x1f3eb; 一位高冷无情的编码爱好者 大家好&#xff0c;我是全栈工…

Oracle(10)Managing Undo Data

目录 一、基础知识 1、AUM :Init Parameters AUM:初始化参数 2、AUM:Other Parameters AUM:其他参数 3、AUM:Sizing an UNDO TS AUM:调整UNDOTS的大小 4、AUM :Undo Quota AUM:撤消配额 5、Get Undo Segment Info 获取撤消段信息 二、基础操作 1、AUM:UNDO Tablespace …

MySQL:至少参与xxx参与的全部事件(二)

MySQL&#xff1a;至少参与xxx参与的全部事件&#xff08;二&#xff09; – WhiteNights Site 标签&#xff1a;MySQL 本来不难的&#xff0c;结果实验课上又没能当场做出来。还是回到宿舍复盘才看到问题所在&#xff0c;令人感慨。 头歌例题 仔细审题 任务描述 创建一个名…

SpringBoot框架使用AOP + 自定义注解实现请求日志记录

一、SpringBoot记录日志 文章目录 一、SpringBoot记录日志1.1、环境搭建1.2、配置FastJson1.3、自定义LogRecord注解1.4、定义日志实体类1.5、创建HttpRequestUtil工具类1.6、定义AOP切面1.7、编写测试类1.8、运行测试 1.1、环境搭建 搭建SpringBoot工程。引入【spring-boot-st…

2023年软件系统架构师论文【回忆版】

2023年11月5日&#xff0c;全国计算机等级下半年考试&#xff0c;北京市软件架构师考试其中有个考点在首都经济贸易大学丰台校区&#xff09;&#xff0c;地址&#xff1a;北京市丰台区花乡张家路口121号&#xff08;北门入校&#xff09; 注意&#xff1a;机考的考试时间有所变…

BIOS开发笔记 - HDA Audio

在PC中,音频输出是一个重要的功能之一,目前大多数采用的是英特尔高清晰音效(英语:Intel High Definition Audio,简称为HD Audio或IHD)方案,它是由Intel于2004年所提出的音效技术,能够展现高清晰度的音质效果,且能进行多声道的播放,在音质(音效质量)上超越过去的其他…