• Next.js搭建前端环境


    (1)create-next-app就是Next.js的脚手架工具,

      有了它可以直接一句命令就建立好项目目录和基本结构,省去了我们很多的麻烦。

           如果你没有使用过create-next-app,可以先进行全局安装,安装如下:

    npm install -g create-next-app

    (2)安装好脚手架create-next-app后,创建我们的项目:

    create-next-app 文件名

    (3)脚手架会给我们创建好项目目录和基本结构,npm run dev启动项目。看到如下图,启动成功。

    (4)使Next支持CSS文件

    npm install --save @zeit/next-css

    安装好以后,在文件根目录下,新建一个next.config.js文件

    const withCss = require('@zeit/next-css')
    
    if(typeof require !== 'undefined'){
        require.extensions['.css']=file=>{}
    }
    
    module.exports = withCss({})

    (5)按需加载Ant Design

    npm install --save babel-plugin-import

    安装好之后,在文件根目录下,新建一个.babelrc的文件,配置代码如下:

    {
        "presets":["next/babel"],  //Next.js的总配置文件,相当于继承了它本身的所有配置
        "plugins":[     //增加新的插件,这个插件就是让antd可以按需引入,包括CSS
            [
                "import",
                {
                    "libraryName":"antd"
                }
            ]
        ]
    }

    在文件的pages目录下,新建一个_app.js文件,然后把CSS进行全局引入.:

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

    这样就可以在其他文件里,按需引入Ant Design 的组件了,例如:

    // index.js 
    import React from 'react'
    import Head from 'next/head'
    import {Button} from 'antd'  // 按需引入了button按钮
    const Home = () => (
      <div>
        <Head>
          <title>Home</title>
          <link rel="icon" href="/favicon.ico" />
        </Head>
        <Button>按钮</Button>
      </div>
    )
    
    export default Home
  • 相关阅读:
    OEP
    壳的执行过程
    JavaScript RSA算法简单实现(转)
    创建根证书及其子证书
    从零开始学习Sencha Touch MVC应用之十四
    javascript base64
    discuz 文档地址
    虚拟机共享数据
    转Javascript到PHP RSA加密通讯的简单实现
    PHP RSA研究
  • 原文地址:https://www.cnblogs.com/linjiu0505/p/11958095.html
Copyright © 2020-2023  润新知