Vue.js入门安装初体验

最新推荐文章于 2024-07-25 09:51:39 发布

Smudgee

最新推荐文章于 2024-07-25 09:51:39 发布

阅读量79

点赞数

分类专栏： Vue学习文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_45059443/article/details/108066444

版权

Vue学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue.js安装

1.使用一个框架，我们第一步要做什么呢？下载安装它
2.安装Vue的方式有三种：
方式一：直接CDN引入
那么什么是CDN引入？
当我们在代码中要使用到框架，如JQuery、Vue等时，CDN引入就是选择最近的服务器，将JQuery.js、Vue.js代码加载下来以便我们使用。但在我们学习中，使用CDN引入反而会比较慢，因为在学习中我们的代码都是在本地测试，去CDN服务器下载反而会比较慢。

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

以上两种CDN方式分别引入了Vue.js的开发版本和生产版本，那么开发版本和生产版本有什么区别呢？
如上所说，开发版本包含了有帮助的命令行和警告，旨在帮助开发者更好地开发和调试代码。开发版本是未经压缩的，当我们点击进去阅读源码的时候才能看懂；如果是生产版本，主要考虑的是生产力，源码中就会去除一些符号、打印、警告等，而且生产版本没有换行，压缩了代码量，所以在开发阶段我们选择开发版本，而项目真正发布到线上，我们选择生产版本，因为生产版本经过了优化，尺寸更小，下载速度快，也相对节约了用户的流量。

方式二：下载和引入
通过Vue官网提供的链接下载到本地引入
开发环境：https://cn.vuejs.org/js/vue.js
生产环境：https://cn.vuejs.org/js/vue.min.js
在这里插入图片描述
方式三：NPM安装
npm install vue
涉及到webpack和CLI的使用时，我们使用该方式。

未学习到脚手架的时候我们都使用第二种方式引入Vue.js

3.第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">{{message}}</div>
    <!-- 使用script标签引入Vue.js -->
    <script src="../js/vue .js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                message:'Hello Vue.js'
            }
        })
    </script>
</body>
</html>

页面展示：
在这里插入图片描述

Smudgee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js入门安装初体验

Vue.js安装1.使用一个框架，我们第一步要做什么呢？下载安装它2.安装Vue的方式有三种：方式一：直接CDN引入那么什么是CDN引入？当我们在代码中要使用到框架，如JQuery、Vue等时，CDN引入就是选择最近的服务器，将JQuery.js、Vue.js代码加载下来以便我们使用。但在我们学习中，使用CDN引入反而会比较慢，因为在学习中我们的代码都是在本地测试，去CDN服务器下载反而会比较慢。<script src=
复制链接

扫一扫