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）点击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中代码一致。
运行效果如图：
- 点赞
- 收藏
- 关注作者
评论（0）