百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

Vue3安装使用方式详解(vue3安装教程)

yuyutoo 2025-01-24 14:36 3 浏览 0 评论

对于开发和学习任何一门新技术, 新框架, 最主要的还是能够运行起来, 怎么运行起来,这才是最主要的。所以, 我们来说一下 Vue.js 的安装方式。

因为 Vue.js 的设计初始,就是一个渐进式的 JavaScript 框架,所以你可以按需所用,这也就造就了他可以使用多种方式集成到一个项目中。

当前文档的最新版本为: 3.2.12 to 3.2.13

这里尽量在文档中使用的都是该版本, 没有大版本变化, 不再对内容进行更新。 本来使用 3.2.12 编写本次文章,但在本文章编写的过程中, 已经升级到 3.2.13, 本次教程也同步升级到 3.2.13


在应用使用 Vue.js 中一般有4种方式(也可以说是三种方式, 也可以说是五种方式):

  1. 在页面上使用 CDN 包的形式导入
  2. 下载 Vue.js 的 JavaScript 文件引用使用
  3. 使用 npm 安装它
  4. 使用官方的 CLI 来构建应用, 这个是现在前端工作流程中使用最多的方式。

接下来详细的讲解这几种方式。

  1. 使用 Vite 构建工具, 进行构建应用

1. 在页面上使用 CDN 包的形式导入

在一开始 WEB 开发的过程中, 我们总是需要在 html 页面中直接引入对应的 JavaScript 文件。 Vue.js 是一个渐进式的框架, 所以这种方式也可以使用:

引入的代码如下所示, 为了界面效果代码进行了截图。所有的代码都会放到 github 中。

执行该文件可以看到这种方式我们引用了vue@next, vue@3.2.12, vue.global.js这三个文件。

效果图如下:


在实际的生产环境下, 最好指定对应的具体版本信息, 这样可以避免一些版本升级遇到的问题和bug。

指定版本的方式为:

对于指定版本的引入只会引入该文件自己。后续需要用到的文件将需要自己单独引用。所以对于这种方式使用全局的引用方式进行引入。


2.下载 Vue.js 的 JavaScript 文件引用使用

第二种方法和第一种其实是一种方式, 一个是别人帮我们搭建好了,我们直接用,另外一个是我们下载需要的引用文件进行本地引用。在使用的方式上是一致的。

下载地址有两个:

https://cdn.jsdelivr.net/npm/vue@next/dist/

https://unpkg.com/browse/vue@3.2.12/dist/

我会把这个文件下载备份到 github 中, 可以查看最后的 github 地址,进行查阅。也可以继续翻阅该教程, 到第三步的时候, 使用npm 直接安装文件, 到时候 npm 构建工具会直接下载所有需要的文件到本地。

Vue.js 目录结构,如图:

针对以上的文件这么多, 我们应该怎么选择其中的 JavaScript 文件进行引用呢?我们分为几种不同的情况进行说明。

*prod.js 和 *.js 带有 prod 为生产环境的版本, 进行了代码压缩。不带的就是开发版本, 针对开发会有详细的提示信息。

使用 CDN 或没有构建工具

