一、使用cloudstudio建立vue开发环境

1.配置服务器

直接使用带nodejs的服务器进行启动

• 安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

• 安装vue

cnpm install -g @vue/cli

2.创建项目

2.1使用npm 创建项目

• 创建项目

vue create www

• 启动项目

cd www
npm run serve

2.2使用vite创建项目

建议使用vite创建项目，因为vite速度非常的快，相当于秒开。
项目创建完之后预览调试可以直接使用。不需要配置其他的选项。

3.预览调试

• 配置预览调试文件.vscode/preview.yml

# .vscode/preview.yml
autoOpen: false # 打开工作空间时是否自动开启所有应用的预览
apps:
  - port: 8081 # 应用的端口
    run: npm run serve  # 应用的启动命令
    root: ./www # 应用的启动目录
    name: my-second-app # 应用名称
    description: 我的第一个 App。 # 应用描述

• 配置外网访问权限
  新建一个vue.config.js，添加一下内容。

module.exports = {
    devServer: {
      disableHostCheck: true
    }
  }

4. 启动预览窗口

ctrl+shift+p，输入preview。