一篇文章快速认识VUE

快速认识VUE及相关技术

原创已于 2025-08-15 15:51:41 修改 · 1.7k 阅读

46 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #前端框架

于 2025-08-15 15:33:48 首次发布

很多同学可能刚刚已经学习完了基础的html,css,js三件套，并且能够熟练运用这三件套去开发出一些好看的静态页面了，这个时候就听说了vue，发现大家好像都在用这个，于是打算也跟着学习vue。

相信你一定拥有很强的自学能力，学习一定是一个发现问题和解决问题的过程。如果有不清楚的专业名词，积极搜索学习。

那直接进入正题，假设你已经掌握了前端三件套的基础，我们就从现有的知识开始出发！

一、初识vue

二、完整的vue项目

三、从问题出发，认识router、pinia、elements-plus

一、初识vue

当你第一次听到vue这个词，一定是想着找一个.vue的文件打开看看里面有啥，不着急，这是遇见问题的正常流程，一步一步来，你已经掌握了前端三件套，那么对这个目录结构一定不陌生：

css目录用于存放所有样式文件，js用于存放所有交互逻辑，pages存放页面文件。通常情况下呢，一定是一个页面，拥有属于它自己的css和js，然后是部分所有页面通用的css和js。这样呢能方便组织管理和维护不同的页面。

这个时候，一个页面就是由一个div一个div拼凑起来的，他们相互独立，又是一个密不可分的整体，有点像在现实里搭积木，一点一点构建出一座城堡。但是，正因为是搭积木，当你想去改造这座城堡的时候，就变得困难重重，牵一发而动全身，改了一处，其他地方可能就塌了。

怎么办呢，有人想到，既然每个div一开始都是独立的，那能不能让它彻底独立，不再依赖于整个集体。于是他把页面中每一块积木抽象出来，做成一个独立的vue文件，它拥有属于他自己的结构，样式，逻辑。我们就只需要把业务分散到这些vue上面去，单独改动任何一个vue，都不会对其他的vue造成影响，就像下面这样：

<template>
    <div class="header">
        hello vue
    </div>
</template>

<script setup>
    
</script>

<style scoped>
    .header {
        background-color: aqua;
    }
</style>

这个时候，一个页面就由一个html写完 ,转变成了由数个vue搭建而成。比如某个网页主页Main.vue，它的内容可能就长这样：

<script setup>
    import CommonAside from '@/components/CommonAside.vue'
    import CommonHeader from '@/components/CommonHeader.vue'
</script>

<template>
    <div class="common-layout">
        <el-container class="lay-container">
            <!-- 自定义左侧导航栏组件 -->
            <CommonAside/>
            
            <el-container>
                <el-header class="el-header">
                    <!-- 自定义右侧头部组件 -->   
                    <CommonHeader/>
                </el-header>
                <el-main class="right-main">
                    <!-- 右侧内容区域，路由视图渲染 -->
                    <router-view/>
                </el-main>
            </el-container>

        </el-container>
    </div>
</template>

<style lang="less" scoped>
    .common-layout,.lay-container{
        height: 100%;
    }
    .el-header{
        background-color: #333;
    }
</style>

初学时，语法你不必刻意研究，水到自然渠成。这个页面依旧是样式+结构+逻辑，不过结构里嵌套了其他的vue，通过这样的层层嵌套，就逐步构建成一个完整的页面，这就是所谓的组件树，这个时候的页面就像是在《我的世界》里建房子，每个方块互相独立，破坏了底部的方块，也不会导致坍塌，因为它就固定在那里。

正如《我的世界》那样，vue的灵活度非常高，等你认识得更深的时候，你可以像搭积木一样，拼凑出一个世界。

二、完整的vue项目

一个完整的vue项目的目录结构长这样：

首先请你浏览一下这张图，大概了解每个文件夹放的是什么类型的文件。然后怎么看这个目录呢，一步一步来。

1、安装nodejs，我就不详细讲怎么装，大家可以自行找找相关教程

2、通过npm构建vue项目模板

构建：
npm create vite@latest <project-name> --template vue

进入项目目录：
cd <project-name>

安装依赖：
npm install

启动项目：
npm run dev

3、找到./index.html

这是vue项目的地皮，里面有一个id为app的div，后续所有的组件均挂载在app中；通过script标签（es6语法）引入了main.js，这个文件用于导入一些全局依赖，及将App.vue挂载在div#app上。

4、找到./src/App.vue

它通常包含应用的主要布局和路由视图。

5、找到./views

里面放的是一些页面级的vue组件，通俗来讲就是一个子页面框架

6、找到./components

这个里面放的一些可复用的vue组件，以及每个页面的专属vue组件

小总结：学习这些之后，就算简单的入门了vue，也可以开始慢慢尝试使用组件去搭建静态页面。如果你尝试了自己搭建，慢慢就会感觉vue似乎还缺点东西，感觉它还不完整。

三、从问题出发，认识router、pinia、elements-plus等

这一章我只会提出相关问题，相信很多陌生的东西，只需要一个意义明显的引导，就足够了。大家看到问题之后，可以稍微思考一下，然后可以问问AI，找找教程。我相信很快你就会知道这些杂糅的技术到底是用来干什么的。

3.1、我使用组件搭建出了自己的页面，但是怎么切换页面呢？

(vue-router)

3.2、我发现有些组件之间必须相互配合使用，怎么才能在他们之间传递数据呢？

(defineProps,defineEmits,provide,inject )

3.3、我发现随着项目变大，组件之间的通信变得很复杂，有没有什么办法去管理这些数据？

(pinia)

3.4、使用传统的方法构建页面，效率还是太低怎么办？

(elements-pius)

其实一切都很简单，全堆在一起就复杂了。