没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论









Vue3教程
⽬前最新版本:npm@next v3.2.26。
Vue3的官⽅⽹址:https://v3.cn.vuejs.org。
每个版本的详细发布说明都可以在GitHub上找到。
1 Vue3简介
Vue(读⾳ /vjuː/,类似于view)是⼀套⽤于构建⽤户界⾯的渐进式框架。与其它⼤型框架不同的是,Vue被设计为
可以⾃底向上逐层应⽤。Vue的核⼼库只关注视图层,不仅易于上⼿,还便于与第三⽅库或既有项⽬整合。另⼀⽅
⾯,当与现代化的⼯具链以及各种⽀持类库结合使⽤时,Vue也完全能够为复杂的单⻚应⽤提供驱动。
Vue被称为渐进式JavaScript框架。Vue的特点:
1.易⽤:只需要了解HTML、CSS、JavaScript等知识,即刻阅读指南开始构建应⽤。
2.灵活:不断繁荣的⽣态系统,可以在⼀个库和⼀套完整框架之间⾃如伸缩。
3.⾼效:20kB min+gzip运⾏⼤⼩,超快虚拟DOM,最省⼼的优化。
2 Vue3安装
2.1 Vue安装⽅式
Vue.js设计的初衷就包括可以被渐进式地采⽤。这意味着它可以根据需求以多种⽅式集成到⼀个项⽬中。
将Vue.js添加到项⽬中主要有四种⽅式:
1.在⻚⾯上以CDN包的形式导⼊。
2.下载JavaScript⽂件并⾃⾏托管。
3.使⽤npm安装它。
4.使⽤官⽅的CLI来构建⼀个项⽬,它为现代前端⼯作流程提供了功能⻬备的构建设置(例如,热重载、保存时的提
示等等)。
2.1.1 下载并⾃托管
如果你想避免使⽤构建⼯具,但⼜⽆法在⽣产环境使⽤CDN,那么你可以下载相关.js⽂件(vue.global.js)并⾃⾏
托管在你的服务器上。然后你可以通过 <script> 标签引⼊。
这些⽂件可以在unpkg或者jsDelivr上浏览和下载。各种不同⽂件将在以后解释(对不同构建版本的解释),但你
通常需要同时下载开发环境构建版本以及⽣产环境构建版本。
<script src="../js/vue.global.js"></script>

2.1.2 CDN
以下推荐国外⽐较稳定的两个CDN,国内还没发现哪⼀家⽐较好,⽬前还是建议下载到本地。
Staticfile CDN(国内): https://cdn.staticfile.org/vue/3.2.26/vue.global.js
unpkg(推荐):https://unpkg.com/vue@next,会保持和npm发布的最新的版本⼀致
对于制作原型或学习,你可以这样使⽤最新版本:
对于⽣产环境,我们推荐链接到⼀个明确的版本号和构建⽂件,以避免新版本造成的不可预期的破坏。
2.1.3 npm
由于npm安装速度慢,本教程使⽤了淘宝的镜像及其命令cnpm,安装使⽤介绍参照:使⽤淘宝NPM镜像。
npm版本需要⼤于3.0,如果低于此版本需要升级它:
在⽤Vue.js构建⼤型应⽤时推荐使⽤npm安装,npm能很好地和Webpack或Rollup模块打包器配合使⽤:
Vue还提供了编写单⽂件组件的配套⼯具。如果你想使⽤单⽂件组件,那么你还需要安装@vue/compiler-sfc:
如果你是从Vue 2过渡⽽来的,请注意@vue/compiler-sfc替换掉了vue-template-compiler。除了@vue/compiler-
sfc之外,你还需要为已选择的打包⼯具选择⼀个配套的单⽂件组件loader或plugin。更多信息请查阅单⽂件组件⽂
档。
⼤多数情况下,我们更倾向于使⽤Vue CLI来创建⼀个配置最⼩化的webpack构建版本。
<!-- 使⽤CDN⽅法 -->
<!-- 1 Staticfile CDN(国内) -->
<!-- <script src="https://cdn.staticfile.org/vue/3.2.26/vue.global.js"></script> -->
<!-- 2 unpkg(推荐) -->
<script src="https://unpkg.com/vue@next"></script>
# 查看版本
$ npm -v
#升级npm
cnpm install npm -g
# 升级或安装cnpm
npm install cnpm -g
# 最新稳定版
$ cnpm install vue@next
$ npm install -D @vue/compiler-sfc

