美文网首页
一、使用cloudstudio建立vue开发环境

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

作者: 哥是八路 | 来源:发表于2021-05-17 16:26 被阅读0次

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。

相关文章

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

    1.配置服务器 直接使用带nodejs的服务器进行启动 安装cnpm 安装vue 2.创建项目 2.1使用npm ...

  • Mac上搭建vue环境

    // 转发自:vue开发环境搭建Mac版 vue开发环境的搭建由于本人使用的是mac,所以环境是windows的下...

  • Vue 基础(1)

    学习测试环境可通过CDN地址引入Vue(项目开发和线上环境一般使用vue-cli、webpack打包) 可使用构造...

  • vue使用webpack.DefinePlugin实现环境变量

    使用场景:使用于vue项目中,开发环境和生产环境使用不懂得api地址;如果使用vue-cli创建的项目,已经配置好...

  • vue-cli3不同环境配置

    Vue 项目开发时,会使用到不同的运行环境,例如:开发环境、测试环境、生产环境。 package.json 主要是...

  • Vue(7)

    一、环境搭建 下面我们需要为后面要做的Vue项目搭建开发环境。 1、基本的运行环境 该项目使用node& vue在...

  • vue 自定义组件 Alert

    无图无真相!!! 开发环境 vue2.x 组件 LzAlert.vue 使用方法

  • Vue2工程化

    目的:建立开发、测试、部署的自动化环境 脚手架 vue-cli vue-cli 的存在将项目环境的初始化工作和复杂...

  • vue-url

    https://cn.vuejs.org/ [使用 Weex 和 Vue 开发原生应用] 1 如何配置开发环境

  • 二. Vue入门

    一. 开发工具 VUE开发环境个人推荐使用VS code, 然后安装特定的插件即可开发,可用插件如下: Vetur...

网友评论

      本文标题:一、使用cloudstudio建立vue开发环境

      本文链接:https://www.haomeiwen.com/subject/upvjjltx.html