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: … <your-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 ./<your-project-name>...
Done.

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

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

> cd <your-project-name>
> 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的库,咋整?

<script src="https://unpkg.com/vue@3"></script>

<div id="app">{{ message }}</div>

<script>
  Vue.createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

不会吧,真有人这么用?