Vue.js---组件化编程 & Vue-cli的安装使用

Baciii°

已于 2022-03-24 21:26:40 修改

阅读量354

点赞数 1

分类专栏： Vue.js 学习笔记文章标签：前端 vue.js javascript

于 2022-03-24 21:24:06 首次发布

本文链接：https://blog.csdn.net/weixin_52462962/article/details/123720683

版权

Vue.js 学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue中的组件化编程，解释了组件在解决传统HTML/CSS/JS开发中文件管理混乱和复用性问题上的优势。通过非单文件组件和单文件组件的实例，展示了如何定义、注册和使用组件。此外，还提及了组件嵌套及Vue-cli的使用，强调了组件化在实际开发中的重要性。

摘要由CSDN通过智能技术生成

何为组件化编程：

在使用传统 HTML、css、JavaScript 三大套的开发的过程中，我们需要在一个HTML文件引入多个 css 文件、JavaScript 文件。一旦文件增多，就会出现难以管理的问题。特别是 JavaScript文件，某些 js 文件利用了模块化引入或者调用了某个 js 库，在引入 js 文件时就需要注意先后顺序的问题，文件一旦增多就容易引起混乱或者神奇的报错，而且这也不利于对某个相似模块的复用。

Vue 中组件化的概念就可以解决这个问题。组件的定义为：实现应用中局部功能的代码和资源的集合。也就是将一个网页分为若干个组件，每个组件仅由一个文件管理，文件中包含 HTML、css、JavaScript 文件，这样可以做到条理清晰、方便复用。

非单文件组件的写法：

非单文件组件，即一个文件中含有多个组件。

第一步：定义组件

const com = Vue.extend({
    data() {
        return {
            name: 'baciii',
            age: 20
        }
    },
    template: `
    <div>
        name:{{name}}               
        age:{{age}}
    </div>
     `,
    methods: {

    }
})

与创建 Vue 实例对象大同小异，但也有些许区别：

组件中的 data 配置项必须写成函数的形式，且函数的返回值为一个对象，对象的属性为该组件中需要用到的数据。
组件中不需要且不能使用 el 配置项配置其作用区域。
在 template 中编写结构，注意要使用一个 <div> 标签将所有结构包裹起来。

第二步：注册组件

new Vue({
    el: '#root',
    components: {
        com: com
    }
})

在 Vue 实例对象中，在components 配置项中注册组件。

第三步：编写组件标签

//法1：
<div id="root">
    <com></com>
</div>

//法2：
new Vue({
    el: '#root',
    components: {
        com: com
    },
    template:
    `
        <com></com>
    `
})

通过组件标签，就可以把组件中的结构放到 Vue 实例对象管理的区域中。

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="root">
        <com></com>
    </div>
    <script>
        const com = Vue.extend({
            data() {
                return {
                    name: 'baciii',
                    age: 20
                }
            },
            template: `
            <div>
                name:{{name}}               
                age:{{age}}
            </div>
            `,
            methods: {

            }
        })
        new Vue({
            el: '#root',
            components: {
                com: com
            }
        })
    </script>
</body>

</html>

另外，组件中还可以嵌套组件，通过组件中的 components 配置项。

const student = Vue.extend({
    template: `
        <div>
            name:{{name}},
            age:{{age}}
        </div>
        `,
    data() {
        return {
            name: 'baciii',
            age: 20
        }
    }
})
const school = Vue.extend({
    template: `
        <div>
            name:{{name}}
            <student></student>
        </div>
        `,
    data() {
        return {
            name: 'qyyz&sztu'
        }
    },
    components: {
        student
    }
})

在实际开发中，一般 Vue 实例上只管理一个名为 App 的组件，其余组件全部作为 App 的子组件。

单文件组件的写法：

单文件组件即把 HTML、css、JavaScript 统一写在 .vue 文件中，每个 .vue 文件作为一个组件使用。语法基本一致，但是要注意需要给 script 用 export 配置对外接口供其他文件使用。

<template>
    <div class="demo">
        <h2>{{name}}</h2>
        <button @click="showName"></button>
    </div>
</template>

<script>
    export default {
        name:'school',
        data(){
            return {
                name:'baciii'
            }
        },
        methods:{
            showName(){
                alert(this.name)
            }
        }
    }
</script>

<style lang="">
    .demo{
        background-color: pink;
    }
</style>

组件编写完毕后，统一引入到 App.vue 文件中

<template>
  <div>
      <School></School>
  </div>
</template>

<script>
import School from './School.vue'

export default {
    name:'App',
    components:{
        School
    },
}
</script>

<style>

</style>

再通过一个 js 文件引入 App.vue

import App from './App.vue'

new Vue({
    el: '#root',
    component: {
        App
    },
    template: `<App></App>`
})

最后在HTML文件中引入最后一个 js 文件

<script src="./main.js"></script>

随后的操作便要使用 Vue-cli 脚手架，否则浏览器无法识别 .vue 文件，也就无法正常运行。

Vue-cli 脚手架的安装：

打开控制台cmd，配置 npm 淘宝镜像，否则下载会极其缓慢。
```
npm config set registry https://registry.npm.taobao.org
```
再次打开控制台，输入
```
npm install -g @vue/cli
```
再次打开控制台，cd 到你想创建项目的目录，输入，xxx 为项目名
```
vue create xxx
```
最后，启动项目
```
npm run serve
```
出现如下页面说明配置成功！