vue(.runtime).global(.prod).js

  • 若要通过浏览器中的

    在页面上新建了一个目录vuejs. 然后引用地址之后为:

    因为这里下载的就是固定的版本, 就不需要进行版本的指定了。

    代码截图为:

    效果图如下:

    3. 使用 npm 构建安装的方式

    首先你需要先安装 Node.js, 并且可以使用 npm 指令。当然也可以使用 yarn。并且使用 Vue.js 构建大型应用时推荐使用 npm 安装的方式。需要注意的是, 国内使用 npm 会特别的慢, 可以使用国内源进行加速, 或者自己搭建 npm 的私服。

    使用 node --version 和 npm --version 查看是否安装并且保证较新的版本。

    然后可以使用 npm install 命令进行安装使用。

    npm install vue@next

    --save 是当前项目生效, 不加的话默认为全局生效。

    从这里可以看到 npm 构建工具已经把我们需要的所有的相关的依赖都下载到了当前目录中。

    Vue 还提供了编写单文件组件的配套工具。如果你想使用单文件组件,那么你还需要安装 @vue/compiler-sfc:

    npm install -D @vue/compiler-sfc

    除了 @vue/compiler-sfc 之外,你还需要为已选择的打包工具选择一个配套的单文件组件 loader 或 plugin。

    大多数情况下, 我们更倾向于使用基于 webpack 的 Vue CLI 构建工具来创建一个最小化的Vue.js应用。

    4. 使用 CLI 工具构建应用

    CLI: command-line interface 命令行界面, 一般情况下是通过应用的内部接口, 来实现一些不需要操作界面也能完成的工作。

    对于 Vue3 这里使用 Vue-CLI 最新版本的 Vue CLI v4.5, 而且命令改为: @vue/cli 最新版本安装方式为:

    yarn global add @vue/cli
    npm install -g @vue/cli


    npm 方式

    yarn 方式:

    如果在当前项目中需要升级到最新版本, 可以使用命令 vue upgrade --next 进行升级,大版本不推荐这种方式进行升级。如果需要迁移大版本, 推荐参考迁移指南。


    接下来就可以使用 Vue/CLI 进行构建应用了。

    创建一个 hello world 应用

    vue create hello-world

    默认是 Vue2 的版本, 可以切换到 Vue3 的版本。然后点击回车。

    进入到 hello-world 的工作目录中

    cd hello-world

    并用 npm run 启动项目

    npm run serve

    打开浏览器使用 http://localhost:8080 进行访问,查看效果:

    5. 使用 Vite 构建 Vue 应用

    Vite 是一个 web 开发构建工具,由于其原生 ES 模块导入方式,可以实现闪电般的冷服务器启动。以及快速的进行热部署。

    在终端命令中输入一下命令, 就可以使用 Vite 构建 Vue 项目。

    使用 npm init 创建应用

    npm 6.x 和 7.x 有不同之处。

    npm 6.x

    npm init vite@latest  --template vue

    npm 7+,需要加上额外的双短横线

    npm init vite@latest  -- --template vue

    然后进入到 project 目录中, 特别尴尬,大佬竟然在凌晨3点提交了 Vue.js 的 3.2.13 版本, 导致 npm install 一直提示找不到对应的信息。 不怕技术牛逼的人, 就怕技术牛逼的人还在拼。找不到的原因是因为私服的存在, 有一定的延迟性, 没有办法及时的更新npm 依赖。解决办法是暂时的把私服或者加速关闭, 使用官方源进行 install 就可以了。

    cd  
    npm install
    npm run dev

    打开浏览器查看效果:

    使用 yarn 创建项目

    yarn create vite  --template vue
    cd 
    yarn
    yarn dev

    浏览器效果同上, 不在截图。


    使用 pnpm 创建项目

    pnpm dlx create-vite  --template vue
    cd 
    pnpm install
    pnpm run dev

    浏览器查看效果和第一个效果一致, 不再截图。

    pnpm

    pnpm 是一个新的构建方式,类似于 maven,把所有的依赖文件相对单独存放, 这样的好处是, 当你的依赖重复的时候, 不会在各自的应用中重复出现, 节省磁盘的空间和安装速度。使用 npm install -g pnpm 安装使用。具体可以查看
    https://www.pnpm.cn/installation 。


    多种使用方式已经描述完毕, 很多细节的知识点, 需要后续实际使用的过程中进行详细描述。


    如果学习到了一点点知识点, 就给我个关注,点赞吧, 关注不迷路,可以查看后续更多关于 Vue.js 的知识点。

相关推荐

对volatile,synchronized,AQS的加锁解锁原理的一些理解

