Vue3.0极速入门 - 环境安装新建项目

news2024/11/16 17:37:43

Vue介绍

Vue.js 是什么

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

说明

官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识。如果你刚开始学习前端开发,将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧!之前有其它框架的使用经验会有帮助,但这不是必需的。

环境安装

npm安装:

1、下载nodejs:Download | Node.js

2、双击下载包进行安装

3、安装好之后在终端输入命令:npm -v,正确返回版本信息就安装好了

cnpm安装:

如果npm换了国内镜像还是很慢,可以使用cnpm,属于npm在国内的镜像工具
安装:

npm install -g cnpm --registry=https://registry.npm.taobao.org

验证

cnpm -v

Vue安装:

vue:
npm install vue@next
vue-cli:
npm install -g @vue/cli
vue-init: (可选装,构建2.x版本的vue才需要)
npm i -g @vue/cli-init

webpack安装

npm install webpack -g

新建vue项目

命令行构建helloworld

新建文件夹helloworld,命令行cd到helloworld目录下
vue create hello-world
需要填写一部分信息:

新建完成

验证

cd到hello-world目录,执行

npm run serve

运行成功结果

在浏览器输入http://localhost:8080
截图

恭喜完成项目搭建。

vue2.x与vue3.x新建项目的区别

版本构建命令运行项目
vue2.xvue init webpack 项目名称npm run dev
vue3.xvue create 项目名称npm run serve

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

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

相关文章

模型量化(Model Quantization)

1. 简介 模型量化(Model Quantization)通过某种方法将浮点模型转为定点模型。比如说原来的模型里面的权重(weight)都是float32,通过模型量化,将模型变成权重(weight)都是int8的定点…

c++ qt--事件过滤(第七部分)

c qt–事件过滤(第七部分) 一.为什么要用事件过滤 上一篇博客中我们用到了事件来进行一些更加细致的操作,如监控鼠标的按下与抬起,但是我们发现如果有很多的组件那每个组件都要创建一个类,这样就显得很麻烦&#xff…

Vue3.0 新特性以及使用变更总结

Vue3.0 在2020年9月正式发布了,也有许多小伙伴都热情的拥抱Vue3.0。去年年底我们新项目使用Vue3.0来开发,这篇文章就是在使用后的一个总结, 包含Vue3新特性的使用以及一些用法上的变更。 图片.png 为什么要升级Vue3 使用Vue2.x的小伙伴都熟悉…

亚马逊云科技 re:Inforce 大会云安全合规与技术实践及 Security Jam 大赛,快来报名吧!...

‍‍ 2023年8月31日在北京 亚马逊云科技 re:Inforce 大会 首次登陆中国! 我们期待您的莅临, 并与您一起迎接 AI 时代, 开启全面智能的安全旅程! 在13:00-17:00的 培训与动手实验环节中 云安全合规与技术实践 及 Security Jam 大赛…

APP爬虫之-Protobuf协议逆向解析

在做APP抓取时,会发现有的APP Response回来的数据有“加密”。不知道返回的内容是什么。 如下: 如上,内容不是明文的,没办法解析数据。APP常见的对数据加密有三种情况:第一种是,用诸如AES这类加密算法对数…

图神经网络和分子表征:3. 不变网络最后的辉煌

写这篇文章的时候已经是2023年的8月份,GNN for molecule property prediction 这个小领域正在变得火热起来,各大榜单被不断刷新,颇有当年 CNN 刷榜 imagenet 的势头。 由于对力、维里等性质有着内禀优势,当下高居榜首的模型毫无疑…

设计模式--工厂模式(Factory Pattern)

一、 什么是工厂模式 工厂模式(Factory Pattern)是一种创建型设计模式,它提供了一种创建对象的接口,但是将对象的实例化过程推迟到子类中。工厂模式允许通过调用一个共同的接口方法来创建不同类型的对象,而无需暴露对…

<C++> STL_vector

