本文介绍: 是官方提供的一个全局命令工具。可以帮助我们 快速创建一个开发Vue 项目的标准化基础架子。(集成了 =webpack配置,即一个目录)一个页面可以拆分为一个个组件每个组件有着自己独立的结构、样式行为。好处:便于维护,利于复用,能够提升开发效率。组件分类:普通组件、根组件

1.Vue开发的两种方式

(1)核心包传统开发模式

基于html/css/js文件,直接引入,开发Vue

(2)工程化开发模式(更常用的一种):

主要是基于构建工具(例如,webpack)的环境中开发Vue可以利用构建工具编写一些高级的语法

但是问题需要一些复杂的配置(配置并不简单;各个项目雷同的配置;缺乏统一标准)

=> 需要一个工具,生成标准的配置!

Vue Cli 的提出!


2.Vue CLI

(1)基本介绍:

是官方提供的一个全局命令工具。

可以帮助我们 快速创建一个开发Vue 项目的标准化基础架子。(集成了 =webpack配置,即一个目录

(2)好处:

<1&gt;开箱即用,零配置;<2&gt;内置babel等工具;<3&gt;标准化;

(3)创建步骤

<1&gt;全局安装(一次):

yarn global add @vue/clinpm i @vue/cli -g

 <2&gt;查看vue安装版本

vue --version

<3&gt;创建项目架子

vue create project-name (项目名-不能用中文)

 (4)启动项目

进入目录输入

yarn serve 或者 npm run serve (serve这个名字不是固定的,可以找package.json设置


 3.项目的目录介绍和运行流程


4.组件化开发和根组件

(1)组件

一个页面可以拆分为一个个组件每个组件有着自己独立的结构、样式、行为。

好处:便于维护,利于复用,能够提升开发效率。

组件分类:普通组件、根组件

(2)根组件

整个应用最上层的组件,包裹所有普通的小组件。

(3)组件的构成

每一个组件由三部分构成:

<1&gt;template:结构,有且只能有一个根元素

<2>script:js逻辑

data是一个函数一个组件的data选项必须是一个函数来保证每个组件的实例维护独立的一份数据对象。每次创建新的组件实例,都会新执行一次data函数,得到一个新的对象

<3>style:样式(可支持 less,需要装包)

        让组件支持less

                <1>style标签lang=”less”,开启less功能

                <2>装包: yarn add less less-loader

        使用scoped:解决全局样式的问题

                默认情况下:写在组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题

                (1)全局样式:默认组件中的样式会作用到全局;

                (2)局部样式:可以给组件加上scoped属性,可以让样式只作用于当前的组件;

        原理:使得当前组件内的标签都被添加上哈希值,最终使得当前组件的元素才会有自定义属性

(4)组件的注册

使用组件的注册,使得整个Vue文件相对简单和条理;

<1>普通组件的注册-局部注册

<2>普通组件的注册-全局注册

注册的时候,组件名和组件对象是一样的,可省略组件对象 

(5)组件之间的通信

组件通信,就是指组件与组件之间的数据传递。由于组件之间的数据是独立的,无法直接访问其他组件的数据,当我们想用其他组件的数据,那此时就涉及到了组件通信

首先要考虑组件之间的关系有两种,

<1>父子关系
父组件通过 props 将数据传递给子组件;
子组件利用 $emit 通知父组件修改更新
对于prop的一些介绍:组件上注册的一些自定义属性,作用是向子组件传递数据;可以传递任意数量和类型参数
props的校验:组件之间的prop是不可以乱穿的,因而
为组件的 prop 指定
验证要求
,不符合要求,控制台就会有
错误提示
→ 帮助开发者快速发现错误
// 简单的一种
props: {
    校验的属性名: 类型 // Number String Boolean ...
},

// 自定义校验
props: {
    校验的属性名: {
        type: 类型, // Number String Boolean ...
        required: true, // 是否必填
        default: 默认值, // 默认值
        validator (value) {
        // 自定义校验逻辑
        return 是否通过校验
        }
    }
},

最后再总结一下,data vs. props,我们知道,这两种都可以给组件传递数据;

对于 data,他是组件内部的数据,因而是可以随便改;

但是对于 props,他是外部传来的数据,不能直接改,要遵循单向数据流;(即我们不能直接在子组件中更改参数的值,应该使用函数并且配合$emit告诉父组件使得父组件来进行更改)

<2>非父子关系


参考:

040-工程化开发和脚手架_哔哩哔哩_bilibili

原文地址:https://blog.csdn.net/qq_45830251/article/details/134573449

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_2475.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注