Vue.js通用应用框架-Nuxt.js的上手教程

Per le applicazioni single-page basate su React e Vue, SEO è un problema ben noto. La rendering sul server (SSR - Server Side Render) sembra essere la soluzione migliore al momento. Per le applicazioni React ci sono Next.js, mentre per Vue la soluzione è Nuxt.js.

1.Introduzione

Sito ufficiale:https://nuxtjs.org/

GitHub:https://github.com/nuxt/nuxt.js

Cos'è Nuxt.js?

Nuxt.js è un framework di applicazione generale basato su Vue.js.

Tramite l'astrazione dell'architettura client/server, Nuxt.js si concentra principalmente sulla rendering dell'UI dell'applicazione.

Il nostro obiettivo è creare un framework di applicazione flessibile, su cui puoi inizializzare la struttura di base del codice di un nuovo progetto o utilizzarlo in progetti Node.js esistenti.

Nuxt.js preconfigura tutte le impostazioni necessarie per lo sviluppo di applicazioni server-side rendered utilizzando Vue.js.

Oltre a ciò, forniamo anche un comando chiamato: nuxt generate, che fornisce la funzione di generazione di siti statici per applicazioni basate su Vue.js.

Crediamo che questa funzione fornita dal comando sia un passo avanti significativo verso lo sviluppo di applicazioni web integrate con vari microservices (microservices).

Come framework, Nuxt.js offre molte funzionalità utili per il modello di architettura applicativa tipico client/server, come il caricamento dati asincrono, il supporto per i middleware e il supporto per le layout.

2. Costruzione del primo progetto Nuxt.js

Si consiglia di utilizzare i template forniti da Nuxt. Supponiamo che tu abbia già installato vue-cli, se non lo hai fatto, esegui npm install vue-cli -g per installare vue-cli.

$ vue init nuxt-community/starter-template <nome-progetto>

Entra nella cartella del progetto per installare i pacchetti di dipendenza.

cd <nome-progetto>
npm install

Avvia il progetto.

npm run dev

Apri il browser, visita http://localhost:3000. Vedrai la pagina generata da Next.

3. Aggiunta della pagina

La struttura del progetto appena creato è illustrata di seguito:

Struttura del progetto

Nuxt concorda che tutte le pagine vadano nella cartella pages, Nuxt genererà automaticamente le rotte in base alla struttura della directory.

Ora crea un file Vue chiamato test.vue nella cartella pages, visita http://localhost:3000/test per vedere la pagina appena aggiunta.

4. Introduzione di plugin di terze parti

Di solito, dobbiamo introdurre plugin di terze parti, come componenti front-end, log e altri.
Il primo passo è ovviamente installare il plugin, in questo esempio utilizziamo element-UI.

npm install element-ui

Anche se hai scaricato il pacchetto element-ui, non puoi importarlo e usarlo direttamente come in un progetto comune. I progetti del nucleo di Nuxt si trovano tutti nella cartella .nuxt, e la modifica dei file sotto questa cartella non avrà alcun effetto. Questo perché ogni volta che si compila, i file vengono ricreati, quindi la modifica diretta dei file del progetto non è valida.

Struttura del progetto del nucleo

Nonostante non sia possibile modificarlo direttamente, Nuxt fornisce un modo speciale per introdurre plugin di terze parti.

Primo passo, crea un file js nella cartella pulgin chiamato element-ui.js. Il contenuto del file è il seguente.

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)

第二步，修改nuxt.config.js。添加plugins属性。

/**
   *包含第三方插件
   */
  plugins: ['~plugins/element-ui'] // element-ui.js文件地址

重新编译之后，Nuxt会编译该第三方插件并使用。此时在任何一个Vue文件中都能使用该第三方插件。

5.静态资源文件

你可以把静态资源文件放到static文件夹下，然后就可以使用http://localhost:3000/<文件名>来访问静态资源文件。

Nuxt提供的功能还有很多，比如动态路由，ESLint代码检测。今天先介绍到这里，其他深入的用饭请参考官方网站。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#oldtoolbag.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。