vue 学习配置

vue/vue3 Ant框架.md

@@ -0,0 +1,54 @@
+# `vue3` 使用ant
+## 在 `vue3` 项目中新增 `antd`
+> 此处是通过 vue cli 创建 vue3.0 项目,直接在项目目录下新增
+### 1. 安装 ant to vue3
+通过 `yarn` 或者 `npm` 进行安装 `ant`
+
+```shell
+    yarn  add ant-design-vue@next
+    
+    # OR
+    
+    npm i --save ant-design-vue@next
+```
+
+
+<font color="red">!!! 如果是需要全局安装不要使用官方的方法来进行一个安装,在21-08-02 使用官方教程安装后使用  `vue3.0` 方法进行引用会在浏览器内提示 `Cannot read property 'use' of undefined` ,但是在终端中不会有错误提示, 使用上方方法安装,可正常使用 </font>
+`ant` 官方安装方法
+
+```shell
+    npm install ant-design-vue --save
+    yarn add ant-design-vue
+```
+
+### 2. `vue3` 中,配置 `ant`
+> 全局配置ant
+> 在vue3中全局挂载模块和vue2中有一点区别,但是基本差不多
+
+编辑 `src` 目录下的 `main.js` ,使用 `app.use` 来进行导入,支持链式调用
+```javascript
+import { createApp } from 'vue';
+import Antd from 'ant-design-vue';
+import App from './App';
+const app = createApp(App);
+app.use(Antd);//此处为引用antd 
+app.mount("#app");
+
+// 也可以按照下面方式进行引用,xxx为模块
+createApp(app).use(xxx).use(xxx).use(Antd)
+```
+
+## `vue3` 递归渲染 `ant` 框架的 sidebar
+#### 思路解析
+侧边栏部分可以使用 `ant` 的布局 `Layout` 来实现,配合 `ant` 的 导航菜单 `a-menu` 子菜单使用
+#### 文件结构
+#### 示例代码
+#### 踩过的坑
+> 多看文档,[ant文档地址](https://2x.antdv.com/components/overview-cn/)
+1. 操作一个菜单其他菜单会一起响应.
+    解决方法: 此时需要给每一个 `a-menu-item` 以及 `a-sub-menu` 设置 `key` 值
+3. 渲染出来的子菜单栏在侧边栏旁边生成
+    解决方法: 在创建 `a-menu` 组件时设置属性 `mod` 为 `inline`
+```jsx
+    <a-menu mode="inline"> 其他组件 </a-menu>
+```

vue/vue3 记录.md

@@ -0,0 +1,3 @@
+# `vue3` 记录
+## 1. `vue3` 与 `vue2` 的区别
+### 生命周期

vuex相关.md → vue/vuex相关.md

@@ -1,5 +1,5 @@
-# `vuex` 技巧大不全
-## 1. 这是个啥
+# `vuex` 技巧使用
+## 1. 基础介绍
 > 官方文档写的非常好,建议自己看去
 + 官方合作项目
   > [vuex官方文档](https://vuex.vuejs.org/zh)
@@ -79,7 +79,6 @@
     3. vue插槽创建方法(slot)
        1. 2.6.0版本
           1. 创建
-            语法` v-slot:slotName = "customPropsName"`,解释,在使用组件的时候在template中定义此行代码即可
-              1. 
+            语法` v-slot:slotName = "customPropsName"`,解释,在使用组件的时候在template中定义此行代码即可 
 ## 4. 先留着这个板块
 ## 6. 我悟了

环境配置相关/window.md

@@ -0,0 +1,17 @@
+# window 下环境配置
+## `yarn` 环境配置
+### 安装 `yarn` 环境
+```shell
+    npm install -g yarn
+```
+### 在 `vscode` 中,使用 `yarn` 报错提示
+> 终端上提示的错误
+```shell
+yarn 无法加载文件 xxxx路径/yarn 因为在此系统上禁止运行脚本.
+```
+错误原因: 在window上边因为安全策略禁止执行未经允许的脚本
+#### 解决方法
+打开windows 的 `powershell` ,右键开始菜单可以找到 `powershell` 在 `powershell` 中输入如下命令即可,在输出的返回中输入 `y` 即可
+``` shell
+set-ExecutionPolicy RemoteSigned
+```