凡图科技

主题

创建Vue ​

Vue命名规范

工程创建

  • 创建项目架子：npm init vue@latest
bash
√ 请输入项目名称： » vue-project
√ 是否使用 TypeScript 语法？ ... 否
√ 是否启用 JSX 支持？ ... 否
√ 是否引入 Vue Router 进行单页面应用开发？ ... 是
√ 是否引入 Pinia 用于状态管理？ ... 是
√ 是否引入 Vitest 用于单元测试？ ... 否
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 是
√ 是否引入 Prettier 用于代码格式化？ ... 是
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否

正在初始化项目 E:\workspace\vue-project...

项目初始化完成，可执行以下命令：

  cd vue-project
  npm install
  npm run format
  npm run dev
  • 安装依赖：npm install
  • 启动项目：npm run dev
  • 打包项目：npm run build

Vue在Fine中调试 ​

  • 解决跨域问题

界面跳转

  • 在port.conf中添加location实现界面跳转
nginx
location /desktop {
    # 代理转发
    proxy_pass http://localhost:5173/desktop;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    
    # 支持websocket
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

接口跳转

  • 在port.conf中添加location实现界面跳转
nginx
location /example {
    # 代理转发
    proxy_pass http://127.0.0.1:8080/fine-example;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_connect_timeout 60s;
    proxy_read_timeout 180s;
}

Vue工程打包 ​

  • 程序打包

npm run build

  • 创建静态应用及部署

参考官网：静态应用