Vue2基础——vue-cli，组件

最新推荐文章于 2025-07-04 16:00:20 发布

原创

最新推荐文章于 2025-07-04 16:00:20 发布 · 547 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

这篇博客介绍了Vue2的基础知识，包括如何安装vue-cli，创建并运行项目，深入讲解vue组件的定义、组件间的父子关系、props的使用以及如何解决样式冲突问题。详细阐述了组件的methods、props的默认值、类型检查和必填项，同时提供了使用/deep/解决子组件样式覆盖的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装vue-cli

2.基于vue-cli创建vue-cli项目

2.通过components注册的是私有子组件

1.安装vue-cli

终端里面输入npm install -g @vue/ cli

2.基于vue-cli创建vue-cli项目

vue create 项目的名称

3.项目跑起来看效果

4.vue项目的运行流程

在工程化的项目中，vue要做的事情很单纯:通过main.js把 App.vue渲染到index.html的指定区域中。

其中：
1.App.vue用来编写待渲染的模板结构

2.index.html中需要预留一个el区域
3.main.js 把 App.vue渲染到了index.html所预留的区域中

5.vue组件

每个.vue组件都由3部分构成，分别是:
template ->组件的模板结构
script ->组件的JavaScript行为
style ->组件的样式

<template>
    <div class="box">
        <h1>这是自定义的vue组件----{
  
  { username }}</h1>
    </div>
</template>


<script>
//默认导出
export default {
    //data数据源
    //注意:.vue 组件中的 data 不能像之前一样，不能指向对象。组件中的 data 必须是一个函数
    data() {
        //这个return出去的{}中，可以定义数据
        return {
            username:'snk'
        }
    },
}
</script>


<style>
.box{
    background-color: rgb(224, 52, 193)
}
</style>

1.在组件中定义methods方法

修改用户名

<template>
    <div class="box">
        <h1>这是自定义的vue组件----{
  
  { username }}</h1>
        <button @click="changeName">修改用户名</button>
    </d

最低0.47元/天解锁文章

200万优质内容无限畅学