美文网首页
一、使用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开发环境

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