Vue组件化、单文件组件以及使用vue-cli(脚手架)

简介: Vue组件化、单文件组件以及使用vue-cli(脚手架)

1.Vue组件化

1.1 什么是组件

(1) 传统方式开发的应用:

一个网页通常包括三部分:结构(HTML)、样式(CSS)、交互(JavaScript)

①传统应用存在的问题:

a.关系纵横交织,复杂,牵一发动全身,不利于维护

b.代码虽然复用,但复用率不高。

(2)组件化方式开发的应用

①每一个组件都有独立的js,独立的css,这些独立的js和css只供当前组件使用,不存在纵横交错。更加便于维护。

②代码复用性增强。组件不仅让js、css复用了,HTML代码片段也复用了(因为要使用组件直接引入组件即可)。

(3)什么是组件?

①模块:一个大的js文件按照模块化拆分规则进行拆分,生成多个js文件,每一个js文件叫做模块。凡是采用模块方式开发的应用都可以称为模块化应用。

②组件:实现应用中局部功能的代码和资源的集合。凡是采用组件方式开发的应用都可以称为组件化应用。

③任何一个组件中都可以包含HTML、CSS、JS、图片、声音、视频等这些资源。从这个角度也可以说明组件是可以包括模块的。

(4)组件的划分粒度很重要,粒度太粗会影响复用性。为了让复用性更强,Vue的组件也支持父子组件嵌套使用。

1.2 组件的使用

(1)创建组件:Vue.extend({ 该配置项和new Vue的配置项基本相同 })

  • 创建组件对象也有简写形式:Vue.extend()可以省略。直接写:{}。在底层还是会调用的,在注册组件的时候会调用
  • Vue.extend配置项和new Vue的配置项区别主要有以下几点:
    a.创建Vue组件的时候,配置项中不能使用el配置,需要使用template配置项来配置模板语句
    b.配置项中的data不能直接使用对象的形式,必须使用function,因为function可以保证data不是共享的,这样在多个组件下不会出现问题

(2)注册组件

①局部注册(使用components配置项)

components : {

组件的名字 : 组件对象

}

②全局注册

Vue.component(‘组件的名字’ , 组件对象)

(3)使用组件

(4)实例

<body>
    <div id="app">
        <!-- 3.使用组件 -->
        <userlist></userlist>
    </div>
    <script>
        // 1.创建组件
        const myComponent = Vue.extend({
            template: `
            <ul>
                <li v-for="(user,index) of users" :key="user.id">
                    {{index}},{{user.name}}
                </li>
            </ul>
        `,
            data() {
                return {
                    users: [
                        { id: '001', name: 'jack' },
                        { id: '002', name: 'lucy' },
                        { id: '003', name: 'james' }
                    ]
                }
            }
        })
        // Vue实例
        new Vue({
            el: '#app',
            // 2.注册组件
            components: {
                userlist: myComponent
            }
        })
    </script>
</body>

1.3 组件的名字

(1)全部小写

(2)首字母大写,后面都是小写

(3)kebab-case命名法(例如:user-login)

(4)CamelCase命名法(驼峰式命名法,例如UserLogin),但是这种方式只允许在脚手架环境中使用

1.4 嵌套组件

<body>
    <div id="root"></div>
    <script>
        //创建Y1组件
        const y1 = {
            template: `
                <div>
                    <h3>Y1组件</h3>
                </div>
            `
        }
        //创建X1组件
        const x1 = {
            template: `
                <div>
                    <h3>X1组件</h3>
                </div>
            `
        }
        //创建Y组件
        const y = {
            template: `
                <div>
                    <h2>Y组件</h2>
                    <y1></y1>
                </div>
            `,
            components: { y1 }
        }
        //创建X组件
        const x = {
            template: `
                <div>
                    <h2>X组件</h2>
                    <x1></x1>
                </div>
            `,
            components: { x1 }
        }
        //创建app组件
        const app = {
            template: `
                <div>
                    <h1>App组件</h1>
                    <x></x>
                    <y></y>
                </div>
            `,
            //注册X,y组件
            components: { x, y }
        }
        //vm
        const vm = new Vue({
            el: '#root',
            template: `
                <app></app>
            `,
            //注册app组件,名字相同可以简写为:components: { app }
          components: { app,app }
          
        })
    </script>
</body>

2.单文件组件

(1)什么是单文件组件?

①一个文件对应一个组件,不再使用一个html文件中定义了多个组件

(2) 单文件组件的名字通常是:x.vue,这是Vue框架规定的,只有Vue框架能够认识,浏览器无法直接打开运行。需要Vue框架进行编译,将x.vue最终编译为浏览器能识别的html、js、css。

(3) 单文件组件的文件名命名规范和组件名的命名规范相同:

①全部小写:userlist

②首字母大写,后面全部小写:Userlist

③kebab-case命名法:user-list

④CamelCase命名法:UserList(我们使用这种方式,和Vue开发者工具呼应。)

(4)x.vue 文件的内容包括三块:

(1) 结构:<template>HTML代码</template>

(2) 交互:<script>JS 代码</script>

(3) 样式:<style>CSS 代码</style>

