Vue项目

初始化

在要生成的地方运行

cmd

pnpm create vue@latest

会生成一个src里面后App.vue和main.js主程序]

cmd

pnpm create vue@latest .

会直接在当前文件夹下生成文件

cmd

pnpm install
#简写
pnpm i

根据package.json文件的内容下载依赖

还会有文件assets放css在components放主程序里面拆分的小组件

app.vue里面的修改让子组件的值传入父组件

< template >

加上组件文件名和组件文件里的vue变量

vue

<template>  
  <TogglePurple :togglePurple />  
  
  <CircleColor :circleColor :changeCircleColor />  
  
  <CircleSize :changeCircleSize :circleSize />  
  
  <CircleRotate :changeCircleRotate :circleAngle />  
  
  <Circle :circleClass :circleColor :circleStyle />  
</template>

< script >

加入小组件的文件的导入

import TogglePurple from "./components/TogglePurple.vue";  
import CircleSize from "./components/CircleSize.vue";  
import CircleRotate from "./components/CircleRotate.vue";  
import Circle from "./components/Circle.vue";  
import CircleColor from "./components/CircleColor.vue";

导入之后要将这里的内容全部放到export default{}里面,为的是让main.js可以导入

加上一个特有函数在export default里

components: {  
  TogglePurple,  
  CircleSize,  
  CircleRotate,  
  Circle,  
  CircleColor,  
}

< style >

这里的原本的属性,为了解体,直接将所有内容放到../assets/main.css里面,然后main.js直接导入即可

import "./assets/main.css";

js函数

vue路由

Vue项目

初始化

app.vue里面的修改让子组件的值传入父组件

< template >

< script >

< style >

子组件想父组件传参

emits事件

启动Vue

Vue项目 ​

初始化 ​

app.vue里面的修改让子组件的值传入父组件 ​

< template > ​

< script > ​

< style > ​

子组件想父组件传参 ​

emits事件 ​

启动Vue ​

Vue项目

初始化

app.vue里面的修改让子组件的值传入父组件

< template >

< script >

< style >

子组件想父组件传参

emits事件

启动Vue