蔡升荣 發表於 2019-11-29 15:38:00

Next.js搭建前端环境

<h3><code>（1）create-next-app</code>就是<code>Next.js</code>的脚手架工具，</h3>
<p>　　<span style="font-size: 16px">有了它可以直接一句命令就建立好项目目录和基本结构，省去了我们很多的麻烦。</span></p>
<p><span style="font-size: 16px">&nbsp; &nbsp; &nbsp; &nbsp;如果你没有使用过<code>create-next-app</code>,可以先进行全局安装，安装如下：</span></p>
<div class="cnblogs_code">
<pre>npm install -g create-next-app</pre>
</div>
<h3>（2）安装好脚手架create-next-app后，创建我们的项目：</h3>
<div class="cnblogs_code">
<pre>create-next-app 文件名</pre>
</div>
<h3>（3）脚手架会给我们创建好项目目录和基本结构，npm run dev启动项目。看到如下图，启动成功。</h3>
<p><img src="https://img2018.cnblogs.com/i-beta/986339/201911/986339-20191129152258967-1403970363.png"></p>
<p>&nbsp;</p>
<h3>（4）使<code>Next</code>支持CSS文件</h3>
<div class="cnblogs_code">
<pre>npm install --save @zeit/next-css</pre>
</div>
<p>安装好以后，在文件根目录下，新建一个<code>next.config.js</code>文件</p>
<div class="cnblogs_code">
<pre>const withCss = require('@zeit/next-css'<span style="color: rgba(0, 0, 0, 1)">)

</span><span style="color: rgba(0, 0, 255, 1)">if</span>(<span style="color: rgba(0, 0, 255, 1)">typeof</span> require !== 'undefined'<span style="color: rgba(0, 0, 0, 1)">){
    require.extensions[</span>'.css']=file=&gt;<span style="color: rgba(0, 0, 0, 1)">{}
}

module.exports </span>= withCss({})</pre>
</div>
<h3>（5）按需加载<code>Ant Design</code></h3>
<div class="cnblogs_code">
<pre>npm install --save babel-plugin-import</pre>
</div>
<p>安装好之后，在文件根目录下，新建一个.babelrc的文件，配置代码如下：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
    </span>"presets":["next/babel"],<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">Next.js的总配置文件，相当于继承了它本身的所有配置</span>
    "plugins":[   <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">增加新的插件，这个插件就是让antd可以按需引入，包括CSS</span>
<span style="color: rgba(0, 0, 0, 1)">      [
            </span>"import"<span style="color: rgba(0, 0, 0, 1)">,
            {
                </span>"libraryName":"antd"<span style="color: rgba(0, 0, 0, 1)">
            }
      ]
    ]
}</span></pre>
</div>
<p>在文件的pages目录下，新建一个<code>_app.js</code>文件，然后把CSS进行全局引入.：</p>
<div class="cnblogs_code">
<pre>import App from 'next/app'<span style="color: rgba(0, 0, 0, 1)">

import </span>'antd/dist/antd.css'<span style="color: rgba(0, 0, 0, 1)">

export </span><span style="color: rgba(0, 0, 255, 1)">default</span> App</pre>
</div>
<p>这样就可以在其他文件里，按需引入Ant Design 的组件了，例如：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> index.js </span>
import React from 'react'<span style="color: rgba(0, 0, 0, 1)">
import Head from </span>'next/head'<span style="color: rgba(0, 0, 0, 1)">
import {Button} from </span>'antd'<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 按需引入了button按钮</span>
const Home = () =&gt;<span style="color: rgba(0, 0, 0, 1)"> (
</span>&lt;div&gt;
    &lt;Head&gt;
      &lt;title&gt;Home&lt;/title&gt;
      &lt;link rel="icon" href="/favicon.ico" /&gt;
    &lt;/Head&gt;
    &lt;Button&gt;按钮&lt;/Button&gt;
&lt;/div&gt;
<span style="color: rgba(0, 0, 0, 1)">)

export </span><span style="color: rgba(0, 0, 255, 1)">default</span> Home</pre>
</div>
<p>&nbsp;</p><br><br>
来源：https://www.cnblogs.com/linjiu0505/p/11958095.html
頁: [1]
查看完整版本: Next.js搭建前端环境