Vue单页面开发环境安装

简介: 本文目录1. 背景2. 使用标签引入Vue3. 测试一下4. 总结

1. 背景

Vue有两种使用方式,第一种比较简单,通过<script>标签直接将Vue引入页面后,在当前页面使用Vue即可。


第二种方式比较复杂,是通过NPM构建工程化的Vue项目,当然复杂有复杂的好处,可以使用的功能更加多,可以支撑复杂应用的开发。


在入门学习阶段,可以使用第一种方式,快速入门。在熟悉了Vue方方面面后,再使用第二种方式深入学习使用。


2. 使用标签引入Vue

可以直接通过CDN引入Vue,开发环境使用如下方式,可以查看警告和调试信息。


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

1

生产环境下可以使用更加精简的版本,提高运行效率


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

1

当然也可以直接下载到项目中,自行加以引用,此处附上下载链接:下载链接。


3. 测试一下

接下来可以使用一段代码测试下是否生效。


<html>

 <head>

   <title></title>

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

 </head>

 <body>

     <div id="app">

       展示信息:{{message}}

     </div>

     <script>

       var app = new Vue({

         el: '#app',

         data: {

           message: 'Hello Vue'

         }

       });

     </script>

 </body>

</html>


如上代码,如果在页面上能显示展示信息:Hello Vue,表明咱们的安装配置成功了。


4. 总结

通过<script>建立Vue的安装环境,与引入一般的js文件库没有啥区别。


这种方式足够简单,一般用于单页面网页开发。

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
22天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
22天前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
21 1
|
22天前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
27 1
|
22天前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
22天前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
JavaScript 数据安全/隐私保护
work02_vue页面打印水印
work02_vue页面打印水印
346 0
work02_vue页面打印水印
|
24天前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
|
25天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
31 1
vue学习第一章
|
25天前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
24 1
vue学习第三章
|
26天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
35 1
vue学习第四章