一、为什么要加锁,要实现同步多线程编程中,有可能会出现多个线程同时访问同一个共享、可变资源的情况,这个资源我们称之其为临界资源;这种资源可能是:对象、变量、文件等。...

注意,不能错过的CAS+volatile实现同步代码块

前言:最近看到有人说可以使用CAS+volatile实现同步代码块。心想,确实是可以实现的呀!因为AbstractQueuedSynchronizer(简称AQS)内部就是通过CAS+...

面试并发volatile关键字时,我们应该具备哪些谈资?

提前发现更多精彩内容,请访问https://dayarch.top/提前发现更多精彩内容,请访问https://dayarch.top/提前发现更多精彩内容,请访问https://dayarch...

无锁同步-JAVA之Volatile、Atomic和CAS

1、概要本文是无锁同步系列文章的第二篇,主要探讨JAVA中的原子操作,以及如何进行无锁同步。关于JAVA中的原子操作,我们很容易想到的是Volatile变量、java.util.concurrent....

C/C++面试题(二):std::atomic与volatile

volatile是C/C++中的一个关键字,用于告知编译器某个变量的值可能会在程序的控制之外被意外修改(例如被硬件、中断服务程序、多线程环境或其他外部代理)。为了防止编译器对代码进行某些可能破坏...

VOCs(Volatile Organic Compounds)挥发性有机化合物及测试方法

经常看到一些三防漆、涂料、油漆类产品的介绍中提到VOC、VOCs等概念,那么什么是VOC、VOCs和TVOC,VOCs主要包括哪些物质?VOCs的来源有哪些?VOCs的危害及国家标准是什么?一、V...

对volatile 及happen—before的理解

happen—before规则介绍Java...

这一篇我们来了解Synchronized、Volatile、Final关键字

题外话:蓝银王觉醒了!!--来自于一个斗罗大陆动漫爱好者(鹅,打钱!)湿兄这两天回家了,办了点大事,回来的时候我弟弟还舍不得我,哭着不愿意让我回京(我弟还是小学),我也心里很不舍,但是还是要回京奋斗...

关于 Java 关键字 volatile 的总结

1什么是volatilevolatile是Java的一个关键字,它提供了一种轻量级的同步机制。相比于重量级锁synchronized,volatile更为轻量级,因为它不会引起线程上下文...

大白话聊聊Java并发面试问题之volatile到底是什么?

用最简单的大白话,加上多张图给大家说一下,volatile到底是什么?...

为什么要有volatile关键字(volatile 关键字为什么不能保证原子性)

在嵌入式编程和多线程编程中,我们常会见到volatile关键字声明的变量。下面说一下volatile关键字的作用:1.保持变量内存可见简而言之就是用volatile声明的变量会告诉编译器和处理器,这个...

Java的volatile到底怎么理解?(java volatitle)

我们都知道,在Java中有很多的关键字,比如synchronize比如volatile,这些都是一些比较关键的,还有final,今天我们就来聊一下这个volatile因为这个vo...

Java多线程编程中的volatile关键字:解密神秘的共享内存

Java多线程编程中的volatile关键字:解密神秘的共享内存在Java多线程编程的世界里,volatile关键字就像一位低调却至关重要的守护者。它默默无闻地站岗放哨,确保多个线程之间能够正确地共享...

你了解volatile关键字的作用吗?(关键字volatile有什么含意?并举出三个不同的例子?)

【死记硬背】volatile关键字主要用于保持内存的变量可见性和禁止重排序。变量可见性:当一个线程改变了变量的值,那么新的值对于其他线程也是可以立即获取到的。禁止重排序:...

谈谈你对volatile 关键字作用和原理的理解

一位6年工作经验的小伙伴,在某里二面的时候被问到“volatile”关键字。然后,就没有然后了…同样,还有一位4年的小伙伴,去某团面试也被问到“volatile关键字“。然后,也没有然后了…...

取消回复欢迎 发表评论: