创建 Vue 3 工程
【摘要】 创建 Vue 3 工程一、创建工程的两种方式创建 Vue 3 工程主要有两种方式。一种是使用 vue-cli,这是一个基于 webpack 的脚手架,能够帮助我们快速搭建 Vue 3 项目。参考文档:https://cli.vuejs.org/zh/guide/creating-a-project.html另一种是使用 Vite,这是 Vue 官方新推出的构建工具,也是官方推荐用于创建 Vu...
创建 Vue 3 工程
一、创建工程的两种方式
创建 Vue 3 工程主要有两种方式。一种是使用 vue-cli,这是一个基于 webpack 的脚手架,能够帮助我们快速搭建 Vue 3 项目。
参考文档:
https://cli.vuejs.org/zh/guide/creating-a-project.html
另一种是使用 Vite,这是 Vue 官方新推出的构建工具,也是官方推荐用于创建 Vue 3 工程的方式。
https://cn.vuejs.org/guide/quick-start#creating-a-vue-application
二、Vite 的优势
Vite 与传统的 webpack 构建方式相比,有诸多优势。它轻量快速,热承载能力出色,能够急速启动服务。在执行项目启动时,Vite 的速度远超 webpack。此外,Vite 对 TypeScript(ts)、JSX 以及 CSS 等支持开箱即用,无需额外配置,即可直接编写 ts 代码。最重要的是,Vite 实现了真正的按需编译。
三、按需编译的原理
按需编译是 Vite 的一大亮点。我们可以通过对比 webpack 和 Vite 的构建流程图来理解这一概念。在 webpack 的构建流程中,从入口文件开始,需要先分析路由,再对每个模块进行处理,最后才能告知服务器准备就绪,整个过程较为耗时,尤其是当项目中的路由、模块和组件数量较多时,启动速度会变得非常慢。而 Vite 的流程则大为不同,它一上来就告知服务器已就位,项目启动。当从入口文件进入后,Vite 会根据你的需求即时处理相关模块,未被访问的部分则不会进行处理,这种方式大大提高了构建效率,类似于懒加载的机制,即用时再处理并展示。
四、创建 Vue 3 工程的具体步骤
(一)环境准备
在创建工程之前,需要确保电脑上已安装 Node.js 环境。如果没有安装,可以通过搜索 Node.js,找到中文网或官网进行下载安装。安装完成后,需要重启电脑。可以通过在命令行输入 node
来检测是否已成功安装 Node.js 环境,如果显示版本号则表示已安装,若提示不是内部或外部命令,则需安装 Node.js。
(二)执行创建命令
根据 Vue 官方文档,可以使用特定的命令来创建基于 Vite 的 Vue 3 项目。可以直接使用官方提供的命令,也可以从官网获取最新命令。在合适的目录下,右键打开终端,输入命令并回车执行。
这里我们使用Vite来创建
执行命令npm create vue@latest
即可
(三)项目配置
在创建过程中,会有一些配置选项。项目名称需遵循一定原则,不能出现中文和特殊字符,建议使用纯小写字母、数字和下划线组合。接下来,会询问是否添加 TypeScript 支持,由于 Vue 3 拥抱了 TypeScript,因此建议选择“是”。对于是否添加 JSX 支持,这里选择“否”。关于是否配置路由环境,建议选择“否”,以便后续手动配置路由,更深入地学习。状态管理、单元测试、端到端测试以及 ESLint 语法检查等选项,根据实际需求选择,这里建议选择“否”,以便自由编写代码。
这样一个工程就创建完成了,接下来我们分析一下项目的工程
五、工程文件结构分析
(一)VS Code 插件
打开创建好的工程,建议使用 VS Code 进行开发。VS Code 对 Vue 3 有很好的支持,Vue 官方还针对 VS Code 出品了两个插件。如果 VS Code 未安装这些插件,会自动提示安装。
(二)文件夹和文件介绍
-
.vscode文件夹:这里是vscode的插件的配置信息。
-
json 文件:配置插件相关。
-
public 文件夹:脚手架的根目录,包含页签图标等。
-
src 文件夹:存放前端工程师的工作成果,如
.vue
、.js
、.css
等文件。 -
.gitignore 文件:git 的忽略文件,不能删除。
-
env.d.ts文件:这个文件不能删除,这个文件的作用是让ts认识你写的文件,写就是声明文件,如果标红的话通过
npm i
来安装依赖 -
tsconfig.json 文件:让 TypeScript 认识各种文件,如图片、视频等,不能随意修改。
-
index.html 文件:入口文件,对于 Vite 工程来说,入口文件是
index.html
而不是main.js
或main.ts
。这里是引入main.ts main.ts支撑整个英语而运行。 -
package.json 文件:包的管理文件,也称为依赖声明文件。这里有前端启动项目的短命令
-
README.md 文件:对工程的简单介绍,可根据需要删除。
-
tsconfig.*.json 文件:TS 的配置文件,需保留。
-
vite.config.js 文件:整个工程的配置文件,后续会用到。
六、启动项目
拿到前端项目后,需查看 package.json
文件中的短命令,如 dev
。通过执行 npm run dev
命令来启动项目。启动后,可在浏览器中查看项目效果。如果修改 index.html
文件中的内容,重新启动项目后,可在浏览器中看到修改后的效果。
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论(0)