目前，Vue.js 官网建议在创建新项目的时候要使用 Vite 而不是 Vue CLI，尽量在开发环境中以 Vite 它作为 Vue.js 的编译基础来使用。Vite 是 Vue.js 作者Evan You 制作的 webpack 的无捆绑替代品，Vite + vue 方式很可能会成为未来的vue项目主流方式。
Vite官网 https://cn.vitejs.dev/地址。
Vite 是一种新型前端构建工具，能够显著提升前端项目开发效率。它主要由两部分组成
- 开发服务器：它基于原生 ES 模块提供了丰富的内建功能，模块热更新（HMR）。
- 构建指令：它使用 Rollup 打包编译项目代码，并且它是预配置的可输出用于生产环境的高度优化过的静态资源。
现在我们介绍一下如何使用 Vite 工具来创建一个 Vue3 项目的开发环境。
第一章 Vue3项目创建 1 Vue CLI 创建vue项目
第一章 Vue3项目创建 2 使用 Webpack 5 搭建 vue项目
第一章 Vue3项目创建 3 Vite 创建 vue项目
第二章 Vue3 基础语法指令
第三章 Vue Router路由器的使用
1.3.1 创建vue项目
运行Vite命令创建npm init vite@latest 创建项目，选择vue项目后在选择JavaScript模式，以后可以根据开发者的实际情况来选择对应的开发模式。
$ npm init vite@latest zht-vite-vue
Need to install the following packages:
create-vite@latest
Ok to proceed? (y) y
? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
> Vue
React
Preact
Lit
Svelte
Others
Select a variant: » - Use arrow-keys. Return to submit.
> JavaScript
TypeScript
Customize with create-vue ↗
Nuxt ↗
Done. Now run:
cd zht-vite-vue
npm install
npm run dev
执行完成后会创建一个zht-vite-vue项目的文件夹，所以用cd命令进入文件夹下，执行npm install 命令，将所有的 Vue.js+ vite所需的 JavaScript 依赖包加载到你的项目环境中来。
$ D:\vue>cd zht-vite-vue
$ D:\vue\zht-vite-vue>npm install
npm install 完成后，使用 npm run dev 命令启动本地开发服务器。在浏览器中输入 URL（http://localhost:5173）会显示项目初始页面。
$ npm run dev
> zht-vite-vue@0.0.0 dev
> vite
VITE v3.2.0 ready in 1034 ms
➜ Local: http://127.0.0.1:5173/
➜ Network: use --host to expose
项目环境正常下出现Vue+Vite的初始画面。
1.3.2 项目结构
zht-vite-vue
|---node_modules
|---index.html //运行html
|---src //代码源文件
| |--components //组件目录
| | |---HelloWorld.vue //模块代码
| |--main.js //入口文件
| |--App.vue //模板代码
|----package.json //配置文件
1 初始页 index.html
在项目文件夹下的 zht-vite-vue/index.html文件中，描述了vue的初始化 html元素与挂载元素
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
2 main.js
在 index.html 中的 script 标签引入 main.js 文件。这个文件是Vue3代码与页面的唯一加载文件，文件地址在zht-vite-vue\src目录下。
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app')
首先创建一个Vue.js 的实例，实例对象vue通过createApp 函数导入并继承 。导入App.vue 文件，App.vue 文件中描述了页面内容。在通过createApp 中的mount 方法将App中的内容挂载到index.html页面中的id属性为app的div元素中。
3 App.vue
目录中zht-vite-vue\src\App.vue 文件中编写vue模板代码，它分为三个部分（脚本标签、模板标签、样式标签）组成。
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<HelloWorld msg="Vite + Vue" />
</template>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
4 HelloWorld.vue
App.vue 文件中的模板标签包含一个自定义标签，与脚本标签中的 HelloWorld.vue 同名，它是我们导入的一个vue模块。vue模块是独立的代码单元，在有需要的它的地通过脚本标签的方法将它加载进来。
<script setup>
import { ref } from 'vue'
defineProps({
msg: String
})
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<p>
Install
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
in your IDE for a better DX
</p>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
</style>
所有具有 vue 扩展名的文件，都统称为单文件组件 (SFC) 文件。在 Vue.js 中，应用程序是通过将 createApp 中指定的 App 组件作为根组件来导入其他组件进行运行的。开发时候可以在根组件 App 中编写所有处理，但随着功能增多，代码会变得越来越臃肿，造成维护和二次开发的困难。
这时候可以通过按功能和业务逻辑来划分组件，将不同功能和业务需求的代码写在不同的vue文件中，通过引用和导入灵活使用它们。
组件之间也是具有树状结构的，它们也会有自己的层级与继承关系。
1.3.3 Vite 编译
在项目中package.json配置了Vite 编译打包与运行的命令。
"scripts": {
"build": "vite build",
"preview": "vite preview"
}
运行打包命令npm run build ，默认的构建输出路径（dist）在文件下。
D:\vue\zht-vite-vue>npm run build
> zht-vite-vue@0.0.0 build
> vite build
vite v3.2.0 building for production...
✓ 16 modules transformed.
dist/assets/vue.5532db34.svg 0.48 KiB
dist/index.html 0.43 KiB
dist/assets/index.43cf8108.css 1.26 KiB / gzip: 0.65 KiB
dist/assets/index.021287dc.js 52.60 KiB / gzip: 21.19 KiB
在默认的dist文件下编译代码生成。
当你构建完成应用后，你可以通过运行 npm run preview 命令，在本地测试该应用。
$ npm run preview
> zht-vite-vue@0.0.0 preview
> vite preview
➜ Local: http://127.0.0.1:4173/
➜ Network: use --host to expose
可以在浏览器中http://localhost:4173方便的查看本地环境下构建的html页面代码是否正常。
可以通过 --port 参数来配置更改服务的运行端口。
package.json文件中加入
{
"scripts": {
"preview": "vite preview --port 8080"
}
}
修改preview参数后，服务器运行 http://localhost:8080。
$ npm run preview
> zht-vite-vue@0.0.0 preview
> vite preview --port 8080
➜ Local: http://127.0.0.1:8080/
➜ Network: use --host to expose
