Vue——搭建Vue开发环境

最新推荐文章于 2024-06-11 19:53:33 发布

前端小董～～～

最新推荐文章于 2024-06-11 19:53:33 发布

阅读量541

点赞数 2

分类专栏：前端 Vue.js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_53912558/article/details/128782270

版权

Vue.js 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

刚开始学习Vue时最好使用传统的在HTML中引入js文件（直接使用Script标签引用）
进入Vue官网https://cn.vuejs.org/
方法一：
进入官网→点击学习→点击教程→进入 v2.x 的文档→点击教程
在这里插入图片描述

1、引入在线文件

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

1)引入Vue：在HTML中引入上面无论哪个文件都行
例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>

<body>

</body>

</html>

2)打开浏览器→打开开发者工具→打开控制台
如出现以下结果则Vue安装成功
在这里插入图片描述
提示：不建议使用使用这种方法安装Vue，因为这种方法在以后写代码时都需要网络。
2、引入本地文件（还是在教程页面下）

如图所示Vue有两个版本：开发版本和生产版本
开发版本与生产版本的区别：开发版本包含了完整的警告和调试模式，生产版本删除了警告，在开发过程中最好使用开发版本，能及时的发现错误和警告。在项目写完了或项目要上线了为了让Vue.js的体积最小使用生产版本。在学习中使用开发版本。
1)点击绿色的开发版本，就会以Vue.js（就是一个js文件）的文件形式下载到自己的电脑上；
2)在Html中引入本地Vue.js文件，如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>

</body>

</html>

3)打开浏览器→打开开发者工具→打开控制台
如出现以下结果则Vue安装成功
在这里插入图片描述

前端小董～～～

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Vue——搭建Vue开发环境

开发版本与生产版本的区别：开发版本包含了完整的警告和调试模式，生产版本删除了警告，在开发过程中最好使用开发版本，能及时的发现错误和警告。在学习中使用开发版本。1)点击绿色的开发版本，就会以Vue.js（就是一个js文件）的文件形式下载到自己的电脑上；刚开始学习Vue时最好使用传统的在HTML中引入js文件（直接使用Script标签引用）：不建议使用使用这种方法安装Vue，因为这种方法在以后写代码时都需要网络。2)打开浏览器→打开开发者工具→打开控制台。3)打开浏览器→打开开发者工具→打开控制台。
复制链接

扫一扫

专栏目录