57 组件(component)、创建脚手架

57 组件(component)、创建脚手架

一、组件(component)

在前端，两大概念
一、模块
模块指的就是逻辑封装，一些共通的功能，你把它提取出来，封装到js中。你需要这个功能，你就引入js
es6的导入导出（导出的方式决定你引入的方法）
引入  import 变量名 from  '地址'
导出  export default 内容 
=========
导出  export const 变量
导入 import {变量}  from '地址'
​
二、组件
组件的指的是视图（静态）的封装，很多情况，静态页的结构很相似，我们可以提取出一个部分共通的代码。这部分代码片段，你想在哪里渲染，就在哪里调用

1.1概念

组件在vue中就是复用一个vue实例，它包含了vue实例中所有的属性和方法（除去el元素）。还有一个特殊的点，就是data！！！
我们会把共通的代码或者片段提取出来。哪里需要哪里调用
​
每一个组件都是独立的！！！！
​
在VUE中每一个应用程序（Vue实例化），它都可以看做成为一根组件树。

1.2 特点

可复用！！！

1.3创建方式

• 局部创建组件（常用）

components:{
    组件名称:{
    //这个配置对象与整个Vue实例是一致的，除了没有el元素
    }
}
​
//组件名称 最终当做标签元素去渲染了

 

• 全局创建组件

Vue.component('组件名称',{
    //配置对象
})

 

1.4 组件名称的命名规则

1、组件名称不能用已经存在的标签元素作为组件名称
2、不能起已经存在的标签名作为组件名称即使是大写也不行，因为html不区分大小
3、组件名称如果用的是驼峰命名法，那么在调用渲染的时候，必须加‘-’否则浏览器无法解析

1.5template属性

template属性有且只能有一个根标签！！！
如果template过于复杂，我们可以提取出来，放置到template标签中，通过id去区分不同的模板

1.6组件中的data

组件中的data为什么是一个函数？？？
每一个组件都是独立的，如果你的data是一个对象，它们会共用一个地址空间，如果某一个组件修改了其中一个值，其他拥有这个组件属性的地方都会发生变化。函数是一个独立作用域，数据内容就不会共享

1.7组件的嵌套

组件的嵌套！！！
在哪里注册，在哪里渲染！！！！
注意你的结构！！！！

 

---

Vue实例中的配置对象
el
data 
methods
watch
filters
computed
components

 

---

二、创建脚手架

2.1官网

https://cli.vuejs.org/zh/

2.2下载并安装脚手架

如果你的下载特别慢，那么重新设置你的npm来源。默认来源是国外的远程服务器。我们可以把它改成国内的淘宝镜像（并不需要用cnpm）还是npm命令
cmd执行以下即可。速度会嗖嗖的。。。
npm config set registry http://registry.npm.taobao.org

 

全局安装环境（一台电脑安装一次即可）
① 全局安装webpack环境
npm install(i) -g webpack
+ webpack@5.31.0
检测版本命令：webpack -v
（如果检查版本的时候让你安装webpack-cli，装不装都可以，但是不装就检索不到）
​
② 全局安装vue-cli脚手架
npm install(i) -g @vue/cli
+ @vue/cli@4.5.12
检测版本命令：vue -V  或者 vue --version
​
======================================================
创建项目（不同的项目。你就应该单独创建）
在本地目录下，找一个空文件夹，下载
vue create 项目名称（mydemo）注意：不能用驼峰
​
=======================================================
启动项目的命令
npm run serve
​
注意：一定要进入项目目录，看见node_modules再启动
​
==========================================
如果没有node_modules 
通过 npm install(简写成i)
​
==================================================
打包命令    build(构建的意思)
npm run build
​
打包之后会生成一个dist文件夹。这个文件夹才会放置到服务器上。

2.3 SPA（single-page-application） 单页应用

前端目前所有的框架创建的项目都是单页应用

什么是单页应用，单页应用的特点是什么？
通过的理解，就是只有一个html页面。所有的视图都是通过组件，创建，嵌套，拼接而成
单页的案例：比较出名的是：https://es6.ruanyifeng.com/（es6的官网）
单页应用和多页应用的区别？
单页： 一个html
多页： 传统的项目（n个html）
单页： 
优点： 切换过程中，不会重新刷新。单页的切换靠的是路由，它在切换的过程中可以添加动画,减少服务器的压力
缺点: 首次加载过慢（因为一次性加载出所有的资源），出现空白页面。不利于SEO优化
多页：
优点：首次加载速度很快。更利于SEO的优化
缺点：切换页面的过程中，出现空白页面,切换过程中不能添加动画,增加服务器的压力
​
​
​

2.4项目目录

README.md 阅读指南
package.json 包管理配置文件
package-lock.json（当package一变化，就会出现这个）
babel.config.js 转译文件
.gitignore 用git命令上传文件的时候，要忽略内容的配置文件
src 
    是我们的代码主战场！！！！
    assets 静态资源文件夹 （js,css,图片。。。）
    components 组件文件夹
    App.vue 主组件（根组件）
    main.js 主的js配置文件
public 
    公有文件夹
    favicon.ico 收藏夹小图标
    index.html 唯一的html文件
node_modules 依赖包

2.5 初始化目录结构

一、删除components下面的helloworld.vue
二、清空app.vue
​
<template>
  <div>
    <h1>主组件</h1>
  </div>
</template>
<script>
export default {
  
}
</script>
<style >
  
</style>
​
三、执行前两部，就实现了基本视图的显示

2.6 组件的嵌套

<template>
  <div>
      <组件名称></组件名称>
  </div>
</template>
<script>
    import 组件名称 from '地址'
export default {
  components:{
      组件名称:组件名称,
      //key和value一致，可以简写
      组件名称
  }
}
</script>

2.7 如何引入外部样式

<style >
  通过 @import引入
</style>

2.8 scoped属性

scoped属性的意思是当前组件样式在当前有效
每一个组件都要添加一个scoped属性
​
<style scoped></style>

2.9 全局引入js和css

main.js

//引入全局样式
import './assets/css/reset.css'

2.10 如何在vue组件的data数据中引入静态资源图片

一、通过 require
比如：img:require('../assets/images/1.webp')
二、通过import
import img1 from '../assets/images/1.webp'
img:img1