Vue3中文文档：https://cn.vuejs.org/guide/quick-start.html

1. Vue概述

1.1 Vue简介

简介：

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。

Vue 的两个核心功能：

声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
响应性：Vue 会自动跟踪 JavaScript 状态变化并在改变发生时响应式地更新 DOM。

1.2 MVVM

MVVM模式：

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。

mvvm

V：View层，即视图，ui界面，将数据和动态交互效果展示出来。就是我们平时用html+css+js显示出来让用户看的东西。

VM：View-Model，视图模型，实现Model和View的通信：监听Model的数据改变，处理用户交互操作，并且重新渲染视图，更新页面。

M：Model，即模型，在model层，定义数据和业务逻辑，常用的就是JAVA、C#，当然还有数据库。

MVVM优点：

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点：

低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的”View”上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。
可测试。界面素来是比较难于测试的，测试可以针对ViewModel来写。

1.3 总结

Vue.js 是 MVVM 的实现者，核心就是实现了 DOM 监听和数据绑定。

2. 第一个Vue程序

实现步骤：

新建vue-01.html文件

导入 Vue.js

CDN导入

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

1	`<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>`

创建一个 Vue 的实例

el: ‘#vue’：绑定元素的ID

data:{message:’Hello Vue!’}：数据对象中有一个名为message的属性，并设置了初始值 Hello Vue！

<script>
    var vm = new Vue({
        el: "#app",
        //Model 数据
        data: {
            message: "Hello Vue！"
        }
    });
</script>

将数据绑定到页面元素（视图层）

<!--view层 模板-->
<div id="app">
    {{message}}
</div>

完整html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.导入 Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>

<!--view层 模板-->
<div id="app">
    {{message}}
</div>
<script>
    var vm = new Vue({
        el: "#app",
        //Model 数据
        data: {
            message: "Hello Vue！"
        }
    });
</script>
</body>
</html>

3. Vue快速入门

3.1 Vue基本语法

指令带有前缀v以表示它们是Vue提供的特殊特性。它们会在渲染的DOM上应用特殊的响应式行为在这里，该指令的意思是：“将这个元素节点的title特性和Vue实例的message属性保持一致”。

v-bind

使用v-bind来绑定元素特性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.导入 Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>

<!--view层 模板-->
<div id="app">
    <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        //Model 数据
        data: {
            message: "Hello Vue！"
        }
    });
</script>
</body>
</html>

v-if和v-else

v-if和v-else判断语句：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.导入 Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>

<!--view层 模板-->
<div id="app">
    <h1 v-if="flag==true">Yes</h1>
    <h1 v-else>No</h1>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            flag: true
        }
    });
</script>
</body>
</html>

前端显示内容为Yes，若在前端console输入vm.flag=false则显示内容变为No

v-else-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.导入 Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>

<!--view层 模板-->
<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else-if="type==='C'">C</h1>
    <h1 v-else>D</h1>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            type: 'A'
        }
    });
</script>
</body>
</html>

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.导入 Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>

<!--view层 模板-->
<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            items: [
                {message: 'vue'},
                {message: 'react'},
                {message: 'angular'}
            ]
        }
    });
</script>
</body>
</html>

测试结果：

QQ截图20221022222048

3.2 Vue绑定事件

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click=”methodName”或 @click=”handler”。

v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.导入 Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>

<!--view层 模板-->
<div id="app">
    <button v-on:click="sayHello">click</button>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            
        },
        //方法必须定义在vue的 methods 对象中，v-on：事件
        methods: {
            sayHello : function(){
                alert("Hello Vue!");
            }
        }
    });
</script>
</body>
</html>

测试：

QQ截图20221024184625

3.3 Vue双向绑定

在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。v-model 指令帮我们简化了手动连接值绑定和更改事件监听器。

v-model 还可以用于各种不同类型的输入，<textarea>、<select> 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：

文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；
<input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件；
<select> 会绑定 value property 并侦听 change 事件：

v-model

文本框测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.导入 Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>

<!--view层 模板-->
<div id="app">
    输入的文本：<input type="text" v-model="message">{{message}}
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
          message: "123456"  
        },
    });
</script>
</body>
</html>

其他用法详见官方文档：https://cn.vuejs.org/guide/essentials/forms.html

4. 组件

4.1 什么是组件

组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构：

components.7fbb3771

4.2 组件的使用

使用步骤：

定义一个组件
使用组件
传递 props

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.导入 Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>

<!--view层 模板-->
<div id="app">
    <!--组件：传递给组件中的值：props-->
    <linmuchun v-for="item in items" v-bind:arg="item"></linmuchun>
