Vue基础目录讲解

Vue基础目录与文件功能讲解，对比不同版本的Vue目录总结。

如果使用vue-cli去创建一个vue项目，我们可以很快创建一个vue项目，但是新手（指我自己）并不理解vue文件夹内各个文件之间的关系。这时候我们便可以手动从0开始搭建一个Vue项目来获得对Vue项目的理解：

自制Vue脚手架

参考视频：https://www.bilibili.com/video/BV1dt4y1K7BF/?spm_id_from=666.25.top_right_bar_window_history.content.click&vd_source=4741b9365ccc837a155892edad8f5a2c

单文件组件-概念

如果我们整个页面都用Vue来构建，那么页面本身就是一个根组件。如果我们把页面分为不同的区域，那么不同的区域又可以是不同的组件。

如果我们像以前那样，用CDN引入Vue功能，用单独的js文件来代替组件，项目越大的时候就越不方便管理了。因此Vue推荐了单文件组件SFC（Single-File Conponents），也就是后缀名为.vue的文件。

如果我们以后看到一个后缀名为.vue的文件夹，里面具有元素，逻辑以及样式，我们几乎就可以认定它是vue组件。

那么我们首先创建一个空的项目文件夹，然后使用vscode打开。

index.html

那么首先我们需要创建一个index.html文件夹，这是因为index.*是所有文件最开始的项目入口我们的vue项目是依托在我们的index文件上的。

创建好了之后我们需要写入代码，这个index的代码特别简单，body中有一个id为app的div标签。

这说明我们创建了一条由index通往vue的路。

<html>
    <body>
        <div id="app"></div>
    </body>
</html>

特别注意的是，我并没有在这个html里面加入任何的script标签，也就是这里面没有直接引入js文件，等一下说为什么。

App.vue

接着我创建一个App.vue，也就是我们的根组件了。上面我们说到每一个vue组件也都是html+js+css的文件。要注意这里的html部分，我们是使用template标签进行声明。

由此，我们真正进入到了项目的Vue部分。

对于html部分，我们有一个div标签，里头有一个p标签，并且用插值表达式引入message的值，当然这个message我还没有定义，因此就需要我写vue的逻辑了。也就是在script标签里面，用data返回就好。最后在style标签里面，写css就行，因为重点不在css里面，这里代码就进行省略了。

<template>
    <div>
        <p>{{ message }}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            message: '蛋蛋',
        };
    },
};
</script>

<style>
/* 此处省略 */
</style>

此时我们已经写好了组件，此时我们并不能把vue就这样直接引入到index.html里面，还需要创建一个main.js文件来连接这两者。

main.js

上面我们说到index.html文件和App.vue文件都已经写好，从代码上我们可以理解到，App.vue文件作为了一个标签被index.html所引用。但是这二者是没办法直接产生联系的，这时候就需要我们的main.js文件，将App.vue文件挂载到index.html中id为App的上面。

在这个文件里面，我们先引入vue框架中的createApp函数，接着把刚刚我们创建好的组件引入进来，用createApp函数创建一个Vue应用，并且挂载到id为app的html标签上面。

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

但是这个main.js文件有个核心问题。那就是：当“我们先引入vue框架中的createApp函数”的时候，vue框架现在什么还都没有呢，我们根本用不了vue框架里面的任何功能，更没有函数让我们引用。

因此我们要把vue框架下载下来，但是如果这时候我们还要用到其他的框架怎么办？那这个时候项目就会越来越混乱，这个时候我们的项目就需要npm来进行统一管理。npm是包管理器，可以更轻松管理框架和第三方库，也就是我们常常说的依赖。

Node.js与npm

一般来说，如果我们安装上了nodejs我们就会同时安装上npm。

我们可以在终端中运行命令:

1	`npm init -y`

这样就会生成一个package.json文件。

这个文件就是npm包管理器的核心配置文件，我们先不用去例会文件中的配置都是什么意思，现在我们要通过npm去下载vue，就可以输入:

1 2	`npm i vue # npm install vue`

在安装完成之后：

在package.json文件里面多了几行字符，这里的意思是在以来里面增加了一个叫vue的依赖。
另外还多了一个package-lock.json，这个json里面的配置信息更加具体，以此来锁定版本号。可以理解为package.json是简略的包管理配置文件，package-lock.json是详细版本的包管理配置文件。
那么我们的依赖都被安装来node_modules文件夹里面，这个是刚才我们刚才安装完生成的。可以看到，我们单纯下载一个vue框架就会多出这么多的依赖，不用包管理器就太难管理了。

