初始阶段完善代码格式化配置和工具链

Author: Neveryu

.eslintrc.js

@@ -0,0 +1,9 @@
+/dist/*
+.local
+.output.js
+/node_modules/**
+
+**/*.svg
+**/*.sh
+
+/public/*

.prettierignore

@@ -0,0 +1,15 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "printWidth": 80,
+  "endOfLine": "lf",
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": {
+        "parser": "json"
+      }
+    }
+  ]
+}

.prettierrc

@@ -1,4 +1,4 @@
-文件内容：笔记（包含 vue3、ts、vite等相关内容）
+文件内容：笔记（包含 vue3、ts、vite 等相关内容）
 
 # Vue 3 + TypeScript + Vite
 
@@ -17,8 +17,7 @@ Since TypeScript cannot handle type information for `.vue` imports, they are shi
 
 You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).
 
-
-一、单文件组件 `<script setup>`
+## 一、单文件组件 `<script setup>`
 
 `<script setup>` 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。相比于普通的 `<script>` 语法，它具有更多优势：
 
@@ -27,3 +26,89 @@ You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/
 - 更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数，没有任何的中间代理)。
 - 更好的 IDE 类型推断性能 (减少语言服务器从代码中抽离类型的工作)。
 
+## 二、UI 框架引入的三种方式利弊分析总结
+
+- 1、全局完整注册
+
+  ```
+    import Antd from 'ant-design-vue';
+    import 'ant-design-vue/dist/antd.css';
+  ```
+
+  以上代码便完成了 Antd 的全局注册。需要注意的是，样式文件需要单独引入。
+
+- 2、全局部分注册
+
+  ```
+  import { Button, message } from 'ant-design-vue';
+  /* 会自动注册 Button 下的子组件, 例如 Button.Group */
+  app.use(Button).mount('#app');
+  app.config.globalProperties.$message = message;
+  ```
+
+- 3、局部注册组件
+  【重要说明】 此种方式需要分别注册组件子组件，如 Button、ButtonGroup，并且注册后仅在当前组件中有效。所以我们推荐使用上述两种方式。
+
+  ```
+    <template>
+      <a-button>Add</a-button>
+    </template>
+    <script>
+    import { Button } from 'ant-design-vue';
+    const ButtonGroup = Button.Group;
+
+    export default {
+      components: {
+        AButton: Button,
+        AButtonGroup: ButtonGroup,
+      },
+    };
+    </script>
+  ```
+
+## 三、按需加载
+
+如果你仅需要加载使用的组件，可以通过以下的写法来按需加载组件。
+
+```
+import Button from 'ant-design-vue/lib/button';
+import 'ant-design-vue/lib/button/style'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
+```
+
+如果你使用了 babel，那么可以使用 `babel-plugin-import` 来进行按需加载，加入这个插件后。你可以仍然这么写：
+
+```
+import { Button } from 'ant-design-vue';
+```
+
+插件会帮你转换成 ant-design-vue/lib/xxx 的写法。另外此插件配合 style 属性可以做到模块样式的按需自动加载。
+
+> 注意，babel-plugin-import 的 style 属性除了引入对应组件的样式，也会引入一些必要的全局样式。如果你不需要它们，建议不要使用此属性。你可以 import 'ant-design-vue/dist/antd.css 手动引入，并覆盖全局样式。
+
+【总结：】既然这样的话，那不管是全量引入还是按需加载，样式文件干脆直接 `import 'ant-design-vue/dist/antd.css` 手动全量引入全局样式。
+
+如果你使用的 Vite，你可以使用 `unplugin-vue-components` 来进行按需加载。但是此插件无法处理非组件模块，如 message，这种组件需要手动加载：
+
+```
+import { message } from 'ant-design-vue';
+import 'ant-design-vue/es/message/style/css'; //vite只能用 ant-design-vue/es 而非 ant-design-vue/lib
+```
+
+什么是 `Vite` 的按需加载？就是在 `vite.config.js` 中进行配置，配了以后，你就可以直接使用 `antd-vue` 里面的组件了，`vite` 会自动知道你引入了哪些组件，但就像上面所说的，无法处理非组件模块。
+
+```
+// vite.config.js
+import Components from 'unplugin-vue-components/vite';
+import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
+
+export default {
+  plugins: [
+    /* ... */
+    Components({
+      resolvers: [AntDesignVueResolver()],
+    }),
+  ],
+};
+```
+
+【总结：】如果确实想要使用按需加载的话，借助 `babel-plugin-import` 是一个很好的方案吧，但还是那句话，样式还是全量引入吧。

note.md

@@ -5,7 +5,9 @@ import HelloWorld from './components/HelloWorld.vue'
 </script>
 
 <template>
-  <HelloWorld />
+  <ConfigProvider>
+    <HelloWorld />
+  </ConfigProvider>
 </template>
 
 <style>

src/App.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-defineProps<{ msg: string }>()
 
 const count = ref(0)
 </script>

src/components/HelloWorld.vue

@@ -1,4 +1,9 @@
 import { createApp } from 'vue'
+import Antd from 'ant-design-vue'
 import App from './App.vue'
+// 引入less后缀的样式文件，方便后续更改主题颜色
+import 'ant-design-vue/dist/antd.less'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+app.use(Antd)
+app.mount('#app')

src/main.ts

@@ -0,0 +1,11 @@
+# vscode+eslint+prettier 超详细配置使用手册
+
+【文章目标】：彻底搞明白，1、在 VSCode 中如何安装插件 `eslint` 和 `prettier`，来进行代码检查、和代码格式化（美化）；2、以及如何在项目中优雅的新增`eslint`配置文件(`.eslintrc.js`)和`prettier`配置文件(`.prettierrc`)来增强(自定义)代码检查功能和代码格式化功能。
+
+`eslint` 和 `prettier` 是不同（不一样）功能的两个工具；因为它们有一部分相似性，所以很多同学经常搞混它们；也经常搞混项目中的`eslint`配置文件(`.eslintrc.js`)和`prettier`配置文件(`.prettierrc`)的使用区别；以及 VSCode 插件`prettier`与项目中`prettier`配置文件(`.prettierrc`)之间的使用关系，以及如何搭配使用。
+
+最终实现，保存代码时，自动格式化代码。
+
+要做的就是，首先得在 VSCode 中配置 eslint+prettier（一劳永逸），这是基础。
+
+其次，如果你有团队合作(多人参与写代码)；或者，对默认的vscode插件prettier的格式化不是很满意，你可以在项目中增加`prettier`配置文件(`.prettierrc`)来自定义更多规则来增强vscode中你安装的prettier插件的不足。