vue3学习笔记（2）vite创建vue3项目

Vue3专栏入口

一、Vite构建工具

Vue3官方文档

Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。

通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。

npm init vite@latest start_vue -- --template vue

代码执行时会有提示，类似于这里说需要安装包，输入y就可以直接安装，安装完成后就会再次创建，如果已经有的就不需要安装，会直接创建。在最后返回了三行命令我们按顺序输入就可。

# 进入start_vue目录
cd start_vue
# 安装需要的环境
npm install
# 运行vue
npm run dev

进入地址后可以看到以下页面说明你创建成功了！

什么页面显示不一样？src/App.vue 改下面框住的内容就行。

二、目录讲解

Vue3是一个十分强大的框架，当然也少不了让人头疼的目录。我们就按照图的顺序依次讲解这个目录。.vscode、node_modules不讲这是环境目录咱不需要管他俩。

2.1 public目录

这个目录一听就是存放公共文件的，现在他存放了一个favicon.ico也就是这个图片。

这个图片用在下图这个地方。一些公用的，固定的js代码或图片就可以存放到这里。

2.2 src目录

2.2.1 assets目录

用来存放图片这里存放了Vue的大logo

也就是它

2.2.2 components目录

这是我们的组件目录

HelloWorld.vue是组件其中有三个部分script是vue代码，template是html的模板，style是css

2.2.3 App.vue

结构和HelloWorld.vue一样都是三个部分但我们可以看到App.vue里调用了HelloWorld.vue这就涉及到组件的概念了，咱之后讲到组件会说的。

2.2.4 main.js

一听名字就很重要，调用了一个createApp用来创建一个应用渲染到了id为app的div上。App.vue是我们的主组件。

2.3 其他文件

2.3.1 .gitgnore

这是git中的忽略文件，可以看这边git基本使用不属于vue的技术

2.3.2 index.html

这就是我们的主页面了 在src/main.js中渲染的div就是这个id为app的div。

2.3.3 package-lock.json、package.json、README.md

前两个是各种命令的配置版本之类的，也没什么说的。README.md是说明文档。