NuxtJs学习笔记

最新推荐文章于 2023-09-21 09:45:00 发布

qq_41834038

最新推荐文章于 2023-09-21 09:45:00 发布

阅读量252

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_41834038/article/details/115526385

版权

入门

含义

 Nuxt.js 通用Vue.js ssr
    ssr:服务器端 Vue渲染html 返回浏览器
    SEO:VUE SPA(单页) 新闻 搜索引擎
    SPA: 快速
必须用到SSR的地方
    新闻、博客、。。需要搜索引擎提供流量的应用都需要用到ssr

优点

1.基于VUE
2.自动代码分层
3.强大的路由功能，支持异步数据
4.静态文件服务
5.es6/es7语法支持
6.打包和压缩js和css
7.html头部标签管理
8.本地开发支持热加载
9.集成eslint
10.支持各类样式预处理器：SASS,LESS,STYLUS等等

基础要求

1.html
2.css
3.vue

环境的搭建

node.js 安装

全局安装vue-cli

  npm install vue-cli -g
  查看版本
  vue -V

指定目录初始化项目

    在指定目录下
    vue init nuxt/starter
    初始化后，更新包文件
    npm install
    启动项目
    npm run dev

Nustjs目录结构和配置文件

文件夹的作用

.nuxt

一般不需要动，是npm run bulid自动生成的

assets

放置less sass javascript 图标什么的

components

  自己写的组件

layouts

  布局，

middleware

放置中间件的位置

page

  自己编写的页面

plugins

  放js的一些插件，例如弹出插件

static

静态文件，例如图片

store

  状态管理 vuex的知识

文件的作用

.eslintrc.js

eslintrc的配置文件,规范代码编写风格

.gitignore

 上传的规则，设置不上传的文件

nuxt.config.js

head:所有页面的头部
loading:加载的样式
build:扩展

package.json

默认包管理：
  dependencies：生成环境的配置
  devDependencies：产品环境的配置

常用配置项的配置

端口，ip的配置

package.json文件内添加：
"config":{
  "nuxt":{
    "host":"127.0.0.1",//设置的ip
    "port":"1818"//设置的端口
  }
},

配置全局css，全局js

 ~:根目录匹配符
 在nuxt.config下添加
 css:['~assets/css/normailze.css'],

图片url的打包

在nuxt.config文件build下
loaders:[
     {
     test:/\.(png|jpg|gif|svg)$/,
     loader:'url-loader',
     query:{
       limit:10000,
       name:'img/[name].[hash].[ext]'
     }
   }

   ],

路由与参数传递

标签传递路由

1.使用a标签直接跳转，href内是跳转的页面路由(不推荐使用)

<a href="/about">about</a>

2.使用官方推荐标签 nuxt-link,使用params进行传参.

  普通跳转
 <nuxt-link :to="{name:'about'}">about</nuxt-link>
 带参跳转
 <nuxt-link :to="{name:'news',params:{newsId:3306}}">news</nuxt-link>
 接收参数
 this.$route.params.newsId

动态路由和参数校验

动态路由

使用a标签

  动态路由文件名称需要_开头,例_id,id才是文件名称
  具体案例如下：
  news文件（调用动态路由处的文件）：
   <div>
      <h2>news index page</h2>
      <ul>
        <li><a href="/">回到首页 {{$route.params.newsId}}</a></li>
        <li><a href="/news/123">news1</a></li>
        <li><nuxt-link :to="{name:'news-id',params:{id:3306}}">nuxt-link</nuxt-link></li>
        <li><a href="/news/789">news3</a></li>
      </ul>
    </div>
   _id文件（动态路由文件）：路由中的参数id就是文件名
   <div>
       <h2>News--contents</h2>
       <p>NewsId:{{$route.params.id}}</p>
       <li><nuxt-link :to="{name:'index'}">home</nuxt-link></li>
     </div>
    注：export default中的name需要去除

