VUE3.0,DAY1

  • VUE搭建开发环境
  • 上手第一个案例


VUE搭建开发环境

1.搜VUE官网，然后进入学习按钮，有个安装选项，这里进行安装VUE的工作。

vue3 安装sxios vue3.0安装教程_html5


2.点击安装，选择直接用script标签引入vue方式，这里此方式指我们把VUE下载到本地，以后直接用script标签在页面中引入即可，另一种不同的方式是script引入在线vue。本地方式更快些。

vue3 安装sxios vue3.0安装教程_vue_02


3.安装选择开发版本，功能较全，在桌面新建文件夹，随后把下载位置选在该文件夹内。下载成功后，如下所示。

vue3 安装sxios vue3.0安装教程_前端_03


4.随后使用VS code打开文件夹。

vue3 安装sxios vue3.0安装教程_js_04


5.打开后 如下图所示。

vue3 安装sxios vue3.0安装教程_js_05


vue3 安装sxios vue3.0安装教程_vue3 安装sxios_06

6.新建一个文件夹，叫初识vue。

vue3 安装sxios vue3.0安装教程_vue_07


7.在文件夹内新建html文件。并输出以下代码，即可引入vue。

vue3 安装sxios vue3.0安装教程_vue3 安装sxios_08

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识vue</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js"></script>
    <!--上行代码中的src是vue.js的地址。输入两个.表示返回上一级。
</head>
<body>
    
</body>
</html>

8.在该html编辑页面下，鼠标右键打开该html文件。使用默认浏览器打开。

vue3 安装sxios vue3.0安装教程_vue3 安装sxios_09


9.打开后页面首先是空白的，正常，因为任何显示有关的代码还没写。

vue3 安装sxios vue3.0安装教程_html5_10


10.按F12，console选项下出现两个提示信息。第一个说请你下载VUE的开发者工具达到更好的体验。第二句话说正在运行开发者版本的vue，确保你在生产中不要使用该版本，使用生产版本。这两句均为温馨小提示。

vue3 安装sxios vue3.0安装教程_html5_11


11.vue的API配置，第一个vue.config全局配置，还是刚才的网页，然后按F12，在下方输入vue.config查看是否会出现官网上所说的内容。

vue3 安装sxios vue3.0安装教程_html5_12


vue3 安装sxios vue3.0安装教程_js_13


vue3 安装sxios vue3.0安装教程_js_14


12.上图中的productionTip是干什么用的呢，在官网上文档说明如下，阻止启动时生成生产提示。我们在代码编辑页面，输入一段代码，即可关闭该项提示。即关闭了第10点中说的第二点提示。

vue3 安装sxios vue3.0安装教程_html5_15

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识vue</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>

<body>
    <!--下边的vue.config选项关闭了启动时生成生产提示-->
    <script type="text/javascript">
        Vue.config.productionTip = false
    </script>
</body>

</html>

上手第一个案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识vue</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <!--插值语法，两组花括号，中间加入data中的变量名，则变量的内容就显示在此处-->
        <h1>入手{{pai_xu}}案例</h1>
    </div>
    <!--下边的vue.config选项关闭了启动时生成生产提示-->
    <script type="text/javascript">
        Vue.config.productionTip = false

        //创建vue实例，习惯用一个变量来接该vue实例，此处用x
        const x = new Vue({
            el: '#root',  //el是element的简称，这里类似于css的一个选择器，选中id为root的容器，建立vue和容器间联系
            //el:document.getElementById('root')这种写法与上边的区别在于，这里是手动给当前el配置容器，上边的是给他一个名字，让vue自行寻找。
            //如果容器中用的是id=“名”，则这里用#名，若是用的class=“名”，则这里用.名
            //多组vue中的参数之间用逗号隔开，即写完el之后，在写data，之间要加逗号
            data: {
                pai_xu: '第二个'
            }
        })

    </script>
</body>

</html>

显示的结果如下：

vue3 安装sxios vue3.0安装教程_前端_16