一、使用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。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容