使用nuxt-link

   动态路由文件名称需要_开头,例_id,id才是文件名称
                 具体案例如下：
                 news文件（调用动态路由处的文件）：
                  <div>
                     <h2>news index page</h2>
                     <ul>
                       <li><nuxt-link :to="{name:'news-id',params:{id:3306}}">nuxt-link</nuxt-link></li>
                     </ul>
                   </div>
                  _id文件（动态路由文件）：路由中的参数id就是文件名
                  <div>
                      <h2>News--contents</h2>
                      <p>NewsId:{{$route.params.id}}</p>
                      <li><nuxt-link :to="{name:'index'}">home</nuxt-link></li>
                    </div>
                   注：export default中的name需要去除

路由校验

 在动态路由 export default中定义校验规则，例如：设置只允许参数是数字
 validate({params}){
         return /^\d+$/.test(params.id);
       }
  <a href="/news/123">news1</a>//允许通过，允许渲染
  <a href="/news/456ss">news2</a>//不允许通过，不进行渲染

路由动画效果

css全局控制

  全局css样式添加
  //进入的动画
  .page-enter-active,.page-leave-active{
      transition: opacity 2s;
  }
  //离开的动画
  .page-enter,.page-leave-active{
    opacity: 0;
  }

css单独控制

  css添加动画
  //注意test
.test-enter-active,.test-leave-active{
  transition: all 2s;
  font-size: 12px;
}
.test-enter,.test-leave-active{
  opacity: 0;
  font-size: 40px;
}
单独设置的页面中的export default 中添加
transition:'test' //test 和css中的test类似

默认模板和默认布局

默认模板与默认布局的区别，默认模板的级别最高，且可以改变头部内容，默认布局可以不需要重启服务器就可以生效

默认模板（不常用）

  在根目录下，新建app.html nuxt会默认将其当作模板
  例：
 <!DOCTYPE html>
 <html lang="en">
   <head>
     {{HEAD}}
   </head>
 <body>
   <p>这是公共的模板，每次更改需要重启</p>
 {{APP}}
 </body>
 </html>
 //其中 {{HEAD}}为引入nuxt.config.js中的head内容
 //{{APP}}为真实页面占位

默认布局（常用）

  在layouts文件下的default内进行修改，例如
   <div>
    <div>这是默认布局内的全局内容，不需要重启就可以生效！！！</div>
      <nuxt/>
    </div>

NuxtJS错误页面和个性meta标签设置

错误页面

错误页面设置

  在layouts文件夹下创建error文件
  通过props:['error']用来接收错误代码
  通过error.statusCode来判断错误信息，代码案例如下
  
  <template>
    <div>
      <h2 v-if="error.statusCode == 404">404页面，你需要的页面没有被找到</h2>
      <h2 v-else>500页面，服务器错误</h2>
    </div>
  </template>
  
  <script>
      export default {
          name: "error",
          props:['error']
      }
  </script>

个性meta标签设置

在需要个性化标签设置的页面的export default中使用head(){}设置个性化
例如：
   head(){
          return{
            title:"ssssss",
            meta:[
              {hid:'description',name:'news1',content:'this is new page'}
            ]
          }
        }
    title：头部文字
    meta head标签内的内容，hid需要和nuxt.config.js中的head对象内的hid相同，不然会有问题

NuxtJS的asyncData方法

异步请求数据

 在页面渲染之前从服务器上获取数据对象，获取后再显示页面内容

配置方式

 //安装axios
 npm install axios --save

Nuxt静态资源文件和生产静态文件

Nuxt静态资源文件

1 img引入 使用 ~直接到达根目录
  <img src="~static/img/logo.png">
2 背景映入 也是使用~到达根目录
.div-class-img{
    width: 500px;
    height: 300px;
    background-image: url("~static/img/logo.png");
  }

生产静态文件

使用 npm run generate 生成静态文件

qq_41834038

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
NuxtJs学习笔记

入门含义 Nuxt.js 通用Vue.js ssr ssr:服务器端 Vue渲染html 返回浏览器 SEO:VUE SPA(单页) 新闻搜索引擎 SPA: 快速必须用到SSR的地方新闻、博客、。。需要搜索引擎提供流量的应用都需要用到ssr 优点1.基于VUE2.自动代码分层3.强大的路由功能，支持异步数据4.静态文件服务5.es6/es7语法支持6.打包和压缩js和css7.html头部标签管理8.本地开发支持热加载9.集成eslint10
复制链接

扫一扫