Vue脚手架和组件开发

脚手架

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了开箱即用的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。

安装Vue CLI

npm i @vue/cli -g

其中-g代表是全局安装，而不是只安装到当前项目中

查看安装情况

vue --version

前置条件：已经安装了node

创建vue项目

使用命令行直接创建

vue create my-vue-project

选择vue2默认配置

使用ui界面进行创建

vue ui

一般很少用

目录结构

my-vue-project
├── node_modules # 项目安装的所有包
├── babel.config.js
├── jsconfig.json
├── package-lock.json
├── package.json
├── public # 公共资源，不参与编译
| ├── favicon.ico
| └── index.html
├── src
| ├── App.vue # 根组件
| ├── assets # 需要参与编译的资源
| | └── logo.png
| ├── components # 组件，保存自定义的组件
| | └── HelloWorld.vue
| └── main.js # vue应用的入口文件
└── vue.config.js

package.json

里面有一些命令

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

1、serve：

把项目本地跑起来，在开发中使用，类似dev；

2、build：

把项目打包，将项目打包到dist目录中

可以安装使用serve运行打包好的项目

npm i serve -g

然后使用serve运行打包好的项目

serve dist

组件化开发

作用

提高代码的复用性，更加利于维护；能够更加专注于业务和逻辑的处理；

结构

<template>
...
</template>
 
<script>
...
</script>
 
<style>
...
</style>
 

组件的使用

在父组件App.vue中

1、先import

import HelloWorld from './components/HelloWorld.vue'

2、然后在export defaul()中的components的配置选项中进行组件的配置

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}

3、然后就可以在<template>中按HTML标签的形式进行使用

<HelloWorld msg="Welcome to Your Vue.js App"/>
<HelloWorld msg="Welcome to Your Vue.js App"></HelloWorld>

根组件的使用

在入口文件中进行使用

import App from './App.vue'
 
new Vue({
  render: h => h(App),
}).$mount('#app')

组件的通信方式

1、父传子

通过props进行处理

1、在子组件的props中定义

props: {
    count: {
      type: [String, Number],
      default: 100,
      requirde: true,
    },
  }

其中

1. type：数据类型

2. default：默认值

3. requirde：是否必填

2、在父组件中传递

<HelloWorld 
msg="Welcome to Your Vue.js App"
count="10000"
/>

也可以添加响应式的数据

<HelloWorld 
msg="Welcome to Your Vue.js App"
:count="parentCount"
/>

data() {
    return {
      parentCount: 10000
    }
  },

3、在子组件中使用

<h2>props中的count的值{{ count }}</h2>

和使用data中的一样

2、子传父

使用自定义事件的方式

1、在子组件中定义

methods: {
    handler () {
      this.childCount++;
      this.$emit('child-count-change', this.childCount)
    }
  },

使用this.$emit()定义自定义事件以及需要传递的参数

2、在父组件中接收

<HelloWorld 
msg="Welcome to Your Vue.js App"
:count="parentCount"
@child-count-change="handler"
/>

data() {
    return {
      childData: 0,
    }
  },
methods: {
    handler (childCount) {
      this.childData = childCount;
    }
  },

组件插槽

在用双标签使用子组件时，标签中的内容；

父组件中添加

<HelloWorld>这是默认内容1</HelloWorld>
<HelloWorld>这是默认内容2</HelloWorld>
<HelloWorld>这是默认内容3</HelloWorld>

子组件中显示

<slot>基础的默认内容</slot>

具名插槽

使用name的方式进行标记

<slot name="footer">footer中的默认内容</slot>

<HelloWorld>这是默认内容3
  <template v-slot:footer> 
    <div>
      第3个footer
    </div>
  </template>
</HelloWorld>

或者

<HelloWorld>这是默认内容2
  <template #footer>
    <div>
      第2个footer
   </div>
  </template>
</HelloWorld>

插槽中传递数据

1、子组件中添加

<slot name="footer" :childCount="childCount">footer中的默认内容</slot>

2、父组件中使用

<HelloWorld>这是默认内容2
  <template #footer="dataObj">
    <div>
      第2个footer{{ dataObj.childCount }}
   </div>
  </template>
</HelloWorld>

或者使用解构

<HelloWorld>这是默认内容2
  <template #footer="{childCount}">
    <div>
      第2个footer{{ childCount }}
   </div>
  </template>
</HelloWorld>