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

华为云博客 技术博客 23882 24

在项目使用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）点击unpkg或jsDelivr超链接（博主这里点击的jsDelivr链接）

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

（5）在文件vue.global.js或vue.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中代码一致。

运行效果如图：

（完）