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文件库没有啥区别。


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

相关文章
|
16小时前
|
JavaScript Apache
Vue升级及版本不匹配解决_Vue packages version mismatch:
Vue升级及版本不匹配解决_Vue packages version mismatch:
6 1
|
16小时前
|
JavaScript 定位技术 开发者
vue项目使用腾讯地图获取定位
vue项目使用腾讯地图获取定位
4 0
|
16小时前
|
JavaScript 开发者
如何新建一个vue+vant移动端项目
如何新建一个vue+vant移动端项目
5 0
|
21小时前
|
JSON 移动开发 JavaScript
Vue03基础语法(样式绑定、事件处理器、表单、自定义指令、vue组件、组件通信【自定义事件】)
Vue03基础语法(样式绑定、事件处理器、表单、自定义指令、vue组件、组件通信【自定义事件】)
|
3天前
|
JavaScript 前端开发
Vue躬行记(7)——渲染函数和JSX
Vue躬行记(7)——渲染函数和JSX
|
JavaScript 前端开发 开发工具
webpack4搭建Vue开发环境笔记~~持续更新
项目git地址 一、node知识 __dirname: 获取当前文件所在路径,等同于path.dirname(__filename) console.
1365 0
|
4天前
|
前端开发 JavaScript
Vue底层实现原理总结
Vue底层实现原理总结
|
9天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
70 7
使用 Vue CLI 脚手架生成 Vue 项目
|
7天前
|
JavaScript
|
7天前
|
存储 JavaScript API
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
14 2