Vue SFC Playground

文章目录

环境
Playground
下载
本地运行
总结

环境

Ubuntu 24.04
Firefox 147.0.4 (64-bit)
VSCode 1.109.5
npm 11.6.2

Playground

Vue的官网提供了一个Playground，网址是： https://play.vuejs.org 。

在浏览器里打开playground，可见页面分为左右两侧，左边输入代码，右边则实时呈现效果：

第一次打开Playground时，已经缺省提供了一段"Hello World"代码：

html 复制代码

<script setup>
import { ref } from 'vue'

const msg = ref('Hello World!')
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
</template>

注意：该代码是"组合式"，如果你喜欢使用传统的"选项式"风格，可以修改如下：

html 复制代码

<script>
export default {
  data() {
    return {
      msg: 'Hello World'
    }
  }
}
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
</template>

此外，在屏幕右上角，还可以配置环境：

选择TypeScript版本
选择Vue版本
选择"开发"或者"生产"模式
选择服务器渲染模式（SSR）

现在，就可以在playground编写和运行Vue代码了。

下载

在playground写好代码后，也可以把完整的Vue项目下载到本地。

在右上角点击"下载"图标，下载 vue-project.zip 文件。解压后，生成 vue-project 目录：

用VSCode打开该目录。

VSCode如果没有安装 Vue (Official) 插件，则在打开 App.vue 文件的时候，会提示安装：

安装插件后，就会有语法高亮和语法检查等功能。

在项目根目录，运行 npm install ：

bash 复制代码

➜  vue-project npm install

added 34 packages, and audited 35 packages in 19s

6 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
npm notice
npm notice New minor version of npm available! 11.6.2 -> 11.12.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.12.0
npm notice To update run: npm install -g npm@11.12.0
npm notice

本地运行

在项目根目录下运行 npm run dev ：

bash 复制代码

  VITE v7.3.1  ready in 260 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

从输出可见，访问地址是 http://localhost:5173/ ：

总结

Vue提供的playground非常方便，可以直接使用，并立即看到效果。对于想要学习Vue，但又对环境不太熟悉的新手，非常友好便利。

也可以下载到本地运行调试，和本地创建的Vue项目没什么太大差别。