其中,每个组件中必须包含 template 模板结构,而 script 行为和 style 样式是可选的组成部分。

(4) 使用export 导出(暴露)组件,在需要使用组件的x.vue文件中使用import导入组件

①默认导入和导出

export default {}

import 任意名称 from‘模块标识符’

②按需导入和导出

export {a, b}

import {a, b} from ‘模块标识符’

③分别导出

export var name = ‘zhangsan’

export function sayHi(){}

2.1 vue 组件组成结构

2.1.1 template -> 组件的模板结构

(1)组件的 template 节点

vue 规定:每个组件对应的模板结构,需要定义到 <template> 节点中。

注意:<template> 是 vue 提供的容器标签,只起到包裹性质的作用,它不会被渲染为真正的 DOM 元素。

(2)在 template 中定义根节点

①在 vue 2.x 的版本中,<template> 节点内的 DOM 结构仅支持单个根节点:

<template>
  <div>//该实例以div为根节点
    <h1>这是App组件1</h1>
    <h2>>这是App组件2</h2>
  </div>
</template>

②但是,在 vue 3.x 的版本中,<template> 中支持定义多个根节点:

<template>
  <h1>这是App组件1</h1>
  <h2>>这是App组件2</h2>
</template>

2.1.2 组件的 script 节点

(1)vue 规定:组件内的 <script> 节点是可选的,开发者可以在 <script> 节点中封装组件的 JavaScript 业务逻辑。

<script > 节点的基本结构如下:

(1)script 中的 name 节点

①可以通过 name 节点为当前组件定义一个名称:

②在使用 vue-devtools 进行项目调试的时候,自定义的组件名称可以清晰的区分每个组件。

(2) script 中的 data 节点

①vue 组件渲染期间需要用到的数据,可以定义在 data 节点

②vue 规定:组件中的 data 必须是一个函数,不能直接指向一个数据对象。

<template>
  <div>
    <h1>这是App组件1</h1>
    <h2>这是App组件2---{{ username }}}</h2>
  </div>
</template>
<script>
export default {
  //name属性指向的是当前组件的名称(建议:每个单词的首字母大写)
  name: 'MyApp',
  data() {
    return {
      username: 'zhangsan',
    }
  },
}
</script>

(3)script 中的 methods 节点

组件中的事件处理函数,必须定义到 methods 节点中,示例代码如下:

2.1.3 组件的 style 节点

(1)vue 规定:组件内的 <style> 节点是可选的,开发者可以在 <style> 节点中编写样式美化当前组件的 UI 结构。

<script > 节点的基本结构如下:

(2)其中 <style> 标签上的 lang=“css” 属性是可选的,它表示所使用的样式语言。默认只支持普通的 css 语法,可

选值还有 less、scss 等。

(3)如果希望使用 less 语法编写组件的 style 样式,可以按照如下两个步骤进行配置:

① 运行 npm install less -D 命令安装依赖包,从而提供 less 语法的编译支持

② 在 <style> 标签上添加 lang=“less” 属性,即可使用 less 语法编写组件的样式

2.2 Vue组件的使用步骤

2.2.1 组件之间的父子关系

(1)组件在被封装好之后,彼此之间是相互独立的,不存在父子关系

(2)在使用组件的时候,根据彼此的嵌套关系,形成了父子关系、兄弟关系

2.2.2 使用组件的三个步骤

注意:此处的@代表src路径

2.2.3 通过components注册的是私有组件

2.2.4 注册全局组件

(1)在vue项目的main.js入口文件中,通过Vue.component()方法,可以注册全局组件。例如:

(2)在其他组件中不需要注册,就可以使用这个全局组件了

3.vue-cli(脚手架)

3.1 什么是vue-cli

(1)浏览器不认识.vue文件,不认识ES6的模块化语法。需要安装Vue脚手架。Vue 的脚手架(VueCLI:CommandLine Interface)是 Vue 官方提供的标准化开发平台。它可以将我们.vue的代码进行编译生成html、 css、js代码,并且可以将这些代码自动发布到它自带的服务器上,为我们Vue的开发提供了一条龙服务。脚手架官网地址:https://cli.vuejs.org/zh

(2)vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程

(3)引用自 vue-cli 官网上的一句话:

程序员可以专注在撰写应用上,而不必花好几天去纠结 webpack 配置的问题。

中文官网:https://cli.vuejs.org/zh/

3.2 安装vue-cli

(1)安装vue-cli之前需要确保 npm能用(安装Node.js)

(2)vue-cli 是 npm 上的一个全局包,使用 npm install 命令,即可方便的把它安装到自己的电脑上:

随意打开一个cmd窗口,输入:npm install -g @vue/cli

(3)输入vue -V即可验证是否成功

3.3 使用vue-cli创建项目

(1)找到需要创建的项目的目录

(2)在方框中输入cmd

(3)输入你要创建的项目名:vue create 项目名

(4)以创建vue2为例

①babel:负责ES6 语法转换成ES5。

②eslint:负责语法检查的。

回车之后,就开始创建项目,创建脚手架环境(内置了webpackloader),自动生成HelloWorld案例

