前言

vue是当下前端开发中的最火框架，以美观，易上手受到广大公司的青睐。去大厂，最基础的一点就是能够熟悉掌握vue的开发与运用。在本指南中，我们将一步步引导你如何创建一个Vue项目，并运行你的第一个Vue应用。

创建你的vue项目

1.npm create vue@lastest 初始化

打开你的集成终端，在对应的文件夹中输入这个指令，他将帮助你生成一个vue脚手架

2. 输入项目名称

我这里将项目取名为new,作为新手，我们一路点否

3. 初始化完成，跟随指令执行命令

cd new 在新建文件夹中执行操作
npm install 安装项目依赖
npm run dev 运行你的项目

运行项目

npm run dev 运行项目后，终端中会加载一个网址，点开网址，可以看到你的项目在后台运行

浏览器中的项目：

yes,you did it! 恭喜！你成功启动了一个vue项目！

现在我们可以开始探索Vue的各种特性，并构建自己的Web应用啦

理解你的vue项目

vue创建项目运行完成后，在我们的项目中会包含这些文件夹

这些文件夹有什么作用？

.vscode 这是vscode编辑器自动生成的一个文件，帮助vscode更好的理解vue内容
node_modules 是整个项目的第三方仓库，整个项目运行的依赖。
public 内置了Vue官方标识的图标，作为项目首页的默认展示元素。 4. src 专门给我们开发代码的地方，
.gitignore 当你向git提交代码时， .gitignore中的代码不会被提交，防止提交代码过大，比如本项目中的 node_modules 就被记录在本文件中

package.json 被誉为一个项目的说明书，如图，你可以清晰的看到项目的名称，版本和属性等等，他有三个重要的字段

scripts 字段定义了通过npm命令行工具执行的脚本，"dev": "vite"说明当运行npm run dev命令时，会启动Vite的开发服务器，即启动项目
devDependencies 字段：在开发环境中需要的依赖包，这些依赖仅在开发过程中需要的。记录你在开发过程中引用到的库和版本。
dependencies 字段：生产环境中的依赖包，这些依赖是项目在运行时（包括生产环境）所必需的。当开发完成上线后，它们会被打包进最终的生产包中，以确保项目能够正常运行。

package-lock.json 可以查询每一个依赖的地址来源

8. index.html 单页应用程序的入口点，vue之所以能够实现单页面多内容切换的基础。

在单页运用中即使你有100个页面但最终只会有一个html，这是怎么实现的？
这就是仅有的一个html

jsconfig.json 内置了一些配置
vite.config.js 配置Vite项目行为和特性的核心文件

src

在Vue项目中，src 目录是源代码的存放位置，它包含了构建Vue应用所需的所有文件。

assets

用于存放静态资源，如图片、字体、样式文件等。在Vue组件中，可以通过相对路径或别名来引用这些资源

components

用于存放Vue的组件

app.vue

是整个项目的根组件

什么是组件？组件就是一个个的代码片段，这些代码片段不再写在html文件中，而是以.vue文件格式结尾

main.js

点开src中的mian.js，你会发现这段代码，这个整个项目最外层的项目文件；这段代码主要做了3件事

引入vue
引入根组件 App.vue
创建vue的应用实例，并挂载

js 复制代码

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

从vue中引入了createApp方法；导入了根组件；利用这个方法创建一个新的Vue应用实例，其根组件是 App 组件，将这个Vue应用实例挂载到DOM中的 <div id="app"></div> 元素上，从而开始渲染Vue应用并响应用户的操作。

结语

以上是vue项目的基本框架，除了这些框架外，再以后的学习中除了熟悉开发这些文件我们还将创建router``views等等文件

vue入门：创建并理解你的vue项目

前言