1.vector的介绍 vector是表示可变大小数组的序列容器。就像数组一样,vector也采用的连续存储空间来存储元素。也就是意味着可以采用下标对vector的元素进行访问,和数组一样高效。但是又不像数组,它的大小是可以动态改变的,而且它的…

【JavaEE】Spring事务-事务的基本介绍-事务的实现-@Transactional基本介绍和使用

【JavaEE】Spring事务(1) 文章目录 【JavaEE】Spring事务(2)1. 为什么要使用事务2. Spring中事务的实现2.1 事务针对哪些操作2.2 MySQL 事务使用2.3 Spring 编程式事务(手动挡)2.4 Spring 声明式事务&#…

匈牙利算法 in 二分图匹配

https://www.luogu.com.cn/problem/P3386 重新看这个算法,才发现自己没有理解。 左边的点轮流匹配,看是否能匹配成功。对右边的点进行记录是否尝试过 然后有空就进,别人能退的就进 遍历左部点: 尝试匹配过程:

报错处理:Docker容器无法启动

具体报错: Error response from daemon: OCI runtime create failed: container_linux.go:349: starting container process caused "exec: \"program\": executable file not found in $PATH": unknown. 报错环境: 该报错出现在使用…

网络编程套接字(2): 简单的UDP网络程序

文章目录 网络编程套接字(2): 简单的UDP网络程序3. 简单的UDP网络程序3.1 服务端创建(1) 创建套接字(2) 绑定端口号(3) sockaddr_in结构体(4) 数据的接收与发送接收发送 3.2 客户端创建3.3 代码编写(1) v1_简单发送消息(2) v2_小写转大写(3) v3_模拟命令行解释器(4) v4_多线程版…

软件测试 day3

今天目标 执行用例(课上案例编写的用例) 缺陷相关知识 能够说出软件缺陷判定标准 能够说出项目中缺陷的管理流程 能够使用Excel对于缺陷进行管理 能使用工具管理缺陷一、用例执行 说明:执行结果与用例的期望结果不一致(含义&…

Lingo软件安装包分享(附安装教程)

目录 一、软件简介 二、软件下载 一、软件简介 Lingo是一款专门为解决线性和非线性优化问题而设计的专业软件,广泛应用于运筹学、工程管理、交通管理、生产调度、物流管理等领域。它提供了一个易于使用的界面和灵活的求解器,能够高效地求解大规模的线性…

前端需要理解的Vue知识

1 模板语法 Vue使用基于 HTML 的模板语法,能声明式地将其组件实例的数据绑定到DOM。所有Vue 模板可以被符合规范的浏览器和 HTML 解析器解析。Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统,当应用状态变更时,Vue 能够智能…

Android 实现资源国际化

前言 国际化指的是当Android系统切换语言时,相关设置也随之改变,从而使用不同的国家地区; 简而言之,就是我们的Android App中的文字和图片会随着不同国家的地区变化从而切换为不同语言文字和不同国家的图片 文字图片国际化 只要…

Python绘图系统9:新建绘图类型控件,实现混合类型图表

文章目录 绘图类型控件改造AxisList更改绘图逻辑源代码 Python绘图系统: 从0开始实现一个三维绘图系统自定义控件:坐标设置控件📉坐标列表控件📉支持多组数据的绘图系统图表类型和风格:散点图和条形图📊混…

【已解决】在 SpringBoot 中使用 CloseableHttpClient 调用接口时,接收参数中的中文变为“?“

问题描述 由于项目需要,需要在代码中使用POST请求去调用另一个服务的接口,即不通过前端,A 项目直接在方法中发起HTTP请求调用 B 项目的接口,当请求体中的参数有中文时,参数接收后中文会变为“?”。 具体原因是参数的…

玩转git第7章节,本地git的用户名和密码的修改

一 本地git的用户名和密码 1.1 本地用户名和密码修改 1.本地用户名修改 2.凭据管理 3.进行修改密码 1.2 代码提交操作

8、Spring_整合Mybatis

五、Spring整合Mybatis 1.添加依赖 添加依赖 <dependencies><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>5.2.17.RELEASE</version></dependency><depend…