(5)启动项目,dos窗口切换到根目录执行:npm run serve

3.4 脚手架的结构

package.json:包的说明书(包的名字,包的版本,依赖哪些库)。该文件里有webpack的短命令:

(1)serve(启动内置服务器)

(2)build 命令是最后一次的编译,生成html、css、js,给后端人员

(3)lint 做语法检查的。

3.4.1 项目的总体结构

(1)node_modules:用来存放第三方依赖包

(2)public:公共的静态资源目录

(3)src:项目的源代码目录(程序员写的源代码都放在此目录下)

(4).gitignore:是Git的忽略文件

(5)index.html:是SPA单页面应用程序中唯一的HTML页面

(6)package.json是项目的包管理配置文件

3.4.2 src目录结构

(1)assets目录用来存放项目中的静态资源文件(css、fonts等)

(2)components目录用来存放项目中的自定义组件

(3)App.vue是项目的根组件

(4)index.css是项目的全局样式表文件

(5)main.js是整个项目的打包入口文件

3.5 分析脚手架初始程序

(1)index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 让IE浏览器启用最高标准,IE8是不支持Vue的 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端虚拟窗口(理想视口) -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 设置页签图标 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 设置标题 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 当浏览器不支持JS语言的时候,显示如下的提示信息 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

在index.html 中只有一个容器。没有引入vue.js,也没有引入main.js

Vue 脚手架可以自动找到main.js文件。(所以main.js文件名不要修改,位置也不要随便移动)

(2)将写好的vue拷贝过来,并修改文件路径就好了

(3)在终端执行:npm run serve,如果报下面的错

是因为组件的名字应该由多单词组成。这是eslint进行的es语法检测。解决这个问题有两种方案:

①第一种:把所有组件的名字修改一下。

②第二种:在vue.config.js 文件中进行脚手架的默认配置。配置如下:

3.6 解释 main.js 中的 render 函数

(1)将render 函数更换为:template 配置项,你会发现它是报错的。说明引入的Vue无法进行模板编译。

(2)原因:Vue脚手架默认引入的是精简版的Vue,这个精简版的Vue缺失模板编译器。

// 等同于引入vue.js
import Vue from 'vue'
// 导入App组件(根组件)
import App from './App.vue'
// 关闭生产提示信息
Vue.config.productionTip = false
// 创建Vue实例
new Vue({
  // 如果去掉render,改为使用template会报错:
  // 您正在使用Vue的仅运行时版本,其中模板编译器不可用
  // 怎么解决,有两种方案:(1)使用完整版的vue.js (2)使用render函数
  // 为什么采用缺失模板编译器的vue.js?
  // 目的:减小体积。vue.js包括两块:vue的核心+模板编译器(仅占vue.js总体积的1/3)
  // 将来程序员使用webpack打包后,模板编译器就没有存在的必要了
  // render函数会被自动调用,并且会传过来一个参数:createElement,createElement是一个函数
  render: h => h(App), // 等同于render(createElement){ return creatElement(App) }
}).$mount('#app')

(3)实际引入的vue.js文件是:dist/vue.runtime.esm.js(esm 版本是 ES6 模块化版本)

3.7 props 配置

使用props配置可以接收其他组件传过来的数据,让组件的data数据变为动态数据,

(1)在被接收的组件中有三种接收方式:

①简单接收

props : [‘name’,’age’,’sex’]

②接收时添加类型限制

props : {
  name : String
  age : Number
  sex : String
}

③接收时添加类型限制,必要性限制,默认值

props : {
  name : {
    type : Number,
    required : true
  },
  age : {
    type : Number,
    default : 10
  },
  sex : {
    type : String,
    default : ‘男’
  }
}

(2)其他组件怎么把数据传过来?

<User name=”jack” age=”20” sex=”男”></User>

(3)注意事项:

①不要乱接收,接收的一定是其它组件提供的。

②props接收到的数据不能修改(修改之后会报错,但页面会刷新)可以找个中间变量来解决

3.8 项目运行流程

在工程化的项目中,vue 要做的事情很单纯:通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。

其中:

① App.vue 用来编写待渲染的模板结构

② index.html 中需要预留一个 el 区域

③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中

实例:

(1)在 App.vue 中编写模板结构

清空 App.vue 的默认内容,并书写如下的模板结构:

<template>
  <h1>这是App组件</h1>
</template>

(2)在 index.html 中预留 el 区域

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>

(3)在 main.js 中进行渲染

// 1.从vue中按需导入 creatApp函数
// creatApp函数的作用:创建vue的“单页面应用程序实例”
import { createApp } from "vue";
// 2.导入待渲染的APP组件
import App from "./App.vue";
import "./index.css";
// 3.调用createApp函数,返回值是“单页面应用程序的实例”,用常量spa_app进行接收
const spa_app = createApp(App);
// 4.调用spa_app实例的mount方法,用来指定vue实际要控制的区域
spa_app.mount("#app");
目录
相关文章
|
5天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
4天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
4天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
19天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
5天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
5天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
5天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
6天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
6天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中,不同组件之间传递数据和事件的方法。常用的方式有:props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
|
11天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发