2.1.4 命令⾏⼯具 (CLI)
1.命令⾏⼯具介绍
Vue提供了⼀个官⽅的 CLI,为单⻚⾯应⽤(SPA)快速搭建繁杂的脚⼿架。它为现代前端⼯作流提供了功能⻬备的
构建设置。只需要⼏分钟的时间就可以运⾏起来并带有热重载、保存时lint校验,以及⽣产环境可⽤的构建版本。
更多详情可查阅Vue CLI 的⽂档。
CLI⼯具假定⽤户对Node.js和相关构建⼯具有⼀定程度的了解。如果你是新⼿,我们强烈建议先在不⽤构建
⼯具的情况下通读指南,在熟悉Vue本身之后再使⽤CLI。
对于Vue 3,你应该使⽤npm上可⽤的Vue CLI v4.5作为@vue/cli。要升级,你应该需要全局重新安装最新版本的
@vue/cli:
安装完后查看版本:
然后在Vue项⽬中运⾏:
注意:
vue-cli 3.x和vue-cli 2.x使⽤了相同的vue命令,如果你之前已经安装了vue-cli 2.x,它会被替换为Vue-cli
3.x。
Vue.js不⽀持IE8及其以下IE版本。
2.创建项⽬
以下实例我们使⽤vue init命令来创建⼀个项⽬:
# 全局安装vue-cli
yarn global add @vue/cli
# 或
cnpm install -g @vue/cli
$ vue --version
@vue/cli 4.5.11
vue upgrade --next
$ vue init webpack yx-vue3-test
# 这⾥需要进⾏⼀些配置,默认回⻋即可
? Project name yx-vue3-test
? Project description A Vue.js project
? Author yx <test@yx.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes

进⼊项⽬,安装并运⾏:
成功执⾏以上命令后访问http://localhost:8080/,输出结果如下所示:
2.2 Vue Devtools
⽬前处于测试阶段,Vuex和Router的集成仍在进⾏中。
在使⽤Vue时,我们推荐在你的浏览器上安装Vue Devtools,它允许你在⼀个更友好的界⾯中审查和调试Vue应
⽤。
? Should we run `npm install` for you after the project has been created? (recommended)
npm
vue-cli · Generated "yx-vue3-test".
# Installing project dependencies ...
# ========================
...
$ cd yx-vue3-test
$ cnpm run dev
DONE Compiled successfully in 2558ms
I Your application is running here: http://localhost:8080

获取Chrome扩展程序
获取Firefox附加组件
获取独⽴的Electron应⽤程序
2.3 Vite
Vite是⼀个web开发构建⼯具,由于其原⽣ES模块导⼊⽅式,可以实现闪电般的冷服务器启动。通过在终端中运⾏
以下命令,可以使⽤Vite快速构建Vue项⽬,语法格式如下:
使⽤npm:
或者yarn:
或者pnpm:
2.4 对不同构建版本的解释
在npm包的dist/⽬录你将会找到很多不同的Vue.js构建版本。下⾯是⼀个概述,根据不同的使⽤情况,应该使⽤哪
个 dist ⽂件。
2.4.1 使⽤CDN或没有构建⼯具
vue(.runtime).global(.prod).js
1.若要通过浏览器中的 <script src="..."> 直接使⽤,则暴露Vue全局。
2.浏览器内模板编译:
# npm 6.x
$ npm init vite@latest <project-name> --template vue
# npm 7+,需要加上额外的双短横线
$ npm init vite@latest <project-name> -- --template vue
$ cd <project-name>
$ npm install
$ npm run dev
$ yarn create vite <project-name> --template vue
$ cd <project-name>
$ yarn
$ yarn dev
$ pnpm create vite <project-name> -- --template vue
$ cd <project-name>
$ pnpm install
$ pnpm dev
剩余85页未读,继续阅读
资源评论


思绪千字难提
- 粉丝: 670
- 资源: 11
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


安全验证
文档复制为VIP权益,开通VIP直接复制