webpack等依赖与配置文件

虽然依赖可以进行管理了，但是我们项目的源文件也会变得越来越多。这个时候就需要我们的webpack进行打包了。

比如你的html文件里面插入了多个js文件，那你会非常头疼，如果js文件的顺序搞错了，就可能会导致下面的文件引用不了上面文件的功能。我们就可以用webpack把这些js文件都合成一个文件。这是webpack其中一个功能。

目录整理-src

为了不把我们等会生成的文件弄混，我们先把index.html，App.vue，和main.js文件放到一个目录里面，文件夹取名src，src表示source（源）的意思。src文件夹就是我们开发的源文件夹了。

下面我们继续配置webpack

这里我们先创建一个webpack.config.js，我们的配置文件就是在这个文件里面进行配置的，但是在配置之前，我们先完善一下依赖。

首先要用到webpack，我们就需要安装webpack依赖。其次，由于要使用webpack命令，我们还需要安装webpack命令行工具。为了有个类似VS Code的live Server的功能，我们还需要一个webpack-dev-server依赖。安装使用如下命令，-D表示安装的是开发环境的依赖，并不安装在生产环境上，比如说webpack只是我们开发的时候使用而已。打包上线之后，就再也不需要webpack的功能了。

1
2
3

npm i -D webpack
npm i -D webpack-cli
npm i -D webpack-dev-server

接着因为并不是每个浏览器都支持ES6的语法，因此我们需要Babel来吧代码从高版本转到低版本。因此就需要babel-loader依赖。但是由于这个依赖比较烦，它需要配合core和preset-env来使用，所以我们一共需要安装三个依赖。

npm i -D babel-loader
npm i -D @babel/core
npm i -D @babel/preset-env
# npm i -D babel-loader @babel/core @babel/preset-env

除了ES6语法以外，浏览器肯定不认识Vue的单文件组件，因此我们可以用vue-loader依赖来进行识别，css部分我们需要css-loader和vue-template-compiler依赖。最后我们需要把源文件的html和js也来个合并，并且生成最终的文件夹和文件，因此我们需要html-webpack-plugin。

npm i -D vue-loader
npm i -D vue-template-compiler
npm i -D css-loader
npm i -D vue-style-loader
npm i -D html-webpack-plugin

# npm i -D vue-loader vue-template-compiler css-loader vue-style-loader html-webpack-plugin

这么多依赖，总的来说就是把各种文件整合成浏览器能够识别的合成文件。

webpack.config.js

我们可以来配置webpack文件了，首先我先引入刚刚安装的两个依赖（HtmlWebpackPlugin ，VueLoaderPlugin ）作为webpack的插件，接着直接把webpack配置模块导出，在这个对象里面，就是我们写配置的地方了。

要让webpack打包，肯定要让webpack知道从哪里进行打包，我们就把源文件的main.js设置为起点。

接着我们当然要按照一定的规则来打包，对吧？对于以js结尾的文件，我们就用babel-loadar依赖转成S55。对于vue结尾的文件就用vue-loader依赖转成js，对于CSS结尾的文件就用’vue-style-loader’, ‘css-loader’来识别并导出，然后就可以注明我们需要使用的webpack插件，也就是在文件头里引入的两个依赖，对于HtmlWebpackPlugin插件我还注明了原HTML文件的位置。

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
    entry: './src/main.js',
    module: {
        rules: [
            { test: /\.js$/, use: 'babel-loader' },
            { test: /\.vue$/, use: 'vue-loader' },
            { test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
        }),
        new VueLoaderPlugin(),
    ],
};

.babelrc.js

现在webpack配置好了好的，配置就简单多了，先创建一个.babelrc.js文件，在这个模块里面只需要导出这行设置，这样你就可以使用最新的js语法来写代码了。

简化命令-运行

虽然我们可以使用webpack命令来打包了，但是webpack命令比较长，我们可以进行简化，回到package.json文件，我们在scripts里面进行修改：

如果运行npm run serve的时候生成模仿HTTP的服务器
如果运行npm run build就构成生产版本，或者理解为编译项目为静态文件。

现在我们就来运行开发用的npm run serve就会生成本地的服务器，然后就可以在浏览器访问这个链接，预览到我们的页面了，我们根本就不需要在HTML文件里面引入js文件，就可以自动识别了。

