## 引言

人到中年，总是有各种奇奇怪怪的想法，比如：“我有一个想法，想创办一家公司，该怎么办？”

创办公司的前提条件：
1. 有一个好项目（能解决市场痛点、创造较高社会效应和经济价值，良好的市场前景）
2. 有一个好队伍（目标清晰，团结互助，分工明确，执行力强）
3. 有一个好基础（项目运营市场反馈良好，继续推进前景光明）

如果以上都已具备，可以开始你的创业之旅：



## 开始

### 准备
创办公司的需要有以下条件：
- 有自己的名称和生产经营场所；
- 有符合国家规定的启动资金；
- 有自己的组织机构；
- 有明确合法的经营范围；
- 法律法规规定的其他条件。

一切准备就绪，那就开始注册属于你的公司吧！

 

### 第一步：核准企业名称

1. 准备好企业设立必要信息和资料。包括公司名称、注册资金（注册资金认缴，工商不做实缴要求）、注册地址、经营范围、股东身份证正反面照片股份比例及手机号码、监事身份证正反面照片及手机号码等公司核名信息；

2. 线上核准企业名称，打印企业名称预核准通知书。
 
### 第二步  开具场地及房产证明。

携项目计划书、股东签名的公司章程、股东身份证明材料到校团委（创业学院）（新体育中心103）开具场地证明和房产证明。

### 第三步 办理营业执照。

公司注册所需材料包括：
1. 公司名称核准通知书（已在第一步完成）；
2. 公司注册地址材料（已在第二步完成）
3. 公司登记（备案）申请书；
4. 指定代表/委托代理人资料；
5. 法定代表人、董事、监事、经理、联络员信息；
6. 股东（发起人），外国投资者出资情况；
7. 所有股东身份证复印件；
8. 关于执行董事、经理、监事的任职决定；
9. 承诺书；
10. 公司章程（区分1人有限公司章程和多人有限公司章程）


以湖北省为例，办理营业执照可通全网下、全网上，半网上三种流程方式进行：

1. 全网下流程。准备好核名资料后携公司注册所需资料到注册地归属的区政务中心大厅现场办理企业核名和企业注册登记手续。洪山区政务服务中心地址：洪山区文秀街9号；东湖新技术开发区政务服务中心地址：高新大道777号；
2. 全网上流程。也可登录“湖北省工商局政务服务中心”网站进入“设立”模块走全网上设立流程；
3. 半网上流程。网上核名通过后，打印出核名通知书，携公司注册所需资料到注册地归属的区政务中心办理企业注册登记手续。洪山区政务服务中心地址：洪山区文秀街9号；东湖新技术开发区政务服务中心地址：高新大道777号。

 

### 第四步 领取营业执照。

若手续齐全，三个工作日后一般可以领取营业执照。

### 第五步 刻制企业印章。

拿到企业注册新营业执照之后就要刻制企业印章，一个企业全套印章共五枚，分别是：行政公章、合同专用章、法人私章、财务专用章和发票专用章。公安机关授刻章店都可刻章，可自行选择。

### 第六步　办理开户手续。

到银行开设企业对公基本账户，与企业、银行和税务所签订三方协议。

### 第七步　办理税务登记。法定代表人和会计人员

携带身份证原件和复印件，公章发票专用章，营业执照复印件到注册地所在区税务总局大厅

1. 法人和会计做实名登记并做开税税务登记；
2. 到税局分配的税务专管员处报道，并办理相关新公司开税事宜。

聘请财务人员专兼职均可，根据业务量来选择。

## 后续-报税

到这里，公司注册手续已经完成啦。公司注册后，我们就是企业法人了，一定要按照有关法律法规的要求合法合规经营，按期报税和年审，否则将面临行政处罚，影响个人信用。

另外两个重要报税节点：
1. 一定要记得每年 `5月31日` 之前在税务系统做年度企业所得税年度纳税报告，否则处罚`2000`元起步；
2. 一定要记得每年`6月30日`之前在工商网上提交企业年度信息告示报告，否则企业将被列入经营异常名列。

