Vue3.0学习入门之快速开发环境搭建

举报
lwq1228 发表于 2021/08/25 12:05:23 2021/08/25
【摘要】 Vue3.0学习入门之快速开发环境搭建

在项目使用Vue.js主要有如下四种方式(官网给出的):

  • 在页面上以 CDN 包的形式导入。
  • 下载 JavaScript 文件并自行托管。
  • 使用 npm 安装它。
  • 使用官方的 CLI 来构建一个项目,它为现代前端工作流程提供了功能齐备的构建设置 (例如,热重载、保存时的提示等等)。

本博文主要介绍前两种使用方式,后两种使用方式会在后续《Vue学习入门之脚手架开发环境搭建》中进行详细介绍。

1、在页面上以 CDN 包的形式导入

对于CDN方式,Vue.js框架支持多种CDN的使用方式,下面进行详细介绍:

1.1、cdnjs方式

(版本号根据需要自行修改)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js 3.2.4 Demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.4/vue.global.min.js"></script>
</head>
<body>
<div id="app">
    {{msg}}
</div>
<script>
    const App = {
        data() {
            return {
                msg: 'Hello Vue.js 3.2.4 !!!'
            }
        }
    }
    Vue.createApp(App).mount('#app')
</script>
</body>
</html>

运行效果如图:

1.2、unpkg方式

<script src="https://unpkg.com/vue@3.2.4/dist/vue.global.js"></script>

说明:这里只写了JS引入部分的代码,其他部分与1.1中代码一致。

运行效果如图:

1.3、Staticfile CDN(国内)方式

<script src="https://cdn.staticfile.org/vue/3.2.4/vue.global.js"></script>

说明:这里只写了JS引入部分的代码,其他部分与1.1中代码一致。

运行效果如图:

以上的3种方式中,前两种是国外的CDN源,最后一种是国内的CDN源,推荐使用国外的CDN源,相对稳定且保证及时更新。

2、下载 JavaScript 文件并自行托管

如果想避免使用构建工具,但又无法在生产环境使用CDN,那么你可以下载Vue相关的.js 文件并自行托管在你的服务器上。然后你可以通过<script>标签引入,与使用 CDN 的方法类似。

2.1、下载Vue.js文件

(1)首先,访问Vue3.0的中文官方网站(https://v3.cn.vuejs.org/)

(2)在文档菜单中选择教程,打卡Vue3教程界面

(3)在教程界面左侧菜单中找到基础 – > 安装 --> 下载并自托管菜单

(4)点击unpkgjsDelivr超链接(博主这里点击的jsDelivr链接)

说明:如上图所示,Vue.js库文件包含两个版本,分别是“开发版本”和“生产版本”。vue.global.js是“开发版本”的js文件,该版本包含完整的警告信息和调试模式。vue.global.prod.js是“生产版本”的文件,该版本删除了相关警告信息(体积更小、运行更快),用于最终打包发布时使用。

(5)在文件vue.global.jsvue.global.prod.js上,点击鼠标右键,选择“链接另存为…”

(6)选择对应的路径保存相应的js文件

2.2、本地引用

接下来,创建一个简单的Vue单页面文件,在HTML 5页面中直接引入Vue.js库文件,在页面中输出一行简单的欢迎信息(“Hello Vue.js 3.2.4 !!!”),代码如下:

<script src="vue.global.js"></script>

说明:这里只写了JS引入部分的代码,其他部分与1.1中代码一致。

运行效果如图:

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200