如果此时我们给开发文件进行修改，浏览器也是会时更新。

如果要停止服务，只需要按control+C就好。

如果我们运行npm run build等待一下，我们就会发现多了个dist文件夹。

dist就是distribution的缩写，dist就是分发、分布、生产的文件夹里面就是最终的生产文件了。大家可以看到里面就只有两个文件，其他文件都被整合在这两个文件里面了，我们直接双击这个文件就可以看到页面的效果了，和刚才最终版本是一致的。（中文会乱码）

版本管理git

觉得这就完事了，其实在项目的一开始我们应该进行版本管理，也就是使用git。这里直接使用git init来初始化这个文件夹，这样就会有个.git文件夹产生。

我们还需要创建.gitignore文件，再提交版本的时候忽略掉不必要的文件，比如node_modules是不需要提交的。

其他文件

当然完整的项目还需要一个README对项目进行说明。

项目路径配置

如果你的编辑器支持LSP比如VS code，那么jsconfig.json文件就很好用了。我们先创建这个文件，这里说一个非常有用的配置，我把src/写为@/，这样如果你有一个在很里头的文件要引用别的文件，就不会被相对路径搞蒙了头，最基础的项目架构就完成了。

{
    "compilerOptions": {
        "target": "es5",
        "module": "esnext",
        "baseUrl": "./",
        "moduleResolution": "node",
        "paths": {
            "@/*": ["src/*"]
        },
        "lib": [
            "esnext",
            "dom",
            "dom.iterable",
            "scripthost"
        ]
    }
}

与Vue CLI目录的对比

我们在建房子的时候都会用脚手架来确定房子的架构，这个项目各个部分组成起来就是我们通常所说的脚手架vue有vue-cli和vite可以创建项目，因为vite是基于webpack，所以我们对比一下和vue-cli创建的项目有什么不同。

通过vue-cli3创建vue3项目

直接输入vue create +projectname创建项目。

1	`vue create vueCliProject`

点击回车就有提示框，我们回车选择vue3的默认选项，它会自动创建的。

项目目录文件对比

对于版本控制基本的有git文件夹以及gitignore和README文件。
对于包管理器的文件主要就是node_modules文件夹package.json和package-lock.json文件了。我们把重点放在package.json的scripts里面，这里的serve build就和我们前面创建的是一个道理，比如我在执行m serve就会有本地服务器可以访问，我们可以进行实时开发。
对于开发的文件则是src文件夹为主了，Vue CLI这里多了assets和components两个默认文件夹，assets一般会用来放图片等等，components就是来放组件的。
接下来src文件夹里面还有App.vue和main.js这两个文件和我们创建的那两个几乎是一样的。
不过src文件夹里面没有index.html文件，因为html文件被移动到了public文件夹里面，而且还多了个小图标文件，为什么呢？因为这个文件夹一般是放置静态资源的，比方说这里的index.html不需要像那样打包，只需要把打包好的js插入到这个html里面，然后再生成新的html就好了。这个时候如果我们执行npm run build就会多了dist文件夹，里面就是生产文件了。
babel.config.js和babelrc.js就是同样的道理。
vue.config.js和webpack.config.js是同样的道理。
jsconfig.json也是和前面说的一样。

现在你对vue项目有个更整体的概念了。

Vue项目的运行流程

当一个Vue项目打包后被部署到服务器后，浏览器向服务器发起请求，请求到该路径下的index.*文件。
服务器接收到请求，将index.html文件返回给浏览器。
浏览器解析index.html文件中的内容，会发现一个id为app的div标签以及引入的main.js文件
浏览器通过加载main.js文件会发现vue项目中的根组件App.vue。main.js文件首先将App.vue文件注册为App组件（import App from ‘./App.vue’）。然后将App组件注册为一个名为app的应用。然后将app应用挂载在#app上面，从而与index.html文件里面的标签进行绑定。

（#app 是指定的元素选择器。这意味着 Vue 应用程序将会被渲染到具有 id 为 app 的 HTML 元素中。）

前端

#Vue

Vue基础目录讲解

http://wahoyu.xyz/2023/08/28/Vue基础目录讲解/

作者

Wahoyu

发布于

2023年8月28日

许可协议

SpringBoot文件识别路径（classpath）上一篇

项目中的实体类继承与序列化下一篇