想解除经营异常手续麻烦，同时影响企业和股东不良信用记录，不良信用记录影响出境，贷款，养老保险等。

可以网上网下两种报税方式（网上报税地址：输入湖北国家税务总局），不用去税务所，网下申报只要携带公章到注册地税务大厅手工递交申报表即可。

注意：“零税”每月也得报，否则漏报一项税种，超过30天处罚1000元起步，不超过30天以内处罚200元起步。

## 赞助请求V3

**建站因为热爱，生活需要Money，请屏幕前的大佬动动您发财的小手，点击一次以示鼓励，祝您生活愉快！**


<div class="article-ads"></div>

> PS：就目前的访问量，即便每个访客都点一次广告，收入也不足以支付运营成本。`如果看不到广告，可能是网络原因或被拦截了，那就算了吧。再次祝您生活愉快~~`

想创办一家公司该怎么做？

## 简介

`display` 属性是 `CSS1` 规范中引入的，该规范最早发布于 1996 年。这意味着自从 CSS 的诞生之初，`display` 属性就一直存在。在 `CSS1` 中，`display` 属性的作用是控制元素在文档中的显示方式，这对于页面布局和样式设计非常重要。

随着 `CSS` 的不断发展，`display` 属性的功能也得到了扩展，新的取值不断被添加进来，例如 `Flexbox` 和 `Grid` 布局模型的引入，使得开发者可以更加灵活地控制页面布局。到目前为止，`display` 属性仍然是 `CSS` 中的一个核心属性，被广泛应用于网页开发中。



## `dispaly`的值

以下是 `display` 属性的一些常见取值：

- `none`: 元素不会被显示，并且在文档布局中不占据空间。
- `block`: 元素呈现为块级元素，会在页面中新起一行，并且可以设置宽度、高度以及其他盒模型属性。
- `inline`: 元素呈现为内联元素，不会在页面中新起一行，只会占据其内容所需的空间。
- `inline-block`: 元素呈现为内联块级元素，可以设置宽度、高度等盒模型属性，同时又像内联元素一样在同一行显示。
- `flex`: 定义一个弹性容器，其子元素将以弹性布局方式进行排列。
- `grid`: 定义一个网格容器，可以使用网格布局来排列其子元素。
- `table`: 元素呈现为表格元素，可以将其作为表格布局的一部分来使用。
- `table-cell`: 元素作为表格单元格显示。
- `table-row`: 元素作为表格行显示。
- `inline-table`: 元素作为内联表格显示。
- `list-item`: 元素作为列表项显示，常用于 `<li>` 元素。
- `inherit`: 继承父元素的 display 属性值。

### 最常用的值

- `block`: 将元素呈现为块级元素，会在页面中新起一行，并且可以设置宽度、高度以及其他盒模型属性。常见的默认块级元素包括 `<div>`、`<p>`、`<h1>` 等。
- `inline`: 将元素呈现为内联元素，不会在页面中新起一行，只会占据其内容所需的空间。常见的默认内联元素包括 `<span>`、`<a>`、`<strong>` 等。
- `inline-block`: 将元素呈现为内联块级元素，可以设置宽度、高度等盒模型属性，同时又像内联元素一样在同一行显示。常用于创建水平排列的块级元素。
- `flex`: 定义一个弹性容器，其子元素将以弹性布局方式进行排列。可以使用一系列属性来控制子元素的布局，例如 `justify-content`、`align-items` 等。
- `grid`: 定义一个网格容器，可以使用网格布局来排列其子元素。通过设置网格列和行，可以灵活地控制子元素的布局。

## 赞助请求V3

**建站因为热爱，生活需要Money，请屏幕前的大佬动动您发财的小手，点击一次以示鼓励，祝您生活愉快！**


<div class="article-ads"></div>

