Vue之脚手架与组件化开发

一、基础知识

1、准备工作

node版本在12以上(看情况而变)

全局安装vue/cli脚手架(不理解的可以去看一下node安装环境配置教程)

npm i @vue/cli -g

2、项目初始化

在终端输入

vue create my-vue-project(这里是名字,自定即可)

之后选择vue3、vue2或者自定义模板创建

或者输入vue ui,以图形化的形式创建,创建过程都差不多

创建成功后,启动项目并成功显示,则初始化项目成功

3、目录结构

node_modules是该项目需要的一些依赖包和其它第三方工具包

public是静态资源包,保留的都是一些不参与编译的资源

src保留的都是一些参与编译的资源,该包下的App.vue是根组件,main.js则是入口文件用来对vue做一些配置

vue.config.js是用来配置vue/cli项目的文件

package.json中有一些比较常用的命令,比如serve、build,分别是启动项目、打包项目

4、打包项目

终端输入一下命令,打包项目

npm run build

打包完之后会生成一个dist文件

5、运行打包的项目

这个打包后的项目想要运行,需要一个服务器,我们这里下载一个serve服务器工具来运行

下载命令

npm i serve -g

运行命令

serve dist

二、组件化开发

1、什么是组件

组件是封装页面部分功能的一种方式

.vue后缀的都叫做单文件组件,都由template、script、style三部分组成

2、组件通信

父组件传子组件

通过msg="xxxxxxx"传输,当然这里的msg是可以自定义的不是固定的

通过props接收,这里的msg要对应父组件的msg,名字要一模一样,接收的时候要规范类型,当然也要根据父组件传递的信息来规定

props的多种写法

子组件传父组件

子组件

父组件

HelloWorld.vue

javascript 复制代码
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>

    <p>props中的count:{{ count }}</p>
    <button @click="handler">按钮</button>
  </div>
</template>

<script>
//组件通行
//父传子:通过props进行处理
//子传父:通过$emit进行触发
export default {
  name: "HelloWorld",
  props: {
    msg: String,
    count: {
      type: [String, Number],
      // default: 100,
      required: true,
    },
  },
  data() {
    return {
      childCount: 0,
    };
  },
  methods: {
    handler() {
      this.childCount++;
      this.$emit("child-count-change", this.childCount);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

App.vue

javascript 复制代码
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <h1>父组件中接收到的数据:{{ childData }}</h1>
    <HelloWorld
      msg="Welcome to Your Vue.js App"
      :count="parentCount"
      @child-count-change="handler"
    />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      parentCount: 10000,
      childData: 0,
    };
  },
  methods: {
    handler(childCount) {
      this.childData = childCount;
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

三、组件插槽

同一个子组件不同的展示需要用到插槽

HelloWorld.vue

javascript 复制代码
<template>
  <div class="hello">
    <slot>基础的默认内容</slot>
    <h1>{{ msg }}</h1>

    <p>props中的count:{{ count }}</p>
    <button @click="handler">按钮</button>
    <slot name="footer">footer的默认内容</slot>
  </div>
</template>

<script>
//组件通行
//父传子:通过props进行处理
//子传父:通过$emit进行触发
export default {
  name: "HelloWorld",
  props: {
    msg: String,
    count: {
      type: [String, Number],
      // default: 100,
      required: true,
    },
  },
  data() {
    return {
      childCount: 0,
    };
  },
  methods: {
    handler() {
      this.childCount++;
      this.$emit("child-count-change", this.childCount);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

App.vue

javascript 复制代码
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <h1>父组件中接收到的数据:{{ childData }}</h1>
    <HelloWorld
      msg="Welcome to Your Vue.js App"
      :count="parentCount"
      @child-count-change="handler"
      >这是默认内容1
      <template #footer>第一个footer</template>
    </HelloWorld>
    <HelloWorld>这是默认内容2</HelloWorld>
    <HelloWorld>这是默认内容3</HelloWorld>
    <HelloWorld></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      parentCount: 10000,
      childData: 0,
    };
  },
  methods: {
    handler(childCount) {
      this.childData = childCount;
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
相关推荐
东华帝君1 分钟前
react 虚拟滚动列表的实现 —— 动态高度
前端
CptW4 分钟前
手撕 Promise 一文搞定
前端·面试
温宇飞4 分钟前
Web 异步编程
前端
腹黑天蝎座5 分钟前
浅谈React19的破坏性更新
前端·react.js
东华帝君5 分钟前
react组件常见的性能优化
前端
第七种黄昏5 分钟前
【前端高频面试题】深入浏览器渲染原理:从输入 URL 到页面绘制的完整流程解析
前端·面试·职场和发展
angelQ5 分钟前
前端fetch手动解析SSE消息体,字符串双引号去除不掉的问题定位
前端·javascript
Huangyi5 分钟前
第一节:Flow的基础知识
android·前端·kotlin
林希_Rachel_傻希希6 分钟前
JavaScript 解构赋值详解,一文通其意。
前端·javascript
Yeats_Liao7 分钟前
Go Web 编程快速入门 02 - 认识 net/http 与 Handler 接口
前端·http·golang