Nuxt.js入门教程(Vue SSR架构)-介绍&安装

in with 0 comments
介绍

  如果你使用过Vue,那么就知道使用Vue构建一个单页应用是非常简单快捷的。而什么是单页应用呢,单页应用 即SPA(全称为:single page web application),简单来说就是整个网站只有一个页面,整个站点的所有展示都在浏览器中通过异步的方式进行渲染,而这种异步渲染有个弊端就是非常不利于SEO,因为整个站点的数据都是在浏览器中进行渲染,但是百度等搜索引擎的蜘蛛只会抓取你服务端返回来的html,所以搜索引擎将不能获取到你的站点内容。

    尽管Vue也提供了SSR渲染,但是Nuxt在Vue基础上做了更方便的集成,使用Nuxt能够更快捷方便的进行项目开发,Nuxt流程图如下

    nuxt-schema


安装

  方式一(推荐新手使用)

        Nuxt官方团队为我们提供了一个方便的脚手架 create-nuxt-app,使用create-nuxt-app我们能快速的创建一个nuxt项目。

        使用该脚手架需要使用npx,首先确保你正确的配置了npm,NPM版本5.2.0默认安装了npx,如果你的电脑上没有npx,仅需要执行下 npm install npx即可,现在我们来创建一个nuxt项目

        首先执行以下命令

    npx create-nuxt-app <项目名>

        接下来它会让你进行一些选择(使用上下键进行选择,然后回车提交即可):

               1. 在集成的服务器端框架之间进行选择    (此处默认即可):

                    None (Nuxt默认服务器)

                    Express

                    Koa

                    Hapi

                    Feathers

                    Micro

                    Adonis (WIP)

               2.选择您喜欢的UI框架 (如果你不知道怎么选,那么选择Element UI 吧):

                    None (无)

                    Bootstrap

                    Vuetify

                    Bulma

                    Tailwind

                     Element UI

                     Ant Design Vue

                     Buefy

             3.选择你想要的Nuxt模式 (Universal or SPA)

             4. 添加 axios module 以轻松地将HTTP请求发送到您的应用程序中。

             5.添加 EsLint 以在保存时代码规范和错误检查您的代码。

              6.添加 Prettier 以在保存时格式化/美化您的代码。

           当运行完时,它将安装所有依赖项,因此下一步是启动项目:

        $ npm run dev

        应用现在运行在 http://127.0.0.1:3000 上运行。

        浏览器访问 http://127.0.0.1:3000 既可看见默认demo

    方式二

            方式一使用了官方提供的脚手架来进行搭建,这里我们将手动添加Nuxt依赖来搭建一个demo

            1.首先进入你的工作空间,分别键入以下命令,将 <项目名> 替换成为你想创建的实际项目名。

     mkdir <项目名>
     cd <项目名> 

           2.创建package.json 文件

                package.json 文件用来设定如何运行 nuxt:

        {
                  "name": "my-app",
                  "scripts": {
                    "dev": "nuxt"
                  }
                }

                上面的配置使得我们可以通过运行 npm run dev 来运行 nuxt。

         安装 nuxt

        一旦 package.json 创建好, 可以通过以下npm命令将 nuxt 安装至项目中:

	npm install --save nuxt

 pages 目录

Nuxt.js 会依据 pages 目录中的所有 *.vue 文件生成应用的路由配置。

 创建 pages 目录:

		 $ mkdir pages

创建我们的第一个页面 pages/index.vue:

		<template>
<h1>Hello world!</h1>
</template>

然后启动项目:

$ npm run dev

现在我们的应用运行在 http://127.0.0.1:3000 上运行。

                浏览器访问 http://127.0.0.1:3000 既可看见



Responses /