福州seo建站重庆网站推广
下载安装了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资源中编写页面样式。
.gitignore
指定需要被 Git 版本控制忽略的文件或目录（如 node_modules）
README.md
项目的说明文档。
小结
在我们输入指令：yarn dev启动项目时，先是执行了main.js，在main.js中导入了Vue和App.vue，并实例化Vue然后将App.vue渲染到index.html中（ 通过.mount('#app') ），我们之后不用编辑index.html，而是更改App.vue