目前，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路由器的使用
 第四章 VUE常用 UI 库 1 ( element-plus,Ant ,naiveui,ArcoDesign)

1.3.1 创建vue项目

运行Vite命令创建npm init vite@latest 创建项目，选择vue项目后在选择JavaScript模式，以后可以根据开发者的实际情况来选择对应的开发模式。

bash 复制代码

$ 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 依赖包加载到你的项目环境中来。

bash 复制代码

$ D:\vue>cd zht-vite-vue
$ D:\vue\zht-vite-vue>npm install

npm install 完成后，使用 npm run dev 命令启动本地开发服务器。在浏览器中输入 URL（http://localhost:5173）会显示项目初始页面。

bash 复制代码

$ 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 项目结构

txt 复制代码

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 复制代码

<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目录下。

javascript 复制代码

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模板代码，它分为三个部分（脚本标签、模板标签、样式标签）组成。

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模块是独立的代码单元，在有需要的它的地通过脚本标签的方法将它加载进来。

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 编译打包与运行的命令。

javascript 复制代码

  "scripts": {
    "build": "vite build",
    "preview": "vite preview"
  }

运行打包命令npm run build ，默认的构建输出路径（dist）在文件下。

bash 复制代码

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 命令，在本地测试该应用。

bash 复制代码

$ 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。

bash 复制代码

$ 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

解锁前端Vue3宝藏级资料 第一章 Vue3项目创建 3 (Vite 创建 vue项目 )

1.3.1 创建vue项目

1.3.2 项目结构

1.3.3 Vite 编译

解锁前端Vue3宝藏级资料第一章 Vue3项目创建 3 (Vite 创建 vue项目 )