Vue3 官方文档翻译 Quick Start

引言

原文地址: http://blog.duhbb.com/2022/02/11/translation-of-quick-start-in-vue-3-offiicial-doc/

欢迎访问我的博客: http://blog.duhbb.com/

Vue3 官方文档翻译 Quick Start

使用构建工具

Vue官方的构建工具是使用Vite,一个现在,轻量级以及非常非常快的前端构建工具.

在线工具

不需要本地安装什么东西,直接在浏览器中就帮你构建好了.

本地工具

前提:

• 熟悉命令行
• 安装Node.js

为了创建一个带有构建工具的Vue项目,你需要在命令行运行如下的命令,注意不要输入>(瞧瞧,文档作者多么用心鸭).

> npm init vue@latest

这个命令将会安装并执行create-vue,以及官方的Vue项目的scaffolding工具(这是个啥?).

然后命令行会输出一些列的Feature让你选择:

? Project name: … 
? Add TypeScript? … No / Yes
? Add JSX Support? … No / Yes
? Add Vue Router for Single Page Application development? … No / Yes
? Add Pinia for state management? … No / Yes
? Add Cypress for testing? … No / Yes

Scaffolding project in ./...
Done.

如果你不知道怎么选,直接选No就行了,后续你更熟练了之后就可以根据自己的需求选了.

一旦项目创建成功了,下面的执行就可以安装依赖并且启动开发服务器鸟.

> cd 
> npm install
> npm run dev

这样你TM的就跑起来了第一个Vue项目了,鸡冻吗?

别慌,我们还给出了一些额外的建议:

• 推荐使用Visual Studio Code + Volar扩展进行开发
• 更多个工具上的细节以及和后端集成见Tooling Guide
• 要了解更多的关于构建工具Vite,可以查看Vite docs
• 如果你选择TypeScript,查看TypeScript Usage Guide

当你要将代码迁移到生产环境时,执行如下的命令:

> npm run build

她会在项目目录./dist下给你的APP创建一个给生产环境构建.

不想用构建工具

我就想直接用Vue的库,咋整?

{{ message }}

不会吧,真有人这么用?

下一步

强烈建议你读一下Introduction,费好大力气写的你不看?

结束语

原文地址: http://blog.duhbb.com/2022/02/11/translation-of-quick-start-in-vue-3-offiicial-doc/

欢迎访问我的博客: http://blog.duhbb.com/