update

vue/create_npm_package.md

@@ -0,0 +1,10 @@
+# 如何去发布一个npm包
+
+
+
+## 注册npm账号
+
+ - [官网](www.npmjs.com)
+ - mkdir dir
+ - npm init
+

vue/iconfont.md

@@ -1 +1,59 @@
 # 在vue 中使用iconfont
+
+
+
+### symbol
+
+ -  引入js
+
+    <img src="https://public.veypi.com/img/screenshot/20211020152019.png" alt="image-20211020152019051" style="zoom:40%;" />
+
+    ```html
+    <script type="text/javascript" src=""></script>
+    ```
+
+    
+
+    - 引入css
+
+      ```html
+      <style type="text/css">
+          .icon {
+             width: 1em; height: 1em;
+             vertical-align: -0.15em;
+             fill: currentColor;
+             overflow: hidden;
+          }
+      </style>
+      ```
+
+      ```html
+      <link rel="stylesheet" type="text/css" href="">
+      ```
+
+    - 引用icon
+
+      ```html
+      <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-xxx"></use>
+      </svg>
+      ```
+
+      
+
+### 使用组件 one-icon
+
+```typescript
+import OneIcon from '@veypi/one-icon'
+// 注意下载下来的js文件放public文件夹里
+Vue.use(OneIcon, {href: './icon.js'})
+// 或者使用阿里cdn 好处是每次添加icon后不用更新 但是无法离线或内网使用
+Vue.use(OneIcon, {href: 'https://at.alicdn.com/t/font*****.js'})
+```
+
+
+
+### 参考
+
+- [官方文档](https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d0091c141&helptype=code)
+

vue/vue3.md

@@ -0,0 +1,156 @@
+# vue3 typescript vue-router vuex setup
+
+### 最近发现vue3相关库都更新的差不多了，尝试学习了新的版本, 使用setup 的确变了很多，像ref   、prop面目全非，刚开始用还找了很久
+
+## 创建项目
+
+```bash
+yarn create vite  name --template vue-ts
+```
+
+### [vue-router](https://next.router.vuejs.org/zh/installation.html)
+
+```bash
+# 安装
+npm install vue-router@4
+```
+
+```typescript
+
+// vim router/index.ts
+import { createRouter, createWebHistory } from 'vue-router'
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes: [
+        {
+            path: '/',
+            name: 'home',
+            component: () => import('../view/file.vue')
+        },
+        {
+            path: '/t',
+            name: 't',
+            component: () => import('../view/file.vue')
+        }
+        //...
+    ],
+})
+
+export default router
+
+```
+
+
+
+### [vuex](https://next.vuex.vuejs.org/zh/guide/typescript-support.html)
+
+```bash
+# 安装
+yarn add vuex@next --save
+```
+
+
+
+```typescript
+// store/index.ts
+import { InjectionKey } from 'vue'
+import { createStore, useStore as baseUseStore, Store } from 'vuex'
+
+export interface State {
+    count: number
+}
+
+export const key: InjectionKey<Store<State>> = Symbol()
+
+export const store = createStore<State>({
+    state: {
+        count: 0
+    },
+    mutations: {
+        increment(state) {
+            state.count ++
+        }
+    },
+    actions: {
+        asd(context) {
+            context.commit('increment')
+        }
+    }
+})
+
+// 定义自己的 `useStore` 组合式函数
+export function useStore () {
+    return baseUseStore(key)
+}
+
+```
+
+### main.ts
+
+```typescript
+import {createApp} from 'vue'
+import App from './App.vue'
+import router from './router'
+import {store, key} from './store'
+
+const app = createApp(App)
+app.use(router)
+app.use(store, key)
+app.mount('#app')
+```
+
+
+
+## 使用技巧
+
+```typescript
+// prop vue3 v-module 绑定的事件名改了
+// setup
+let emits = defineEmits<{
+  (e: 'update:modelValue', v: boolean): void
+}>()
+let props = defineProps<{
+  modelValue: boolean
+}>()
+
+function setValue(b: boolean) {
+  emits('update:modelValue', b)
+}
+
+```
+
+```typescript
+// slots 中默认插槽
+// props 允许为空的写法, 否则会报错
+import {computed, useSlots, withDefaults} from 'vue'
+const slots = useSlots()
+const icon = computed(() => {
+  // @ts-ignore
+  if (slots.default) return slots.default()[0].children?.trim()
+  return ''
+})
+const props = withDefaults(defineProps<{
+  color?: string
+}>(), {
+  color: ''
+})
+```
+
+```typescript
+// webstorm 识别路径别名@ 
+// 在tsconfig.json complierOptions 下添加
+"baseUrl": ".",
+"paths": {
+  "@/*": ["./src/*"]
+}
+
+// vite.config.js
+resolve: {
+    // https://vitejs.dev/config/#resolve-alias
+    alias: {
+      "@": "/src",
+    },
+  },
+
+```