Vue组件化开发

留言

9.组件化开发.pptx


NPM和Vue CLI



创建


npm install -g @vue/cli

vue create 项目名称

学习初期，不建议用ESlint，不然各种通不过编译

npm run serve

有时候IDE里面的node版本有问题，可以在系统终端里跑


模块化开发


尽可能复用，活字印刷术

App.vue，根组件

也是这三部分组成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<template>
  <Movie v-for="movie in movies" :key="movie.id" :title="movie.title" :rating="movie.rating"></Movie>
  <el-date-picker
        v-model="value1"
        type="date"
        placeholder="Pick a day"
        :size="size"
      />
</template>

<script>
import Hello from './components/Hello.vue'
export default {
  name: 'App',
  data:function(){
    return {
      movies:[
        {id:1,title:"电影1",rating:8.7},
        {id:2,title:"电影1",rating:8.7},
        {id:3,title:"电影1",rating:8.7},
      ]
    }
  },
  components: {
    Movie,
    Hello
},

}
</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>


组件的导入和注册，都要在script标签里写， 这样template里就可以用这个组件了~

如果没有样式相关的，style标签可以不加


第三方组件的使用—以ElementUI为例


组件间的传值



element-ui介绍及其组件的使用


基于Vue 3.x的element-ui还在开发中，目前广泛使用的是基于vuw 2.0的

Vue2和3的区别，new Vue和create Vue，$mount和mount,微小的语法差异


vue2要求所有的组件，都包含在一个根标签下，不能有两个根标签。所以最好在外面加一个

组件之间可以任意嵌套

props，自定义属性


Element文档

npm i element-ui -S

  • i是install的简写

  • -S 是指把安装的东西，同时记录到package.json中去

使用参考 快速上手

上面自己写的组件，如Movie，Hello，称为局部组件

而引入的第三方组件，需要在多个地方用，可以全局注册


第三方图标库


element-ui提供的图标太少了

fontawesome.dashgame.com 提供了大量图标

  • 安装：npm install font-awesome
  • 使用：import ‘font-awesome/css/font-awesome.min.css’