vue3项目 文件组成

前置知识

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')

引入npm

XXX.vue 不能直接交给浏览器运行，所以得先进行处理和加工。要在浏览器中使用.vue文件，需要将其编译为可在浏览器中运行的JavaScript代码。有两个渠道：① webpack ② vue-cli （官方帮忙搭建的 webpack ）

除此之外，项目可能需要用到别的框架、依赖，就引入了npm包管理器进行统一管理。

接上文。

• 下载node之后，就会自动带有npm。在文件夹中npm init -y，会生成package.json文件。

• npm i vue安装vue。package.json文件的dependencies中就会多了vue信息，意思就是添加了vue依赖。

• package-lock.json 锁定依赖的版本号

• 所有的依赖都会放在node_modules中

引入webpack

项目源文件越来越多，引入webpack打包。

• 安装依赖 webpack、webpack-cli、webpack-dev-server

  npm i -D xxx安装依赖。-D的意思是这些以来不放在生产环境上，只是开发时使用。

• 创建文件webpack.config.js。webpack在此文件进行配置。

引入babel

因为并不是每个浏览器都能支持ES6的语法，因此我们需要Babel来把代码从高版本转成低版本。

• 安装babel依赖（配合core preset-env使用）

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

引入vue-loader

浏览器无法识别vue单文件，用vue-loader以来进行识别。

CSS部分需要vue-template-compiler 和css-loader依赖

需要把源文件的HTML 和 JS合并->需要html-webpacl-plugin

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

webpack配置

• webpack.config.js

JS合并->需要html-webpacl-plugin

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

webpack配置

• webpack.config.js

入口文件等