一 安装 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>
作用域插槽