</div>
<script>
    //定义一个Vue组件component
    Vue.component("linmuchun",{
        props: ['arg'],
        template: '<li>{{arg}}</li>'
    });

    var vm = new Vue({
        el: "#app",
        data: {
            items: ["Java","C++","Python"]
        }
    });
</script>
</body>
</html>

测试结果：

QQ截图20221024193735

5. 计算属性

computed计算属性的作用是对数据的计算和缓存，优点是能够提高性能。

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.导入 Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>

<div id="vue">
    <p>currentTime1{{currentTime1()}}</p>
    <p>currentTime2{{currentTime2}}</p>
</div>

<script>
    var vm = new Vue({
        el: '#vue',
        data: {
            message: "Hello Vue!"
        },
        methods: {
            currentTime1: function(){
                return Date.now();
            }
        },
        computed: {
            currentTime2: function(){
                this.message;
                return Date.now();
            }
        }
    })
</script>

</body>
</html>

测试结果：

QQ截图20221025095756

6. 插槽

6.1 插槽slot

<slot> 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。

slots.dbdaf1e8

最终渲染出的 DOM 是这样：

1	`<button class="fancy-btn">Click me!</button>`

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.导入 Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>

<div id="vue">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items>
    </todo>
</div>

<script>
    //slot插槽
    Vue.component("todo",{
        template: '<div>\
                        <slot name="todo-title"></slot>\
                        <ul>\
                            <slot name="todo-items"></slot>\
                        </ul>\
                   </div>'
    });

    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    })

    Vue.component("todo-items",{
        props: ['item'],
        template: '<li>{{item}}</li>'
    })

    var vm = new Vue({
        el: '#vue',
        data: {
            title: "书籍列表：",
            todoItems: ['Java','Python','C++']
        }
    })
</script>

</body>
</html>

测试结果：

QQ截图20221025104324

6.2 自定义事件内容分发

组件和实例之间方法不能互调而要删除的节点属于实例的属性所以通过事件分发让组件中定义的方法转向实例中定义的方法然后删除节点。

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.导入 Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>

<div id="vue">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems" v-bind:item="item"
                    v-bind:index="index" v-on:remove="removeItems(index)" v-on:key="index"></todo-items>
    </todo>
</div>

<script>
    //slot插槽
    Vue.component("todo",{
        template: '<div>\
                        <slot name="todo-title"></slot>\
                        <ul>\
                            <slot name="todo-items"></slot>\
                        </ul>\
                   </div>'
    });

    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    })

    Vue.component("todo-items",{
        props: ['item','index'],
        template: '<li>{{index}}----{{item}} <button v-on:click="remove">删除</button></li>',
        methods: {
            remove: function(index){
                //this.$emit 自定义事件分发
                this.$emit('remove',index);
            }
        }
    })

    var vm = new Vue({
        el: '#vue',
        data: {
            title: "书籍列表：",
            todoItems: ['Java','Python','C++']
        },
        methods:{
            removeItems: function(index){
                console.log(this.todoItems[index]+"删除成功！");
                this.todoItems.splice(index,1); //一次删除一个元素
            }
        } 
    })
</script>

</body>
</html>

测试结果：

QQ截图20221025185459

7. 生命周期

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

vue-life

8. Axios

Axios中文文档：http://www.axios-js.com/

8.1 Axios概述

Axios是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现AJAX异步通信。

功能特性：

从浏览器中创建 XMLHttpRequests
从node.js创建http请求
支持Promise API[JS中链式编程]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF(跨站请求伪造)

由于 Vue.js 是一个视图层框架并且作者（尤雨溪）严格准守SoC（关注度分离原则）所以 Vue.js 并不包含AJAX的通信功能，为了解决通信问题，作者单独开发了一个名为 vue-resource 的插件，不过在进入2.0版本以后停止了对该插件的维护并推荐了 Axios 框架。少用jQuery，因为它操作Dom太频繁。

8.2 vue-axios

咱们开发的接口大部分都是采用JSON格式，可以先在项目里模拟一段JSON数据，数据内容如下：创建一个名为data.json的文件并填入上面的内容，放在项目的根目录下

{
    "name": "一腔诗意啊",
    "url": "https://yiqiangshiyia.cn/",
    "page": 1,
    "isNonProfit": true,
    "address": {
      "street": "长江路",
      "city": "山东青岛",
      "country": "中国"
    },
    "links": [
      {
        "name": "bilibili",
        "url": "https://space.bilibili.com/95256449"
      },
      {
        "name": "CSDN",
        "url": "https://csdn.net"
      },
      {
        "name": "百度",
        "url": "https://www.baidu.com/"
      }
    ]
}

导入axios

1 2	`<!--导入axios文件--> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>`

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.导入 Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <!--导入axios文件-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

