• Nuxt.js入门学习


    Nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染)。再直白点说,就是Vue.js原来是开发SPA(单页应用)的,但是随着技术的普及,很多人想用Vue开发多页应用,并在服务端完成渲染。这时候就出现了Nuxt.js这个框架,她简化了SSR的开发难度。还可以直接用命令把我们制作的vue项目生成为静态html。

    什么是SSR?

    SSR,即服务器渲染,就是在服务器端将对Vue页面进行渲染生成html文件,将html页面传递给浏览器。

    SSR两个优点:

    • SEO 不同于SPA的HTML只有一个无实际内容的HTML和一个app.js,SSR生成的HTML是有内容的,这让搜索引擎能够索引到页面内容。
    • 更快内容到达时间 传统的SPA应用是将bundle.js从服务器获取,然后在客户端解析并挂载到dom。而SSR直接将HTML字符串传递给浏览器。大大加快了首屏加载时间。

    Nuxt.js的官方网站是这样介绍的:

    Nuxt.js 是一个基于 Vue.js 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染。

    Nuxt.js是特点(优点):

    • 基于 Vue.js
    • 自动代码分层
    • 服务端渲染
    • 强大的路由功能,支持异步数据
    • 静态文件服务
    • ES6/ES7 语法支持
    • 打包和压缩 JS 和 CSS
    • HTML头部标签管理
    • 本地开发支持热加载
    • 集成ESLint
    • 支持各种样式预处理器: SASS、LESS、 Stylus等等

    一、Nuxt环境搭建

    1.用npm来安装vue-cli这个框架,如果你已经安装过了,可以省略这步。

    npm install vue-cli -g

    安装完成后可以使用vue -V 来测试是否安装成功。(注意:这里要使用大写的V,小写无效)。

    2.使用vue安装 nuxt

    安装好vue-cli后,就可以使用init命令来初始化Nuxt.js项目。

    vue init nuxt/starter

    这时候他会在github上下载模版,然后会询问你项目的名称叫什么,作者什么的,这些完全可以根据自己的爱好填写。

    3.使用npm install安装依赖包

    npm install

    这个过程是要等一会的,如果你这个过程安装失败,也不要慌张,你可以直接诶删除项目中的node_modules文件夹后,重新npm install进行安装。

    4.使用npm run dev 启动服务

    npm run dev

    5.在浏览器输入 localhost:3000,可以看到结果。

    Hello World

     

  • 相关阅读:
    yii2.0 composer安装
    php composer包管理器
    Eclipse-selenium环境搭建
    JMeter-分布式
    Jmeter-接口压力测试
    Jmeter-操作Mysql
    Jmeter参数化-关联参数
    Jmeter参数化-从文件中读取参数(CSV Data Set Config)
    Jmeter参数化-用户参数
    Jmeter-文件上传
  • 原文地址:https://www.cnblogs.com/chen-cheng/p/11943685.html
Copyright © 2020-2023  润新知