当前位置：首页 > news >正文

vue3项目文件组成

news 2025/8/4 11:15:43

从头捋顺一遍vue3项目文件目录

前置知识
- JS模块化
- 什么是依赖？
- 安装依赖
- webpack能做什么？
- vue基本使用
不借助vue-cli，从0开始搭建vue项目。
- index.html、main.js、App.vue
- 引入npm
- 引入webpack
- 引入babel
- 引入vue-loader
- webpack配置
- webpack配置

前置知识

JS模块化

在js刚刚出现的时候，是为了实现一些简单的功能，但随着浏览器的不断发展，js越来越被重视起来，可以实现较为复杂的功能。这个时候开发者为了维护方便，会把不同功能的模块抽离出来写入单独的js文件，但是当项目更为复杂的时候，html可能会引入很多个js文件，而这个时候就会出现命名冲突，污染作用域等一系列问题，这个时候模块化的概念及实现方法应运而生。

什么是依赖？

简单来说，就是我们的项目需要用到的其他的代码库或者模块，比如jQuery，React，Bootstrap等等。这些依赖可以帮助我们实现一些常用的功能，或者提供一些优秀的设计和交互。

但是，如果我们要手动下载和管理这些依赖，那么就会非常麻烦和耗时。所以，我们需要使用一些专门的工具来帮助我们自动化地安装和更新依赖，这就是我们要介绍的内容。目前，前端开发中最常用的两个依赖管理工具是npm和yarn。

安装依赖

https://www.w3cschool.cn/article/74549379.html

npm是Node.js的默认包管理器，它已经随着Node.js一起安装在了我们的电脑上。要使用npm来安装依赖，我们只需要在项目根目录下创建一个package.json文件，或者使用npm init -y命令来自动生成一个。然后，在package.json文件中的dependencies或者devDependencies字段中添加我们需要的依赖名称和版本号。

添加好了依赖之后，我们就可以在项目根目录下运行npm install命令来安装所有的依赖。这个命令会根据package.json文件中的信息，在项目中创建一个node_modules文件夹，并且把所有的依赖下载到这个文件夹中。同时，它还会生成一个package-lock.json文件，用来记录每个依赖的确切版本号和来源。这样可以保证我们在不同的环境中安装相同的依赖。

注意， package.json 里两个重要的属性相关：dependencies 以及 devDependencies。dependencies和devDependencies的区别是，前者是我们项目运行时需要的依赖，后者是我们项目开发时需要的依赖。一般来说，我们把一些打包，编译，测试等工具放在devDependencies中，把一些UI库，框架等放在dependencies中。

webpack能做什么？

把很多文件打包整合到一起, 缩小项目体积, 提高加载速度

（功能：如less/sass -> css，ES6/7/8 -> ES5 处理js兼容，支持js模块化，处理css兼容性，html/css/js -> 压缩合并）

vue基本使用

如果要使用vue，就要先安装。

以vue2为例，可以直接用script标签引入、CDN、NPM。

官网 https://v2.cn.vuejs.org/v2/guide/installation.html#%E7%9B%B4%E6%8E%A5%E7%94%A8-lt-script-gt-%E5%BC%95%E5%85%A5

以vue3为例，可以 ① npm create vue@latest ② CDN

https://cn.vuejs.org/guide/quick-start.html

至此，我们可以在html中使用vue做一些小demo。但是无法完成大型项目。 所以引入了SFC单页面组件、vue-cli、vite来构造大型项目。

不借助vue-cli，从0开始搭建vue项目。

参考视频 https://www.bilibili.com/video/BV1dt4y1K7BF/?spm_id_from=333.788&vd_source=ceab44fb5c1365a19cb488ab650bab03

使用vue-cli直接生成的项目文件很多，我们这里不借助vue-cli，从0开始搭建vue项目。

index.html、main.js、App.vue

创建应用，应用需要根组件App.vue，应用挂载在HTML（#app）上。

官方文档 https://cn.vuejs.org/guide/essentials/application.html

//第一步：创建应用
// 每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例
import { createApp } from 'vue'const app = createApp({/* 根组件选项 */
})//第二步：每个应用都需要一个“根组件”
// 我们传入 createApp 的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。
import { createApp } from 'vue'
// 从一个单文件组件中导入根组件
import App from './App.vue'const app = createApp(App)//第三步：挂载应用
<div id="app"></div>
app.mount('#app')

最终：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'const app = createApp(App)app.use(store)
app.use(router)app.mount('#app')// 也可以简写为 createApp(App).use(store).use(router).mount('#app')