1小时学会Vue之脚手架与组件化开发 学习笔记

https://www.bilibili.com/video/BV13m4y1Y7MD

一 安装 vue cli

1 安装 node.js

要求 node.js 12+版本， https://nodejs.org/zh-cn  首页下载安装lts版本，如果已安装就覆盖安装

vscode 终端或cmd中 输入

npm --vesion   

node --v 可以查看是否安装成功

npm（node package manager）：node.js 的包管理器，用于node插件管理（包括安装、卸载、管理依赖等） ，npm 是随同 node.js 一起安装的包管理工具，能解决 node.js 代码部署上的很多问题

https://zhuanlan.zhihu.com/p/362828765 深入了解Npm

安装 pnpm pnpm - 速度快、节省磁盘空间的软件包管理器 | pnpm中文文档 | pnpm中文网⁤

npm install -g pnpm

2 安装 vue cli

安装最新版本3.x  npm install @vue/cli  可简写为npm i @vue/cli -g    全局安装

安装老版本  npm i @vue-cli  不可这样写，这样是安装早期版本

安装完成后 vue --vesion 查看安装是否成功

如果遇到错误 npm ERR! code EEXIST 就用

npm install -g @vue/cli --force

3 创建项目 

1 命令行方式

vue  create 项目名称

2 ui方式

vue ui 打开页面进行配置创建

4 项目结构

1 package.json 中的scripts

npm run serve 运行项目

npm run build 代码打包到dist目录

安装vue serve

npm i serve -g 

运行打包好的dist  

serve dist

2 node_modules

项目所安装的包

3 public

不参与编译的静态资源

4 src

参与编译的资源

assets 图片等

components 自定义组件

App.vue 根组件

main.js 应用入口文件

二 组件化开发

2.1 组件的作用与本质

每个vue文件 成为单文件组件，由3部分组成，template结构， script逻辑， style样式

2.2 组件的通信方式

父传子  props 中定义

子传父 自定义事件

子组件

this.$emit("child-count-change",this.childCount)

 父组件

@child-count-change="handler"

methods:{

  handler(chiledCount){

    this.parentCount=chiledCount

  }

}

组件间互传 vuex

 

2.3 组件插槽

 

默认插槽 

子组件中 <slot>

父组件中直接写到 子组件表面名称中间

具名插槽 

子组件 <slot name="xxx">

父组件写到子组件标签中  <template v-slot:footer>具名插槽</template>

代码如下：

<HelloWorld>

默认插槽赋值

<template v-slot:footer>具名插槽赋值</template>可简写为<template #footer>

 </HelloWorld>

作用域插槽