next | 宁静致远的博客站点

宁静致远 8/9/2020 next

# next 初始化


npx create-next-app@latest my-blog --typescript

npm run dev

yarn dev

1
2
3
4
5
6

next.config.js： next.js 相关配置
tsconfig.json： typescript 相关配置
pages：存放页面文件，文件名即路由
public：存放静态资源文件
styles：存放公共样式

# 配置工程环境

ESLint: 代码校验
StyleLint: css 样式格式化
Prettier: 代码格式化风格统一

# 安装 ESLint （vscode 插件）

yarn add eslint -D

.eslintrc.json

// 新增 "eslint:recommended"
{
  "extends": ["next/core-web-vitals", "eslint:recommended"]
}

1
2
3
4

# 安装 StyleLint （vscode 插件）

yarn add stylelint stylelint-config-standard-scss -D

新建 .stylelintrc.json 文件

{
  "extends": "stylelint-config-standard-scss"
}

1
2
3

vscode settings

"editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
}

1
2
3

# 安装 Prettier （vscode 插件）

新建 .prettierrc 文件


{
    // avoid 能省略括号的时候就省略 例如x => x
    // always 总是有括号
    "arrowParens": "always", // 箭头函数，只有一个参数的时候，也需要括号
    "bracketSpacing": true,  // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
    "endOfLine": "lf" // 结尾是 \n \r \n\r auto  // 换行符使用 lf
    "htmlWhitespaceSensitivity": "css",
    "insertPragma": false,
    "jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
    "jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
    "printWidth": 80, // 超过最大值换行
    "proseWrap": "preserve",  // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
    "quoteProps": "as-needed", // 对象的 key 仅在必要时用引号
    "requirePragma": false,
    "semi": true,  // 行尾需要有分号
    "singleQuote": true, // 使用单引号
    "tabWidth": 2, // 使用 2 个空格缩进
    "trailingComma": "es5",
    "useTabs": false, // 不使用缩进符，而使用空格
    "vueIndentScriptAndStyle": false,
    "parser": "babel"


}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 安装 mockjs

yarn add mockjs -D
yarn add @types/mockjs -D

import { mock } from 'mockjs';


mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
    // 属性 id 是一个自增数，起始值为 1，每次增 1
    'id|+1': 1
    }]
})

1
2
3
4
5
6
7
8
9
10
11
12
13

next-layout