一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 留言板
  • 工具
  • 友链
  • biaoblog

    专注web开发技术分享

    Next.js学习

    技术 209 2019-12-09 09:55

    1.自动创建项目:

    使用脚手架前,需要先进行全局安装。

    npm install -g create-next-app
    

    npx 是Node自带的npm模块 低版本的node没有所以需要安装

    $npm install -g npx
    

    到指定盘符下创建项目:

    $npx create-next-app next-create
    

    启动项目:

    $npm run dev
    

    2.在next中创建组件:(在page目录下)

    function Biaoge(){
    return (<button>彪哥</button>)
    }
    export default Biaoge;
    

    3.创建路由

    在page目录下创建js,page相当于是一个根目录。

    举例:在page下创建一个biao.js的文件 访问路径为:localhost:8080/biao

    4.路由跳转传参和接收参数以及jsx方式使用css样式

    传递参数

     // 引入Router 使用Router.push

     import Router from 'next/router'
    

       // 引入页面跳转的组件 link

       // 两种跳转的方式 第一种Link 第二种Router.push('/')

        import Link from 'next/link'
        function goAPage(){
          Router.push('/pageA')
        }
        function goClor(){
          var color = document.getElementById('color').value
          // 通过对象的形式传递参数传递参数
          // next暂时只支持query形式传参
          // 也可以Router.push(/color?name=color)
          // 也可以通过标签传参 href="/color?name=color" 
          // href={{pathname:'/color',query:{name:color} } }
          Router.push({
            pathname:'/color',
            query:{
              name:color
            }
          })
        }
        return(
          <div>
            <div>我是首页</div>
            {/* link里面标签需要用一个a标签嵌套 */}
            <button><Link href="/pageA"><a  target="_blank">我是a页面</a></Link></button>
            <button><Link  href="/pageB"><a target="_blank">我是b页面</a></Link></button>
            <button onClick={goAPage}>我来试试编程式路由跳转</button>
            <p>请选择一个颜色吧 
              <select onChange={goClor} id="color">
                <option vlaue="yellow">黄色</option>
                <option vlaue="green">绿色</option>
                <option vlaue="white">白色</option>
              </select>
            </p>
    
            <div>
            </div>
            <Time></Time>
            <TestUi></TestUi>
          </div>
        )
        }
    

    接收参数:

    //withRouter是Next.js框架的高级组件,用来处理路由用的
    import { withRouter } from 'next/router'
    import Link from 'next/link'
    import axios from 'axios'
    import React,{useState} from 'react'
    //Router是携带query参数的对象
    // 1.1 data是 getInitialProps 返回的res.data
     function Color({router,data}){
         const [color,setColor] = useState('green')
         const ChangeColor = ()=>{
            setColor(color==='green'?'red':'green')
         }
        return(
            <div>
                你选择了 {router.query.name}
                <br/>
                <Link href="/"><a>返回首页</a></Link>
                <ul>
                    {data.message.map((item,index)=>{
                        return(
                        <div key={index}>
                            <span>{item.date}</span>   
                            <li>{item.say}</li>
                        </div>
                        )
                    })}
                </ul>
                <p><button onClick={ChangeColor}>改变颜色</button></p>
                {/* 在jsx中使用样式 并动态改变样式*/}
                <style jsx>
                    {
                        `
                            div{color:${color}}
                        `
                    }
                </style>
            </div>
        )
    }
    Color.getInitialProps = async ()=>{
        const promise =new Promise(resolve=>{
            axios.get('http://118.24.223.144:3000/blogData/mood')
                 .then(res=>{
                    console.log(res)
                    resolve(res)
                })
        })
        // 1 这里 返回的是一个接口 返回值对象
        return await promise
    }
    //此处填坑 需要暴露withRouter 并把组件放进去
    export default withRouter(Color)
    

    5.路由的6个钩子函数:

        // routerChangeStart路由发生变化时
        Router.events.on("routeChangeStart",(...args)=>{
          console.log(...args)
        })
        // routerChangeComplete路由结束变化时
        Router.events.on("routeChangeComplete",(...args)=>{
            console.log(...args)
        })
        // beforeHistoryChange浏览器history触发前
        Router.events.on('beforeHistoryChange',(...args)=>{
          console.log('3,beforeHistoryChange->在改变浏览器 history之前触发,参数为:',...args)
        })
        // routeChangeError路由跳转发生错误时
        Router.events.on('routeChangeError',(...args)=>{
          console.log('4,routeChangeError->跳转发生错误,参数为:',...args)
        })
        // 还有两种事件都是针对hash的
        Router.events.on('hashChangeStart',(...args)=>{
          console.log('5,hashChangeStart->hash跳转开始时执行,参数为:',...args)
        })
        Router.events.on('hashChangeComplete',(...args)=>{
          console.log('6,hashChangeComplete->hash跳转完成时,参数为:',...args)
        })
    

    6、模块懒加载

    import React, {useState} from 'react'
    

    //时间格式化组件 需要下载

    import moment from 'moment'
    

    //1.为了优化项目,可以使用Lazy Loading模块懒加载(类似于按需加载 当我们作的应用存在首页打开过慢和某个页面加载过慢时,就可以采用Lazy Loading的形式,用懒加载解决这些问题)。

    //2.同理,懒加载可以使用在自定义组件上

    //2.1先引入dynamic

    import dynamic from 'next/dynamic'
    const Self = dynamic(import('../pages/Self'))
    
    // 不使用懒加载
    function Time(){
        const [nowTime,setTime] = useState(Date.now())
        //声明一个修改时间的方法
        const timeFilter = () =>{
            // moment组件固定写法 没啥纠结的
            setTime(moment( Date.now() ).format() )
        }
        return(
            <>
                <div>
                    {nowTime}
                </div>
                <p><button onClick={timeFilter}>点击格式化时间</button></p>
                {/* 2.2 只有在jsx里用到<Self/>时,才会被加载进来,如果不使用就不会被加载。 */}
                <Self></Self>
            </>
        )
    }
    // 使用懒加载
    function Time2(){
        const [nowTime,setTime] = useState(Date.now())
        const timeFilter = async()=>{ //把方法变成异步模式
            const moment = await import('moment') //等待moment加载完成
            setTime(moment.default( Date.now() ).format() ) //注意使用defalut
        }
        return(
            <>
                <div>
                    {nowTime}
                </div>
                <p><button onClick={timeFilter}>点击格式化时间</button></p>
            </>
        )
    }
    
    export default Time
    

    7.自定义Head组件优化SEO

    //可以使用Head来设置title,meta等来优化seo(next主要就是用来做seo的)

    //1.引入Head

    //也可以把head封装成一个公共的组件 通过传递参数来在各个页面进行引入和使用

    import Head from 'next/head'
    function Biaoge(){
        return(
            <div>
                {/* 1.1引入使用设置title和meta */}
                <Head>
                    <title>彪哥是最帅的!</title>
                    <meta charSet='utf-8' />
                </Head>
               <div>next.js彪哥来了~</div>
            </div>
        )
    }
    export default Biaoge
    

    8.引用ant-designUi到next.js中

    //默认情况下next是不支持import 引入css的,但是要使用antDesignUi就需要使用important

    //1.安装 @zeit/next-css 并配置 让next支持important引入css

    //2.建立一个next.config.js文件引入并配置(next的总体配置文件)

    const withCss = require('@zeit/next-css')
    if(typeof require !== 'undefined'){
        require.extensions['.css']=file=>{}
    }
    module.exports = withCss({})
    //3.下载依赖包 npm i antd --save
    //4.下载babel-plugin-import 插件(按需引入必要的)npm i babel-plugin-import --save
    //5.安装完成后,在项目根目录建立.babelrc文件,然后写入如下配置文件。
    {
        "presets":["next/babel"],  //Next.js的总配置文件,相当于继承了它本身的所有配置
        "plugins":[     //增加新的插件,这个插件就是让antd可以按需引入,包括CSS
            [
                "import",
                {
                    "libraryName":"antd",
                    "style":"css"
                }
            ]
        ]
    }
    //6.进行按需引入
    import {Button} from 'antd'
    function TestUi(){
        return(
            <div>
                <Button>antdUiButton</Button>
            </div>
        )
    }
    
    export default TestUi
    

    9.next打包并修复ant-design引入导致打包失败的原因。

    打包命令:

    $npm run build
    

    // 当你使用了Ant Desgin后,在打包的时候会遇到一些坑。

    // 在page目录下,新建一个_app.js文件,然后写入下面的代码。

    import App from 'next/app'
    import 'antd/dist/antd.css'
    export default App
    

    // 这个文件相当于是一个全局的配置文件

    // 然后把.babelrc找那个的 "style":"css" 去掉即可打包成功

    查看打包后的效果:

    $npm run start
    

    参考文档:https://www.nextjs.cn/learn/basics/create-nextjs-app/editing-the-page

    部署参考:https://segmentfault.com/a/1190000012774650


    文章评论

    评论列表(0