Vite是什么?怎样使用Vite创建Vue3项目?

简介: Vite是什么?怎样使用Vite创建Vue3项目?

在Vue 3出现前,Vue 2一般使用Vue CLI创建。Vue CLI基于Webpack构建并配置项目,在项目启动时,Webpack需要从入口文件索引整个项目的文件,编译成一个或多个单独的.js文件。虽然Webpack对代码进行了拆分,但是仍可能一次生成所有路由下的编译后的文件,导致服务启动时间随着项目的复杂度增加而呈指数式的增长。而Vite改进了这一点,在项目启动时,Vite会对模块代码进行按需加载,启动速度更快。因此,当使用Vue3开发新项目时,推荐使用Vite进行创建。

什么是Vite

Vite(读音:/vit/)是一个轻量级、运行速度快的前端构建工具,它支持模块热替换(Hot Module Replacement,HMR),可以即时、准确地更新模块,当代码修改时无须重新加载页面或清除应用程序状态。Vite默认安装的插件比较少,随着开发过程中依赖的增多,需要额外进行配置。

Vite不需要以命令的方式安装和卸载,只要安装了npm或yarn,就可使用Vite的相关命令创建项目。Vite会作为项目的开发依赖保存在项目的node_modules目录中。

需要注意的是,Node.js必须为14.18及以上版本时才可以使用Vite,并且Vite中的部分模板可能需要更高的Node.js版本才能正常运行。另外,Node.js的14、16等更新版本不再支持Windows 7操作系统,推荐使用Windows 10等新版操作系统。

Vite创建Vue 3项目

Vite提供了两种创建项目的命令,手动创建项目的命令和通过模板自动创建项目的命令。

1.手动创建项目的命令

使用npm或yarn包管理工具都可以搭配Vite手动创建项目,具体命令如下。

#使用npm create命令创建项目
  npm create vite@latest
  #使用yarn create命令创建项目
  yarn create vite


上述命令展示了两种包管理工具用于创建Vite项目,在使用时任选其一即可。npm create和yarn create命令后跟一个vite包名,表示初始化Vite。vite@latest表示在npm中安装最新版本的Vite。

打开命令提示符,切换到D:\vue\chapter01目录,执行如下命令。

yarn create vite


执行上述命令后,Vite会提示填写项目名称,如下图所示。

image.png

使用vite-project作为项目名称后,Vite会提示选择创建项目所使用的框架,如下图所示。

image.png

选择好框架后,Vite会提示选择一个变体,如下图所示。

image.png

选择好变体后,Vite会提示项目创建完成,如下图所示。

image.png

项目创建完成后的提示命令,具体命令解释如下。

cd vite-project              # 切换到项目目录
yarn                         # 安装项目的全部依赖
yarn dev                     # 启动服务

上述命令中,yarn dev命令是Vue3项目中package.json文件里面scripts节点配置的命令。除了yarn dev命令外,还有2个常用命令yarn build和yarn preview,它们分别表示构建生产环境项目和构建本地预览环境项目。这3个命令实际上都是别名,是为了便于开发人员记忆。当执行这3个命令时,yarn会读取当前项目的package.json文件中的命令配置,找到真正的命令并执行。

Vue 3项目的package.json文件中的命令配置如下。

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

上述配置中,dev是vite的别名,build是vite build的别名,preview是vite preview的别名。也就是说,当执行yarn dev时,实际执行的命令是yarn vite。别名可以自定义,如果修改了别名,在执行命令时需要使用修改后的别名。

项目启动后,会默认开启一个本地服务,具体如下。

VITE v4.1.4 ready in 441 ms
Local: http://127.0.0.1:5173/

在浏览器中打开http://127.0.0.1:5173/,如下图所示。

image.png

2.通过模板自动创建项目的命令

通过模板自动创建项目的方式相对简单,它通过附加的命令行选项直接指定项目名称和模板,省去了填写项目名称、选择框架和变体等环节。Vite提供了许多模板预设,可以创建Vite+React+TS、Vite+Vue、Vite+Svelte等类型的项目。通过附加的命令行选项直接指定项目名称和模板的基本语法格式如下。

# 使用npm6或更低版本创建项目
npm create vite@latest<项目名称>--template<模板名称>
# 使用npm7或更高版本创建项目
npm create vite@latest <项目名称>----template <模板名称>
# 使用yarn create命令创建项目
yarn create vite<项目名称>--template<模板名称>