> PS：就目前的访问量，即便每个访客都点一次广告，收入也不足以支付运营成本。`如果看不到广告，可能是网络原因或被拦截了，那就算了吧。再次祝您生活愉快~~`

CSS的display有哪些值？

## 简介

本文用于记录 `Go` 语言的轻量级Web框架 `Gin` 的基本使用。

接下来老狗将从零开始搭建一个简单的项目环境，然后使用 `Gin` 编写一些Web服务器相关代码，包括创建服务、Token拦截、参数接收等基本操作。

注意：在进行下面的操作前，请保证你已经正确安装和配置 `Golang` 的开发环境。



## 创建项目

### 创建文件夹

```bash
# 创建文件夹
mkdir gin-server
# 进入文件夹
cd gin-server
```
> PS：也可以用鼠标操作

### 初始化项目

```bash
# 在 gin-server 文件夹内，用命令行终端运行：
go mod init gin-server
```
> 使用 `go mod` 初始化 `gin-server` 项目，成功后，会出现提示：`go: creating new go.mod: module gin-server` ，并且 `gin-server` 文件夹内会出现 `go.mod`文件。

### 安装`gin`

```bash
# 用命令行终端运行：
go get github.com/gin-gonic/gin
```
> 该命令将下载 `gin` 相关代码包

### 创建入口文件

> 在 `gin-server` 文件夹内创建 `main.go` 文件，并填入以下代码：

```go
// go语言规范，必须程序入口必须是在 package main 包内
package main

// 引用 fmt 和 gin
import (
	"fmt"
	"github.com/gin-gonic/gin"
)

func main() {
        // 创建路由
	router := gin.Default()
        
        // 路由分组
	api := router.Group("/gin")
        // 开放接口
	api.GET("/hello", hello)
        
        // 以上两行代码相当于：router.GET("/gin/hello", hello)

        // 启动服务并设置端口为 8080
	err := router.Run(":8080")
	if err != nil {
		fmt.Println("Error: ", err)
	}
}

// 接口参数必须是 c *gin.Context
func hello(c *gin.Context) {
	fmt.Println("hello gin")
}
```

## 运行测试

通过以上操作，你已经使用 `gin` 创建了一个最基础的 `web` 服务，并开放了一个 `/gin/hello` 接口。

### 运行

```bash
# 在gin-server文件夹内，用命令行终端运行：
go run main.go
```

运行成功后，会出现相应日志：
```console
[GIN-debug] [WARNING] Creating an Engine instance with the Logger and Recovery middleware already attached.

[GIN-debug] [WARNING] Running in "debug" mode. Switch to "release" mode in production.
 - using env:   export GIN_MODE=release
 - using code:  gin.SetMode(gin.ReleaseMode)

[GIN-debug] GET    /gin/hello                --> main.hello (3 handlers)
[GIN-debug] [WARNING] You trusted all proxies, this is NOT safe. We recommend you to set a value.
Please check https://pkg.go.dev/github.com/gin-gonic/gin#readme-don-t-trust-all-proxies for details.
[GIN-debug] Listening and serving HTTP on :8080
```
根据提示，已经开发地址为 `/gin/hello` 的 `GET` 接口，且端口为 `8080`。

**注意：启动成功后不要关闭该终端，否则将会关闭该服务！**

### 测试

可以通过浏览器输入地址 `http://localhost:8080/gin/hello` 发送请求，也可以使用命令行 `curl` 工具发送请求：

```bash
# 在任意地方再开一个命令行终端，并运行：
curl http://localhost:8080/gin/hello
```

请求发送后，查看原来启动 服务的终端窗口，可以看到输出：

```bash
hello gin
[GIN] 2024/04/04 - 12:06:09 |[97;42m 200 [0m|            0s |             ::1 |[97;44m GET     [0m "/gin/hello"
```

其中输出 `hello gin` 则可认为接口成功。

## 总结