<div id="vue">
    <div>{{info.name}}</div>
    <div>{{info.adddress.street}}<div>
</div>

<script>
    var vm = new Vue({
        el: '#vue',
        data: {
            return{
                //请求的返回参数合适，参数必须和json字符串一致
                info:{
                    name: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    }
                }
            }
        },
        //钩子函数，链式编程，ES6新特性
        mounted(){
            axios.get('D:\IntelliJ IDEA\IntelliJ IDEA代码\Vue\data.json').then(response=>(this.info=response.data));
        }
    })
</script>

</body>
</html>

9. 路由

9.1 Vue Router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由 / 视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

使用 Vue.js 和 vue-router 创建单页应用非常的简单，使用 Vue.js 开发，整个应用已经被拆分成了独立的组件。在使用 vue-router 时，我们需要做的就是把路由映射到各个组件，vue-router 会把各个组件渲染到正确的地方。

vue 路由实现的步骤：

在引入vue之后引入vue路由插件
在根组件模板中写入导航条，使用router-link标签（固定路由）
创建全局组件，有多少路由创建多少组件。
创建vuerouter对象，里面有routes字段是个数组，里面有对象，对象中包含path，component字段值是全局组件的返回值，ye可以有name字段。
在跟组件中写入router字段，它的值是vuerouter对象的返回值
在跟组件模板中添加router-view字段，路由出口。

vue路由的简单使用：

创建router文件夹
npm 下载资源
1
2
npm install vue npm install vue-router
新建一个lib目录，将资源复制出来
创建一个路由.html

引入js

1
2
3

<!--资源导入: 一定要注意导入顺序的问题-->
<script src="./lib/vue.min.js"></script>
<script src="./lib/vue-router.min.js"></script>

编写html

<!-- app -->
<div id="app">
	<h1>Hello App!</h1>
	<p>
    	<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
		<!-- 通过传入 `to` 属性指定链接. -->
        <router-link to="/">首页</router-link>
        <router-link to="/student">会员管理</router-link>
        <router-link to="/teacher">讲师管理</router-link>
	</p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

编写js

<script>
    // 1. 定义路由组件。
    // 复杂的组件也可以从独立的vue文件中引入
    const Welcome = { template: '<div>欢迎</div>' }
    const Student = { template: '<div>student list</div>' }
    const Teacher = { template: '<div>teacher list</div>' }

    // 2. 定义路由
    // 每个路由应该映射一个组件。
    const routes = [
        { path: '/', redirect: '/welcome' }, //设置默认指向的路径
        { path: '/welcome', component: Welcome },
        { path: '/student', component: Student },
        { path: '/teacher', component: Teacher }
    ]

    // 3. 创建router实例，然后传routes配置
    const router = new VueRouter({
    	routes //（缩写）相当于 routes: routes
    })

    // 4. 创建和挂载根实例。
    // 从而让整个应用都有路由功能
    new Vue({
        el: '#app',
        router
    })
</script>

测试

9.2 路由的使用

使用步骤：

components 目录下存放我们自己编写的组件

定义一个 Content.vue 的组件和一个 Main.vue 的组件

Content.vue

<template>
	<div>
		<h1>内容页</h1>
	</div>
</template>

<script>
	export default {
		name:"Content"
	}
</script>

Main.vue

<template>
    <div>
        <h1>首页</h1>
    </div>
</template>

<script>
	export default {
		name:"Main"
	}
</script>

安装路由

在src目录下新建一个文件夹：router，新建 index.js 文件专门存放路，将vue的两个组件配置到路由中

import Vue from'vue'
//导入路由插件
import Router from 'vue-router'
//导入上面定义的组件
import Content from '../components/Content'
import Main from '../components/Main'
//安装路由
Vue.use(Router) ;
//配置路由
export default new Router({
	routes:[
    {
        //路由路径
        path:'/content',
        //路由名称
        name:'content',
        //跳转到组件
        component:Content
        },{
        //路由路径
        path:'/main',
        //路由名称
        name:'main',
        //跳转到组件
        component:Mian
        }
    ]
});

在 main.js 中配置路由

import Vue from 'vue'
import App from './App'

//导入上面创建的路由配置目录
import router from './router'//自动扫描里面的路由配置

//来关闭生产模式下给出的提示
Vue.config.productionTip = false;

new Vue({
	el:"#app",
	//配置路由
	router,
	components:{App},
	template:'<App/>'
});

在 App.vue 中使用路由

<template>
	<div id="app">
		<!--
			router-link：默认会被渲染成一个<a>标签，to属性为指定链接
			router-view：用于渲染路由匹配到的组件
		-->
		<router-link to="/">首页</router-link>
		<router-link to="/content">内容</router-link>
		<router-view></router-view>
	</div>
