Vue单页面开发环境安装

约定不等于承诺〃 2023-01-11 08:56 71阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 背景
 *  2. 使用标签引入Vue
 *  3. 测试一下
 *  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>

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

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

当然也可以直接下载到项目中，自行加以引用，此处附上下载链接：[下载链接][Link 2]。

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

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

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[Link 2]: https://cn.vuejs.org/v2/guide/installation.html

发表评论取消回复

表情：

评论列表（有 0 条评论，71人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue搭建多页面开发环境

自从习惯开发了单页面应用，对多页面的页面间的相互跳转间没有过渡效果、难维护极度反感。但是最近公司技术老大说，当一个应用越来越大的时候单页面模式应付不来，但是没讲怎么应付不来，所

た入场券/ 2023年10月11日 14:29/ 0 赞/ 5 阅读

相关 vue多页面与单页面开发的区别。

进入一家新的公司，要开发移动端app项目，前端技术选型时前端组长选的是vue的多页面开发，当时很蒙，vue不是单页面开发吗？咋出来多页面的。接触之后才发现确实存在也挺简单的，省

电玩女神/ 2023年10月11日 14:25/ 0 赞/ 8 阅读

相关 Vue单页面开发环境安装

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 背景 2. 使用标签引入Vue 3. 测试一下 4. 总结

约定不等于承诺〃/ 2023年01月11日 08:56/ 0 赞/ 72 阅读

相关 vue.js开发环境安装教程

一、简介 Vue.js 是什么 Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开

叁歲伎倆/ 2022年06月13日 06:57/ 0 赞/ 136 阅读

相关 Vue单页面应用

总结如下：单页面应用指一个系统只加载一次资源，然后下面的操作交互、数据交互是通过router、ajax来进行，页面并没有刷新； <1>在vue搭建的

谁践踏了优雅/ 2022年05月26日 04:22/ 0 赞/ 228 阅读

相关 Mac安装vue.js开发环境

本来以为在Mac上搭建vue.js的环境挺简单的，谁知遇到各种问题（可能是RP问题），网上解决的方法也寥寥无几，这里就记录下遇到的坑。一、vue.js开发环境 ---

待我称王封你为后i/ 2022年04月22日 00:16/ 0 赞/ 181 阅读

相关用python+vue+node开发单页面网站

一.开发前准备 1.安装node：为了运行npm命令,该命令会开启网站服务器以及完成相关配置详情见：[https://blog.csdn.net/mrwangwe

曾经终败给现在/ 2022年02月18日 10:11/ 0 赞/ 298 阅读

相关 vue 单页面重载（刷新）

首先先说一下标题，此处的重新（刷新）并不是浏览器 `reload` ，只是当前页面组件重新 `create` 。最近重构的项目中有重新加载的按钮，以前直接是 `locati

刺骨的言语ヽ痛彻心扉/ 2021年12月17日 00:55/ 0 赞/ 490 阅读

相关 vue.js从环境安装到开发

1.安装node.js 官网：[https://nodejs.org/en/][https_nodejs.org_en] 检测是否安装成功： node -v

电玩女神/ 2021年10月01日 10:38/ 0 赞/ 257 阅读

相关 vue单页面应用Demo

一实战 <template> <div id="app"> <ul> <li v-for="

怼烎@/ 2021年07月25日 02:41/ 0 赞/ 412 阅读