1. 本文运行、测试等操作都建议使用命令行来完成；
2. `go mod` 是 Go 语言提供的依赖管理工具，用于管理 Go 项目的依赖关系和版本信息；
3. `router := gin.Default()` 用于创建接口根节点；
4. `api := router.Group("/gin")` 用于创建 `router` 的下级节点，可以一层层向下扩展节点。

通过本文的学习，你已经搭建了一个最简单的Http服务，下一篇，将介绍一下接口封装：【[Go语言框架Gin基础教程二：接口封装](https://oldmoon.top/post/gin2)】

## 赞助请求V3

**建站因为热爱，生活需要Money，请屏幕前的大佬动动您发财的小手，点击一次以示鼓励，祝您生活愉快！**


<div class="article-ads"></div>

> PS：就目前的访问量，即便每个访客都点一次广告，收入也不足以支付运营成本。`如果看不到广告，可能是网络原因或被拦截了，那就算了吧。再次祝您生活愉快~~`

Go语言框架Gin基础教程一：创建项目

## 简介

本文主要介绍了一些性能分析工具，和一些 `Vue` 项目的优化方式。

如 `Chrome` 浏览器自带的`LightHouse` 分析工具、`rollup` 分析工具等等。



## 性能优化

### LightHouse页面分析

我们可以使用谷歌浏览器自带的 `DevTools` 中的 `LightHouse` 进行性能分析：

开始分析：
![1](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1712135072100.png)

分析结果：
![2](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1712135065105.png)

#### 参数介绍

从 `Performance` 页的表现结果来看，得分 `37`，并提供了很多的时间信息，我们来解释下这些选项代表的意思：
- `FCP` (First Contentful Paint)：首次内容绘制的时间，浏览器第一次绘制DOM相关的内容，也是用户第一次看到页面内容的时间。
- `Speed Index`: 页面各个可见部分的显示平均时间，当我们的页面上存在轮播图或者需要从后端获取内容加载时，这个数据会被影响到。
- `LCP` (Largest Contentful Paint)：最大内容绘制时间，页面最大的元素绘制完成的时间。
- `TTI`（Time to Interactive）：从页面开始渲染到用户可以与页面进行交互的时间，内容必须渲染完毕，交互元素绑定的事件已经注册完成。
- `TBT`（Total Blocking Time）：记录了首次内容绘制到用户可交互之间的时间，这段时间内，主进程被阻塞，会阻碍用户的交互，页面点击无反应。
- `CLS`（Cumulative Layout Shift）：计算布局偏移值得分，会比较两次渲染帧的内容偏移情况，可能导致用户想点击A按钮，但下一帧中，A按钮被挤到旁边，导致用户实际点击了B按钮。

通过以上测试指标，可以进行针对性优化。

### rollup代码分析

由于我们使用的是 `vite`，`vite` 打包是基于 `rollup` 的，我们可以使用 `rollup` 的插件：
```bash
# 安装插件
npm install rollup-plugin-visualizer
```
```ts
// `vite.config.ts`配置插件，记得设置open 不然无效
import { visualizer } from 'rollup-plugin-visualizer';
plugins: [vue(), vueJsx(),visualizer({
      open:true
 })],
```

然后进行 `npm run build` 打包，打包后会弹出分析页面，如：

![3](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1712135059548.png)

我在项目中使用了 `Ant Design`，分析发现这个 `UI` 库非常庞大，这时候就可以使用 `Ant Design` 的按需引入来减少包大小

### Vite 配置优化
```ts
build:{
       chunkSizeWarningLimit:2000,
       cssCodeSplit:true, //css 拆分
       sourcemap:false, //不生成sourcemap
       minify:false, //是否禁用最小化混淆，esbuild打包速度最快，terser打包体积最小。
       assetsInlineLimit:5000 //小于该值 图片将打包成Base64 
},
```

### PWA离线存储技术

```bash
npm install vite-plugin-pwa -D
```
```ts
import { VitePWA } from 'vite-plugin-pwa' 
plugins: [vue(),VitePWA(), vueJsx(),visualizer({
      open:true
})],
```
`PWA` 技术的出现就是让 `web` 网页无限接近于 `Native` 应用：
1. 可以添加到主屏幕，利用manifest实现
2. 可以实现离线缓存，利用service worker实现
3. 可以发送通知，利用service worker实现

```ts
VitePWA({
      workbox:{
          cacheId:"XIaoman",//缓存名称
          runtimeCaching:[
            {
              urlPattern:/.*\.js.*/, //缓存文件
              handler:"StaleWhileRevalidate", //重新验证时失效
              options:{
                cacheName:"XiaoMan-js", //缓存js，名称
                expiration:{
                  maxEntries:30, //缓存文件数量 LRU算法
                  maxAgeSeconds:30 * 24 * 60 * 60 //缓存有效期
 
                }
              }
            }
          ]
      },
    })
```
进行 `npm run build` 打包会生成 `sw.js`：

![4](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1712135081781.png)
![5](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1712135077569.png)

 

### 其他性能优化

#### 图片懒加载 
```bash
# 引入vue3懒加载模块
import lazyPlugin from 'vue3-lazy'
# 页面中使用懒加载
<img v-lazy="user.avatar" >
```
#### 虚拟列表

Element-Plus中的组件：
![6](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1712135055645.png)


#### 多线程

使用 `new Worker` 创建多线程，优化速度。

`worker` 脚本与主进程的脚本必须遵守同源限制。他们所在的路径协议、域名、端口号三者需要相同
```ts
const myWorker1 = new Worker("./calcBox.js");
```
都使用 `postMessage` 发送消息
```ts
worker.postMessage(arrayBuffer, [arrayBuffer]);
```
都使用 `onmessage` 接收消息
```ts
self.onmessage = function (e) {
 // xxx这里是worker脚本的内容
};
```
关闭
```ts
worker.terminate();    
```

- `VueUse` 库已经集成了 `webWorker`：
![7](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1712135068343.png)

#### 防抖节流

- 同样` VueUse` 也是集成了：
![8](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1712135050716.png)

## 赞助请求V3

**建站因为热爱，生活需要Money，请屏幕前的大佬动动您发财的小手，点击一次以示鼓励，祝您生活愉快！**


<div class="article-ads"></div>

> PS：就目前的访问量，即便每个访客都点一次广告，收入也不足以支付运营成本。`如果看不到广告，可能是网络原因或被拦截了，那就算了吧。再次祝您生活愉快~~`

Vue项目打包性能分析与优化

使用 `VS Code` 创建 `Vue` 文件后，想要初始化一些代码，通过一些插件可以实现，但本文记录一个更简单的配置方式，使用 `VS Code` 的用户设置。

1. 在 `VS Code`中，点击左下角设置按钮（齿轮）
2. 选择【用户片段】（`User Snippents`），会弹出搜索框
3. 输入 `vue` 后，选择 `vue.json` 文件，会出现一个配置文件
4. 在配置文件中有一个注释示例，根据注释填入一些内容即可

下面是一个 `vue.json` 的示例，可以直接使用：

```json
{
  "Print to console": {
  // 前缀提示符，在编辑器中输入vue3可以出现提示
  "prefix": "vue3",
  "body": [
    "<template>",
    "  <div>",
    "  </div>",
    "</template>",
    "",
    "<script setup lang='ts'>",
    "",
    "</script>",
    "",
    "<style scoped>",
    "",
    "</style>"
  ],
  "description": "Log output to console"
  }
}
```

提示：以上内容中的 `prefix` 值可以自定义，`body` 是你想要初始化的内容。

以上配置完成后，在一个 `Vue` 文件中输入 `vue3`，就会出现提示，选择后就会将 `body` 的内容自动填入当前文件。

VS Code配置Vue3代码初始模板

twitter:card

twitter:title

https://images.oldmoon.top/images/dingdangdog/oldmoon.png

twitter:image

努力做一只帅气、有才、豁达的老狗！

twitter:description