</template>

<script>
	export default{
		name:'App'
	}
</script>
<style></style>

启动测试一下：npm run dev

10. Element-UI

Element UI官网：https://element.eleme.cn/#/zh-CN

10.1 Element-UI概述

Elementui它是由饿了么前端团队推出的基于 Vue 封装的 UI 组件库，提供PC 端组件，简化了常用组件的封装，降低开发难度。

10.2 Vue-Element UI

创建工程：

创建一个名为 hello-vue 的过程
1
vue init webpack hello-vue

安装依赖

需要安装vue-router、element-ui、sass-loader和node-sass四个插件

#进入工程目录
cd hello-vue
#安装vue-router
npm install vue-router --save-dev
#安装element-ui
npm i element-ui -S
#安装依赖
npm install
#安装SASS加载器
cnpm install sass-loader node-sass --save-dev
#启动测试
npm run dev

npm install moduleName：安装模块到项目目录下
npm install -g moduleName：-g 的意思是将模块安装到全局，具体安装到磁盘的哪个位置，要看 npm config prefix 的位置
npm install -save moduleName：–save 的意思是将模块安装到项目目录下，并且在 package 文件的 dependencies 节点写入依赖，-S 为该命令的缩写
npm install -save-dev moduleName：–save-dev 的意思是模块安装到项目目录下，并在 package 文件的 devDependencies 节点写入依赖，-D为该命令的缩写

创建文件夹 element-ui
新建一个lib目录，导入库

创建 ui.html，引入 js 和 css 文件

<!-- import CSS -->
<link rel="stylesheet" href="./lib/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="./lib/vue.min.js"></script>
<!-- import JavaScript -->
<script src="./lib/element-ui/lib/index.js"></script>

编写页面

<div id="app">
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
    	<p>Try Element</p>
    </el-dialog>
</div>

编写JS

<script>
    new Vue({
        el: '#app',
        data: function () {//定义Vue中data的另一种方式
        	return { visible: false }
        }
    })
</script>

运行测试效果

11. 前端模块化开发

11.1 webpack与vue-cli

webpack：

webpack就是前端资源模块化管理和打包工具，它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源，还可以将按需加载的模块进行代码分割，等到实际需要的时候再异步加载（如图），而要它自动实现这些功能，你得提前编辑好配置文件。

webpack

vue-cli：

vue-cli是脚手架工具，其作用就是用配置好的模板迅速搭建起一个项目工程来，省去自己配置webpack配置文件的基本内容。

11.2 创建一个Vue项目

安装好node环境以及vue-cli后，通过 ‘vue init 模板名项目名’，然后简单回答部分基本问题后就能快速建立起vue工程项目：

QQ截图20221026210635

创建完成的vue工程：

QQ截图20221026211034

控制台 npm run dev 启动项目：

QQ截图20221026221536

11.3 App.vue、main.js和index.html

vue项目中App.vue 、main.js和 index.html的关联：

main.js是我们的入口文件，主要作用是初始化vue实例并使用需要的插件。
1
2
3
4
5
6
7
import Vue from 'vue' import App from './App' new Vue({ el: '#app', template: '<App/>', components: { App } })
- import App from ‘./App’ 将组件App被引入了main.js中。
- el:’#app’ 将vue实例挂载到#app （即id=‘app’的dom元素，index.html中定义的app）
- components: { App } 局部注册 App组件
- template: ‘<App/>’ 使用字符串模板’<App/>’代替el中挂载的元素,这样<App/>组件就替换掉了index.html中id=’app’的元素。

App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。


<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>

<script>
import Hello from './components/Hello'

export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

总结：

index.html文件入口
src放置组件和入口文件
node_modules为依赖的模块
cofig中配置了路径端口值等
build中配置了webback的基本配置、开发环境配置、生产环境配置等

main.js是我们的入口文件，主要用于初始化vue实例，并使用需要的插件。

App.vue是我们的主组件，所有的页面都在App.vue下进行切换。我们可以将router标示为App.vue的子组件。
在每个模板中给style设置一个scoped属性，意为该style的属性只对这个组件起作用，不会影响到其他组件中含有相同class的元素。

index.html中是怎么引入main.js文件

是构建工具webpack的功劳，当我们bulid的时候构建工具将所有的 js，组件打包成一个独立的js文件，引入到index.html中。在npm run dev 的时候，可以通过浏览器开发人员工具调式代码看出来。

20221026

大前端

#Vue

大前端-Vue

https://yiqiangshiyia.cn/2022/10/22/大前端-Vue/

作者

一腔诗意啊

发布于

2022年10月22日

许可协议

Spring常用注解总结上一篇

SpringBoot-Dubbo/Zookeeper 下一篇