初步学习next.js-1-新建项目

宛如一个天才般亮眼 發表於 2020-6-17 11:29:00

react和vue做的都是单页面应用
缺点：1.不适合SEO
　　　2.启动慢
解决方案：next.js
 
参考技术胖的资料进行学习
https://jspang.com/detailed?id=51#toc21
1.手动创建next.js
　　创建文件夹
<div class="cnblogs_code">
<pre>D:
mkdir NextDemo
npm init</pre>
</div>
　　安装所需要的安装包
<div class="cnblogs_code">
<pre>yarn add react react-dom next</pre>
</div>
　　增加快捷键命令
<div class="cnblogs_code">
<pre> "scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev" : "next" ,
"build" : " next build",
"start" : "next start"
},</pre>
</div>
　　创建pages文件夹和文件
<div class="cnblogs_code">
<pre>function Index(){
return (
<div>Hello Next.js</div>
 )
}
export default Index</pre>
</div>
　　使用<code>yarn dev</code>来打开预览
 
2.使用create-next-app 来创建项目
　全局安装create-next-app
<div class="cnblogs_code">
<pre>yarn global add create-next-app</pre>
</div>
　　创建项目
<div class="cnblogs_code">
<pre>npx create-next-app myCreateNext</pre>
</div>
 
3.项目结构介绍
<p style="box-sizing: border-box; margin-top: 0; margin-bottom: 1em; color: rgba(119, 119, 119, 1); font-family: -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; font-size: 16.8px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0; text-transform: none; white-space: normal; widows: 2; word-spacing: 0; -webkit-text-stroke-width: 0px; background-color: rgba(255, 255, 255, 1); text-decoration-style: initial; text-decoration-color: initial">看到结果后，用VSCode打开目录，可以看到已经有了很多自动建立好的文件和文件夹，下面就简单的介绍一下这些它们的用处：
 
<ul style="box-sizing: border-box; margin-top: 0; margin-bottom: 1em; color: rgba(119, 119, 119, 1); font-family: -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; font-size: 16.8px">
<li style="box-sizing: border-box">
components文件夹:这里是专门放置自己写的组件的，这里的组件不包括页面，指公用的或者有专门用途的组件。
</li>
<li style="box-sizing: border-box">
node_modules文件夹：Next项目的所有依赖包都在这里，一般我们不会修改和编辑这里的内容。
</li>
<li style="box-sizing: border-box">
pages文件夹：这里是放置页面的，这里边的内容会自动生成路由，并在服务器端渲染，渲染好后进行数据同步。
</li>
<li style="box-sizing: border-box">
static文件夹：这个是静态文件夹，比如项目需要的图片、图标和静态资源都可以放到这里。
</li>
<li style="box-sizing: border-box">
.gitignore文件：这个主要是控制git提交和上传文件的，简称就是忽略提交。
</li>
<li style="box-sizing: border-box">
package.json文件：定义了项目所需要的文件和项目的配置信息（名称、版本和许可证），最主要的是使用<code style="box-sizing: border-box; font-size: 0.87rem; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; display: inline-block; background-color: rgba(255, 245, 245, 1); border-radius: 3px; padding-left: 5px; padding-right: 5px; color: rgba(255, 80, 44, 1); margin: 0 3px; line-height: 1.1rem">npm install</code> 就可以下载项目所需要的所有包。
</li>
</ul>
　　　　
 
 
<h3 style="box-sizing: border-box; margin-top: 1rem; margin-bottom: 1rem; color: rgba(102, 102, 102, 1); border-left: 4px solid rgba(156, 203, 250, 1); padding-left: 1rem; font-size: 1.3rem">项目结构介绍</h3>
<p style="box-sizing: border-box; margin-top: 0; margin-bottom: 1em; color: rgba(119, 119, 119, 1); font-family: -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; font-size: 16.8px">看到结果后，用VSCode打开目录，可以看到已经有了很多自动建立好的文件和文件夹，下面就简单的介绍一下这些它们的用处：
<ul style="box-sizing: border-box; margin-top: 0; margin-bottom: 1em; color: rgba(119, 119, 119, 1); font-family: -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; font-size: 16.8px">
<li style="box-sizing: border-box">
components文件夹:这里是专门放置自己写的组件的，这里的组件不包括页面，指公用的或者有专门用途的组件。
</li>
<li style="box-sizing: border-box">
node_modules文件夹：Next项目的所有依赖包都在这里，一般我们不会修改和编辑这里的内容。
</li>
<li style="box-sizing: border-box">
pages文件夹：这里是放置页面的，这里边的内容会自动生成路由，并在服务器端渲染，渲染好后进行数据同步。
</li>
<li style="box-sizing: border-box">
static文件夹：这个是静态文件夹，比如项目需要的图片、图标和静态资源都可以放到这里。
</li>
<li style="box-sizing: border-box">
.gitignore文件：这个主要是控制git提交和上传文件的，简称就是忽略提交。
</li>
<li style="box-sizing: border-box">
package.json文件：定义了项目所需要的文件和项目的配置信息（名称、版本和许可证），最主要的是使用<code style="box-sizing: border-box; font-size: 0.87rem; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; display: inline-block; background-color: rgba(255, 245, 245, 1); border-radius: 3px; padding-left: 5px; padding-right: 5px; color: rgba(255, 80, 44, 1); margin: 0 3px; line-height: 1.1rem">npm install</code> 就可以下载项目所需要的所有包。
</li>
</ul> 
来源：https://www.cnblogs.com/lxz-blogs/p/13151475.html

頁: [1]

琼殿技术论坛's Archiver

初步学习next.js-1-新建项目