Welcome to Nuxt Playground!

这里是i02sdarling 欢迎来到这里 这是一个关于 Nuxt 的在线Ide

关于本网站 我期望与创建

Js Ts 算法 博客 等相关内容

关于更高的创意 我希望能够接入例如 webSocket nestjs等

项目已经完成

webContinaer monaco

关于本项目

关于我

  1. 这里是我的Github地址:i02sdarling
  2. 我的另外一个项目node-blog
  3. 我的油叉脚本脚本:Youtube-ImmersiveTranlate
  4. 快捷方式Docs

Getting Started

With this tutorial, we assume you are already familiar with the basic concepts of HTML, CSS and JavaScript. Nuxt is a full-stack framework built on top of Vue, we also include a simple Vue tutorial to help you get started quickly.

Start learning by clicking the topics below:

Vue Basics
If you are not familiar with Vue, we recommend you to learn the basics of Vue first.
Nuxt Concepts
If you are not familiar with Vue, we recommend you to learn the basics of Vue first.

Case Studies

Once you are already familiar with the concepts of Vue and Nuxt, we provide some case studies to help you understand how to use Nuxt in real-world applications:

GitHub Profile Coming Soon
Build an website to generate custom user profile from GitHub
ECommerce Coming Soon
Build a basic ECommerce site with product display, cart and login

About This Playground

This playground itself is also built with Nuxt. It uses:

  • WebContainers to create a fully-featured Node.js environment in your browser to run Nuxt dev server.
  • Nuxt Content to provide content management for the playground.
  • Monaco Editor to provide a code editor with syntax highlighting and code completion.
  • Volar to provide Vue and TypeScript language support for Monaco Editor.

You can find the source code on GitHub to learn more about how this playground is built.

Vue Basics
Nuxt integrates Vue 3, a progressive framework for building user interfaces. In this section, we will cover the basics of Vue.
Files
Editor
Initializing WebContainer
Mounting files
Installing dependencies
Starting Nuxt server
Waiting for Nuxt to ready
Terminal