虽然写了一些面经，但是并没有一个合适的项目来运用这些知识。所以打算写一个简单的Vue应用，来进行知识的学习和项目经验的积累。
新建一个项目
在目录中输入npm init vue，就可以以vue为模板新建一个npm项目，我们目前除了vue本体之外其他的库是不需要使用的，因此全部填no即可，因为反正以后还可以再安装。完成后会新建一个文件夹，里面就是我们的项目了。
可以通过npm run dev命令运行项目，然后项目就会在127.0.0.1:5173上运行。
各文件的位置以及作用
我们先看一下我们这个新项目的文件树，不过在这之前要先npm install来安装目前运行web应用所需要的库。
babyblog
├─ .gitignore // git同步代码时忽略的文件列表
├─ index.html // vite项目的入口文件
├─ package-lock.json // 锁定安装时的npm包版本号，保证在使用npm install命令时安装的包版本一致
├─ package.json // 项目配置
├─ public // 提供给需要通过绝对路径引用的静态文件，一般作为应急使用
│ └─ favicon.ico
├─ README.md // 项目文档
├─ src // 资源文件夹
│ ├─ App.vue // 默认的入口组件
│ ├─ assets // 美术资源，包括css和图片等
│ │ ├─ base.css
│ │ ├─ logo.svg
│ │ └─ main.css
│ ├─ components // 组件资源，除了入口之外的组件都在这里
│ │ ├─ HelloWorld.vue
│ │ ├─ icons
│ │ │ ├─ IconCommunity.vue
│ │ │ ├─ IconDocumentation.vue
│ │ │ ├─ IconEcosystem.vue
│ │ │ ├─ IconSupport.vue
│ │ │ └─ IconTooling.vue
│ │ ├─ TheWelcome.vue
│ │ └─ WelcomeItem.vue
│ └─ main.js // nodejs应用入口文件
└─ vite.config.js // vite配置文件（目前的vue都默认捆绑vite）
探索package.json
上文中说了，package.json是用来存储项目配置的地方，我们可以来一窥里面的内容。
{
"name": "babyblog", // 项目名称
"version": "0.0.0", // 项目版本
"private": true, // 是否是公开项目
"scripts": { // 所设定的一些脚本命令
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": { // 开发时使用的包以及版本
"vue": "^3.2.45"
},
"devDependencies": { //项目在非开发状态（也就是生产环境）使用的包及版本
"@vitejs/plugin-vue": "^4.0.0",
"vite": "^4.0.0"
}
}
探索index.html和main.js
无论是vue还是vite，都需要借助公共的index.html网页文件。这是因为在index.html加载后才会加载main.js等脚本。因为一个web应用必须先进入一个网页，之后才能够讨论其他的事情。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- HTML中的缩放以及标题 -->
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<!-- 这里面就是整个VueAPP容器所在的地方 -->
<div id="app"></div>
<!-- 这里就是运行整个node 应用的地方 -->
<script type="module" src="/src/main.js"></script>
</body>
</html>
在main.js运行时发生了什么呢？观察一下它的代码。
import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'
createApp(App).mount('#app')
可以看到createApp就是根据传入的组件来创建一个应用实例，然后还附带了一个调用App.mount，通过查询文档可以得知是把创建的应用实例挂载到#app为id的HTML元素中。