打开命令提示符,切换到D:\vue\chapter01目录,使用yarn创建一个基于Vite+Vue模板且项目名称为hello-vite的项目。

yarn create vite hello-vite --template vue

执行上述命令后,hello-vite项目创建完成的效果如下图所示。

image.png

在项目创建完成后,给出了一些提示命令,需要执行这些命令才能完成项目启动,具体命令如下。

cd hello-vite                 # 切换到项目目录
yarn                          # 安装项目的全部依赖
yarn dev                      # 启动服务

项目启动后,会默认开启一个本地服务,具体如下。

VITE v4.1.4 ready in 441 ms
→Lqcal: http://127.0.0.1:5173/

在浏览器中打开http://127.0.0.1:5173/,页面效果与手动创建Vue 3项目的页面效果相同。

Vue 3项目的目录结构

Vue 3项目创建成功后,使用VS Code编辑器打开项目目录,可以看到一个默认生成的项目目录结构,如右图所示。

image.png

下面简要介绍Vue 3项目的目录结构中各个目录和文件的作用,具体如下。

• vscode:存放VS Code编辑器的相关配置。

• node_modules:存放项目的各种依赖和安装的插件。

• public:存放不可编译的静态资源文件,当进行项目构建时,该目录下的文件会被复制到dist目录,该目录下的文件需要使用绝对路径访问。

• src:源代码目录,保存开发人员编写的项目源代码。

• src\assets:存放可编译的静态资源文件,例如图片、样式文件等。该目录下的文件需要使用相对路径访问。

• src\components:存放单文件组件,即.vue文件。

• src\components\HelloWorld.vue:一个名称为HelloWorld的单文件组件。

• src\App.vue:项目的根组件。

• src\main.js:项目的入口文件,用于创建Vue应用实例。

• src\style.css:项目的全局样式表文件。

• gitignore:向Git仓库上传代码时需要忽略的文件列表。

• index. html:默认的主渲染页面文件,同时也是页面的入口文件。

• package.json:包配置文件。

• README.md:项目使用说明文件。

• vite.config.js:存放Vite的相关配置。

• yarn.lock:存储每一个依赖项的安装版本,在使用yarn安装、升级、卸载依赖时,会自动更新yarn.lock文件。

此外,当执行了yarn build命令后,在项目目录中会出现dist目录,该目录中保存的是项目构建后的文件。

Vue 3项目的运行过程

使用Vite构建Vue 3项目后,当执行yarn dev命令启动服务时,项目就会运行起来,该项目会通过src\main.js文件将src\App.vue组件渲染到index.html文件的指定区域。

src\App.vue文件

Vue 3项目是由各种组件组成的,src\App.vue文件是项目的根组件。在根组件中可以引用其他组件,从而显示其他组件的内容。

index.html文件

index.html文件是页面的入口文件,该文件中预留了用于被src\main.js文件中的Vue应用实例所控制的区域。

src\main.js文件

src\main.js文件是项目的入口文件,该文件创建了Vue应用实例。Vue应用实例是Vue项目工作的基础,每个Vue项目都是从创建Vue应用实例开始的。


目录
相关文章
|
2月前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
154 64
|
2月前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
124 60
|
17天前
|
JavaScript API 数据处理
vue3使用pinia中的actions,需要调用接口的话
通过上述步骤,您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store,都能轻松实现高效的状态管理和数据处理。
65 3
|
2月前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
45 8
|
2月前
|
存储 JavaScript 数据管理
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
41 1
|
2月前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
49 1
|
2月前
|
JavaScript
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
|
2月前
|
JavaScript 索引
Vue 3.x 版本中双向数据绑定的底层实现有哪些变化
从Vue 2.x的`Object.defineProperty`到Vue 3.x的`Proxy`,实现了更高效的数据劫持与响应式处理。`Proxy`不仅能够代理整个对象,动态响应属性的增删,还优化了嵌套对象的处理和依赖追踪,减少了不必要的视图更新,提升了性能。同时,Vue 3.x对数组的响应式处理也更加灵活,简化了开发流程。
|
2月前
|
JavaScript 前端开发 API
从Vue 2到Vue 3的演进
从Vue 2到Vue 3的演进
53 0
|
2月前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
71 0