​
Desenvolvimento de Websites Vue Profissionais

  • Antes de começar, certifique-se de ter o Node.js e npm instalados em seu sistema. Caso ainda não os possua, você pode baixá-los do site oficial do Node.js.
  • Em seguida, será necessário criar uma conta na Square Cloud, o que pode ser feito através da página de cadastro. Você pode utilizar seu email para criar uma conta.
  • Por fim, você precisa ter um plano pago ativo em sua conta. Você pode visualizar nossos planos e adquirir um de acordo com suas necessidades aqui.

​
Criação de Projeto Vue

Para criar um novo projeto Vue, execute o seguinte comando: 
npm create vue@latest
Neste comando, npm create vue@latest é usado para criar um novo projeto Vue com a versão mais recente do Vue. O comando npm create é uma ferramenta que vem com o npm, o gerenciador de pacotes do Node.js. É usado para inicializar um pacote npm novo ou existente. vue@latest é um pacote disponível no registro npm que configura um novo projeto Vue para você. Ele cuida de toda a configuração inicial, como criação do diretório do projeto, instalação de dependências necessárias e configuração de arquivos básicos. @latest é uma tag especificando que você quer usar a versão mais recente do pacote vue. Isso garante que você esteja sempre usando a versão mais atualizada e, consequentemente, tenha acesso aos recursos mais recentes.

​
Configuração da Porta 80

A porta 80 é a porta padrão para tráfego HTTP. Para hospedar uma aplicação Vite na Square Cloud, configure o uso da porta 80. No Vite, você pode definir o parâmetro --port 80 no script de inicialização para garantir que sua aplicação execute corretamente nesta porta.

​
Criação do Arquivo de Configuração da Square Cloud

Saiba mais sobre: como criar o arquivo de configuração para a Square Cloud.

O arquivo squarecloud.app é um arquivo de configuração que será usado para configurar sua aplicação; ele será usado para definir o nome, descrição, versão, arquivo principal, entre outras coisas.

​
Configuração do Campo START

No arquivo de configuração da Square Cloud, o campo START é essencial para personalizar o comando de inicialização. Se você quiser construir e iniciar sua aplicação Vite na Square Cloud, configure o campo START da seguinte forma:
squarecloud.app
START=npm run build && npm run serve
Este comando executará os scripts “build” e “serve” definidos em seu package.json:
package.json
{
  "name": "vue-project",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview --port 80"
  },
  "dependencies": {
    "vue": "^3.4.21"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "vite": "^5.2.8"
  }
}

​
Aquisição de Plano Antes do Upload do Projeto

Antes de fazer o upload do seu projeto para a Square Cloud, é importante entender que você precisa adquirir um plano. O tipo de plano que você escolher dependerá dos recursos exigidos pela sua aplicação. Você pode visualizar nossos planos aqui.
Está se perguntando quanta RAM e CPU seu plano precisa para hospedar um website Vue.js? Não se preocupe, estamos aqui para ajudar. Vue.js é um framework JavaScript progressivo conhecido por sua adaptabilidade e simplicidade. É projetado para ser incrementalmente adotável, facilitando para desenvolvedores começar pequeno e escalar conforme necessário. O Vue.js também enfatiza uma abordagem de renderização declarativa e orientada a componentes, tornando intuitivo construir interfaces web modernas. Nosso plano Standard oferece 4GB de RAM e 4vCPU, que deve ser suficiente para a maioria dos websites Vue.js. No entanto, se você está trabalhando em um projeto maior ou precisa de mais estabilidade, recomendamos considerar nosso plano Pro. Com recursos adicionais, você pode garantir desempenho suave mesmo sob alta demanda. Para adquirir, simplesmente clique aqui.

​
Upload do Projeto para a Square Cloud

Após preparar os arquivos do seu projeto, agora você pode fazer o upload deles para a Square Cloud e hospedar seu projeto.
Acesse o Dashboard da Square Cloud e faça o upload dos arquivos do seu projeto.

​
Recursos Adicionais

Para mais informações sobre Vue e suas ferramentas, visite a documentação oficial do Vue. Lá, você encontrará guias detalhados, tutoriais e documentação da API para ajudá-lo a aproveitar ao máximo o Vue.

​
Solução de Problemas

​
Domínio Personalizado

Para usar domínio personalizado (ex: meusite.com) ao invés da URL padrão https://meusite.squareweb.app/, você precisa do plano Standard ou superior. O subdomínio é definido pelo campo SUBDOMAIN no arquivo de configuração. Veja: Como configurar seu domínio personalizado.

​
Requisitos Mínimos de RAM

Mínimo: 512MB de RAM para websites/APIs simples. Para sites com frameworks (Next.JS, React, Vue, Angular, etc.), sugerimos sempre pelo menos 1GB de RAM. Para aplicações maiores, use mais RAM para evitar erro LACK_OF_RAM e garantir performance.

​
Não foi possível encontrar esse site.

Verifique se o subdomínio/domínio corresponde ao configurado no campo SUBDOMAIN ou nas configurações de domínio personalizado. Se você acabou de enviar o site, aguarde até 60 segundos para a Square liberar o primeiro acesso.

​
Site demorou demais para responder...

Verifique se configurou corretamente a porta 80 e host 0.0.0.0 na aplicação. Recomendamos usar as variáveis de ambiente forçadas da Square: PORT e HOST do arquivo .env.
Se você continuar enfrentando dificuldades técnicas, nossa equipe de suporte especializada está disponível para auxiliá-lo. Entre em contato conosco e teremos prazer em ajudá-lo a resolver qualquer questão.