Next+React+Antd-mobile的简单搭建使用

最新推荐文章于 2024-09-13 07:09:18 发布

繁花已落

最新推荐文章于 2024-09-13 07:09:18 发布

阅读量1.6k

点赞数

分类专栏：前端学习文章标签： js react javascript

本文链接：https://blog.csdn.net/a1369508468/article/details/105267698

版权

前端学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前言

最近公司需要使用 Next 结合 React 、 Antd-Mobile 开发服务端渲染的H5，于是就看了些文档搭建一个简单地环境记录下来。

Next文档

一、搭建基础环境

1. 使用 `yarn` 或者 `npm` 初始化一个文件夹

yarn init

npm init

2. 安装要使用的包

package.json 整体配置

{
  "name": "next-react-demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "next -p 3001",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.7.0",
    "@babel/plugin-proposal-decorators": "^7.7.0",
    "@zeit/next-less": "^1.0.1",
    "antd-mobile": "^2.3.1",
    "babel-plugin-import": "^1.12.2",
    "babel-plugin-module-resolver": "^3.2.0",
    "less": "^3.10.3",
    "next": "^9.1.3",
    "react": "^16.11.0",
    "react-dom": "^16.11.0"
  }
}

运行 yarn 或 npm install 进行安装

3. 新建 `pages/index.js` 文件，写入以下代码运行测试

export default () => <div>Welcome to next.js!</div>

运行 npm run dev 命令并打开 http://localhost:3000。如果你想使用其他端口，可运行 npm run dev – -p <设置端口号>。
在浏览器可看到如下结果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6PK1S5M9-1585804373496)(http://60.205.204.237:8080/images/2019/11/12/TIM20191112190005.png)]

二、加入antd-mobile和less

1. 增加 `next` 配置文件

根目录下新建 next.config.js 并加入以下配置

const withLess = require('@zeit/next-less')
module.exports = withLess({
    cssModules: true,
    cssLoaderOptions: {
        importaLoaders: 1,
        localIdentName: "[local]___[hash:base64:5]",
    },
    lessLoaderOptions: {
        javascriptEnabled: true,
    },
    webpack(config, options) {
        return config
    }
})

2. 增加 `babel` 文件配置

根目录下新建 .babelrc 文件并加入以下配置

{
    "presets": [
        "next/babel"
    ],
    "plugins": [
        // ES6 语法转换
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose": true }],
        // Alias
        ["module-resolver",{"root": ["./"],"alias": {"styles": "./styles", "@": "./pages"}}],
        // 引入Antd-Mobile
        ["import",{"libraryName": "ant-mobile","libraryDirectory":"lib","style": true}]
    ]
}

3. 在pages下新建_document.js文件用来自定义Document，并且在头部加入我们Antd-mobile的css

之前一直搭好之后一直没有样式，找了很久才发觉还没有因为 Antd-Mobile 的样式文件，于是就使用了自定义 Document ，在其中引入 Css 。也可以使用其他方案去引用相应的 less OR sass 文件。

import Document, { Head, Main, NextScript } from 'next/document'

export default class extends Document {
  render() {
    return (
      <html >
        <Head>
          <meta name="format-detection" content="telephone=no, email=no" />
          <meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi" />
          <link href="https://cdn.bootcss.com/antd-mobile/2.1.1/antd-mobile.css" rel="stylesheet" />
        </Head>
        <body >
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

新建 styles/style.less 文件，写入以下代码。这里测试下我们配置的 less 有没有生效

@h1-color: aqua;
h1{
    color: @h1-color;
}

修改 index 文件如下

import React, { Fragment } from 'react';
import { Button , WingBlank , WhiteSpace} from 'antd-mobile';
import Head from 'next/head';
import "../styles/style.less";
const Home = () => (
  <Fragment>
    <Fragment>
      <h1>我是Next的首页</h1>
      <WingBlank>
        <Button>默认按钮</Button><WhiteSpace />
      </WingBlank>
    </Fragment>
  </Fragment>
);
export default Home;