NUXT.JS入门

雨点打透心脏的1/2处 2022-01-20 08:09 163阅读 0赞

### 什么是服务端渲染 ###

1.  概念：后端先调用数据库，获得数据之后，将数据和页面元素进行拼装，组合成完成的html页面，再直接返回给浏览器，以便用户浏览
2.  举例：[ 服务端渲染案例页面 ][Link 1]

### 什么是客户端渲染 ###

1.  概念：数据由浏览器通过ajax动态取得，在通过js将数据填充到dom元素上最终展示到网页中，这样的过程叫做客户端渲染
2.  举例：[客户端渲染案例页面][Link 2]

### 服务端渲染 vs 客户端渲染 ###

1.  服务器端渲染需要消耗更多的服务器端资源（ cpu 内存等 ）
2.  客户端渲染可以将静态资源部署到cdn上，实现高并发
3.  服务器端渲染对SEO更友好

### vue服务器端渲染的实现 ###

1.  网址： [vue-SSR][]
2.  安装依赖：  
    `npm install vue vue-server-renderer --save`
3.  编写代码
    
        // 第 1 步：创建一个 Vue 实例
        const Vue = require('vue')
        const app = new Vue({ 
          template: `<div>Hello World</div>`
        })
        
        // 第 2 步：创建一个 renderer
        const renderer = require('vue-server-renderer').createRenderer()
        
        // 第 3 步：将 Vue 实例渲染为 HTML
        renderer.renderToString(app, (err, html) => { 
          if (err) throw err
          console.log(html)
          // => <div data-server-rendered="true">Hello World</div>
        })
        
        // 在 2.5.0+，如果没有传入回调函数，则会返回 Promise：
        renderer
            .renderToString(app)
            .then(html => { 
                console.log(html)
            })
           .catch(err => { 
                console.error(err)
            })

### vue服务端渲染的原理 ###

1.  通过express创建一个静态web服务器
2.  通过vue-server-renderer将vue实例转换成一段html结构
3.  通过express将转换的html结构发送到前台，在前台页面进行展示

### vue服务器端渲染的实现 ###

1.  如果使用单文件组件，需要配合webpack来使用
2.  如果想了解服务器端的webpack配置，可以看这个官方提供的工程 ： [服务器端webpack配置网址][webpack]
3.  下载官网提供的项目包
4.  vs code安装插件来查看项目 @recommended

### nuxt ###

网址： [nuxt网址][nuxt]

##### 1. Nuxt的使用 #####

npm v5.2.0引入的一条命令（npx）,引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验  
举例： 使用express-generator创建项目

老方法：

npm install express-generator -g
        
        express app

npx方式

npx express app

npx可以减少我们全局安装脚手架

##### 2. nuxt 安装 #####

我们使用脚手架 create-nuxt-app

避免全局安装，我们使用npx

npx create-nuxt-app app
        
        npm i 
        
        cd app
        
        yarn run dev

##### 3. nuxt-目录结构 #####

nuxt-目录结构：[nuxt-目录结构][nuxt-]

##### 4. nuxt-配置 - nuxt.config.js #####

nuxt-配置：[nuxt-配置][nuxt- 1]

举例： 配置 scss

// 1. 在assets 目录中新建css目录，在css目录中新建 main.scss 文件
            main.scss
                body: { 
                    background: red;
                }
                
        // 2. 命令行安装loader
        
            yarn add node-sass sass-loader scss-loader -D
        
        // 3. 在 nuxt.config.js 文件中引入scss文件
        
      
            css: [
                'element-ui/lib/theme-chalk/index.css',
                { 
                    src: '@/assets/css/main.scss',
                    lang: 'scss'
                }
            ],
    
        //

##### 5. nuxt - 路由 #####

1.  基础路由
2.  动态路由
3.  路由传参
4.  嵌套路由

##### 6. nuxt-视图 #####

##### 7. nuxt - 异步数据 #####

##### 8. 资源文件 #####

##### 9. 插件 #####

##### 10. 模块 #####

##### 11. vuex状态树 #####

##### 12. 命令和部署 #####

1.  命令

*  nuxt启动一个热加载的Web服务器（开发模式） localhost:3000。
 *  nuxt build利用webpack编译应用，压缩JS和CSS资源（发布用）。
 *  nuxt start以生产模式启动一个Web服务器 (nuxt build 会先被执行)。
 *  nuxt generate编译应用，并依据路由配置生成对应的HTML文件 (用于静态站点的部署)。

1.  部署

*  服务器部署  
    `$ nuxt build` || `$ nuxt start`
 *  静态站点部署  
    `$ npm run generator`

[Link 1]: http://www.cnblogs.com/cate/design
[Link 2]: https://h5.ele.me/msite
[vue-SSR]: https://ssr.vuejs.org/zh/
[webpack]: https://github.com/vuejs/vue-hackernews-2.0
[nuxt]: https://zh.nuxtjs.org/guide
[nuxt-]: https://zh.nuxtjs.org/guide/directory-structure
[nuxt- 1]: https://zh.nuxtjs.org/guide/configuration