¡Acostúmbrate a escribir juntos! Este es el cuarto día de mi participación en el "Nuggets Daily New Plan·Desafío de actualización de abril",Haga clic para ver los detalles del evento。
Generado en base al sitio estático de Gridsome
- Repositorio GitHub:github.com/gridsome/gr...
- Página web oficial:gridsome.org/
introducir
¿Qué es Gridsome?
- Gridsome es un generador de sitios web estáticos, de código abierto y gratuito basado en la pila de tecnología Vue.js
- Gridsome es un marco Jamstack con tecnología Vue.js para crear sitios web y aplicaciones generados estáticamente que se generan rápidamente de forma predeterminada.
- Gridsome es un generador de sitios estáticos con tecnología Vue para crear sitios web listos para CDN para cualquier CMS sin cabeza, archivos locales o API
- Framework Jamstack basado en Vue.js
Escenarios de uso de Gridsome
- No apto para citas con un gran número de páginas enrutadas
- Si su sitio tiene cientos o miles de páginas enrutadas, la renderización previa será muy lenta, por supuesto, solo necesita hacerlo una vez por actualización, pero puede llevar algún tiempo.
- No apto para referencias con mucho contenido dinámico.
- Si la ruta de procesamiento protege el contenido específico del usuario que ve su contenido u otros recursos dinámicos, debe asegurarse de que haya marcadores de posición correspondientes.
- quiero un mejor SEO
- Quiere un mejor rendimiento de renderizado
Generadores de sitios web estáticos de uso común
- Jekyll (Rubí)
- Hexo (nodo)
- Hugo (Golang)
- Gatsby (Nodo/Reaccionar)
- Gridsome (Nodo / Vue)
- Además, Next.js y Nuxt.js también se pueden usar para sitios web estáticos normales, pero se consideran más marcos SSR (representación del lado del servidor).
Opciones
comienzo
condiciones de aprendizaje
Debe tener un conocimiento básico de HTML, CSS, Vue.js y cómo usar la terminal. Saber cómo funciona GraphQL es beneficioso, pero no obligatorio. Gridsome es una excelente manera de aprenderlo.
Gridsomerequerido Node.js（v8.3 +) y recomendado Yarn.
1. Instale la CLI de Gridsome
# 使用 yarn
yarn global add @gridsome/cli
# 使用 npm
npm install --global @gridsome/cli
# 查看是否安装成功
gridsome --version
复制代码2. Crea un proyecto Gridsome
# 创建项目
gridsome create my-gridsome-site
# 进入项目中
cd my-gridsome-site
# 启动开发模式，或 npm run develop
gridsome develop
复制代码Es posible que la creación de Gridsome directamente aquí no tenga éxito, ya que Gridsome se basa en un módulo especial de terceros.afilado,afiladoSu función es procesar imágenes, como comprimir el tamaño de la imagen y convertir formatos.
Y otra vez porque sigo siendo dependientelibvipsY este paquete es muy grande, porque nuestro problema de red es fácil de fallar en la instalación, por lo que necesitamos hacer una configuración especial
También hay algunos complementos de c ++, por lo que también debemos instalar algunas dependencias para compilar
configurar
npm config set sharp_binary_host "https://npmmirror.com/mirrors/sharp"
npm config set sharp_libvips_binary_host "https://npmmirror.com/mirrors/sharp-libvips"
复制代码- Configurar el entorno de compilación de node-gyp
- github.com/nodejs/node…Configurar de acuerdo con la documentación
Estructura de archivos instalada
4. Pruébelo usted mismo
- Crear un componente en el
src/pagesdirectorio ..vue
5. Construir
gridsome build
复制代码Los resultados de la compilación se envían al distdirectorio .
Gridsome construirá cada archivo de ruta como una página HTML separada.
6. Despliegue
Los resultados de la compilación se pueden implementar disten cualquier servidor web.
Por ejemplo, aquí usamos la herramienta de línea de comandos de Node.jsatenderpara probar los resultados de la compilación.
npm install -g serve
serve dist
复制代码O se puede implementar en otras plataformas de alojamiento de terceros:gridsome.org/docs/deploy…
¡O tu propio servidor, puedes!