VUE - 1 - vue的第一个小案例

wendyGao_Yin

已于 2022-02-16 14:58:38 修改

阅读量422

点赞数

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

于 2022-02-16 14:57:20 首次发布

本文链接：https://blog.csdn.net/wendyGao_Yin/article/details/122958352

版权

VUE 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

使用vue之前第一件事是安装vue。

Hello Vue

安装VUE
扩展
- 安装谷歌的vue开发者工具
- 安装VScode的 Live Server 插件

安装VUE

vue可以直接下载引入，也可以使用npm安装使用，初期选择直接下载使用吧，简单粗暴不易出错。选择开发版本。

开发版本包含完整的警告和调试模式。
生产版本删除了警告，33.46KB min+gzip。

也可以选择CDN方式
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

前期问题解决

下载开发者工具

引入成功后在页面打开控制台，输入Vue就可以看到下图。
在这里插入图片描述
下载谷歌vue开发者工具百度有很多。

配置全局属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
</head>
<body>
   <h1>Hello Vue</h1> 

<!-- 引入VUE -->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    // 设置为 false 以阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip=false;
</script>
</body>
</html>

效果展示：
在这里插入图片描述

图标问题

上图出现一个新的报错信息 ‘找不到favicon.icon’
解决办法：

从官网下载了vue的图标logo.svg,放到项目根目录下（如图左边所示）。
添加代码<link rel="icon" href="../logo.svg">在 index.html 的 head 标签内（如图右边所示）。

结果展示：图标正常展示，报错消失。

Hello Vue 小案例

所有的问题处理完毕后可以开始第一个小案例了。
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
    <link rel="icon" href="../logo.svg">
</head>
<body>
    <h1>Hello Vue</h1>
    <!-- 准备一个容器 -->
    <!-- root容器中的代码依然符合html规范，只是混入了一些特殊的vue语法 -->
    <!-- root容器里的代码被称为【VUE模板】 -->
    <div id="root">
        <p> 你好 {{msg}} ！</p>
    </div> 

<!-- 引入VUE -->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    // 设置为 false 以阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip=false;
    // 创建Vue实例
    var vm = new Vue({
        //el用于指定当前vue实例是哪个容器，通常是css选择器字符串。
        el:"#root",

        // data用于存储vue实例的数据，data中的数据供el所指定容器使用，值为对象和函数两种数据类型，
        data:{
            msg:"Vue"
        }
    })
</script>
</body>
</html>

页面效果：在这里插入图片描述
此时，页面右上角的Vue 图标被点亮了。

扩展

安装谷歌的vue开发者工具

获取谷歌的vue开发者工具（vue 和vue3的都安排了）
链接：https://pan.baidu.com/s/1q3EBrhpMYouL0AMy0H43ZQ?pwd=6rfy
安装
1. 点击谷歌浏览器右上角竖着排列的三个点，选择‘更多工具’ -> 点击‘扩展程序’。
2. 把下载的vue扩展插件拖到页面安装
  
  还可以去谷歌应用商店搜索安装。
  安装结束后重启浏览器，就可以使用该扩展程序了
  
  把vue开发者工具固定到地址栏。

安装VScode的 Live Server 插件

右键点击index.html,选择Open with Live Server
在这里插入图片描述
然后会自动打开浏览器，展示对应的页面。

可以看到页面地址是127.0.0.1:5500，这个效果是因为VSCode编辑器中安装了一个插件。
安装步骤：打开VSCode 点击插件图标，输入‘Live Server’即可出现想要的插件，点击’安装‘即可。安装完毕重启编辑器插件即可生效使用。
在这里插入图片描述

wendyGao_Yin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE - 1 - vue的第一个小案例

使用vue之前第一件事是安装vue。Hello Vue安装VUE前期问题解决下载开发者工具配置全局属性图标问题Hello Vue 小案例扩展安装谷歌的vue开发者工具安装VScode的 Live Server 插件安装VUEvue可以直接下载引入，也可以使用npm安装使用，初期选择直接下载使用吧，简单粗暴不易出错。选择开发版本。开发版本包含完整的警告和调试模式。生产版本删除了警告，33.46KB min+gzip。也可以选择CDN方式<script src="https://cdn.
复制链接

扫一扫