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

[Vue]脚手架介绍

news 来源：原创 2025/5/26 7:00:24

下载安装了Vue脚手架之后，我们就可以使用其创建统一标准的Vue项目。这里来简单介绍一下Vue脚手架的使用。

脚手架创建项目后的目录结构：

根据脚手架版本的不同，项目结构可能会有些不一样。（比如在比较老版本的脚手架中，index.html文件是在public目录下面的）

node_modules

node_modules：第三方包文件，通常是各种js脚本文件。除去脚手架默认引入的包之外，还可以引入私用的包。引包通常通过package.json文件来管理，package-lock.json来管理版本。

public和src/assets

public：存放不需要被构建的静态资源（比如用作图标的矢量图、html容器等）。

src/assets：存放需要被构建的静态资源（比如css样式文件等）。

public和src/assets的区别：

public在构建时会直接将文件复制到输出目录，通过绝对路径引用，不做任何处理。适用于固定不变的资源。

而assets里面的文件在构建时进行优化处理，如压缩、哈希命名等。适用于需要动态加载、被组件引用和的资源（如图片、字体、样式）。

大多静态资源往往都需要通过优化处理，实际上public目录中会存放的静态资源不多，通常都会放在assets目录下，细节的东西之后会在对应文章详细讲。

src/components

同来存放组件的目录。所有项目会用到的组件都会放在这下面。

src/App.vue

这是vue根组件，所有项目中可以运行看到的内容，都会在这个文件中编写。

src/main.js

main.js的核心作用是导入App.vue，基于App.vue创建结构渲染index.html。

import './assets/main.css'

// 导入Vue的核心包
import { createApp } from 'vue'
//导入Vue根组件
import App from './App.vue'

//基于App.vue创建结构渲染index.html
createApp(App).mount('#app')

.mount('#app')的作用其实就和我们之前演示的时候，写在vue里面的el:'#app'是一样的。

package.json

用于配置当前Vue相关配置信息：

其中，scripts中配置的脚本，键是运行时的指令名，值则是运行的脚本文件。比如启动项目时，根据上面的scripts配置我们应输入的命令为：yarn dev。

但是如果你将"dev": "vite" 的dev该成serv，那么再启动项目输入的命令为：yarn serv。

index.html

应用的主html模板文件。

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

可以看到其中有一个id为app的div盒子，在我们之前的演示中，所有的代码通常都是在一个html资源中。

而脚手架是为了便于工程化开发模式，在往后我们不会再直接在该html资源中编写页面样式。