kindring пре 4 година
родитељ
комит
456985e548
2 измењених фајлова са 126 додато и 46 уклоњено
  1. 71 0
      vuex相关.md
  2. 55 46
      vue脚手架配置.md

+ 71 - 0
vuex相关.md

@@ -0,0 +1,71 @@
+# `vuex` 技巧大不全
+## 1. 这是个啥
+> 官方文档写的非常好,建议自己看去
++ 官方合作项目
+  > [vuex官方文档](https://vuex.vuejs.org/zh)
++ <details>
+    <summary> 状态管理模式 </summary>
+    
+    在一个专门的地方来存储数据,类似于仓库的存在,也可以视作一个快递中转站.统一管理数据,好知道一些数据到了什么地方,你的包裹到了什么地方
+  </details>
+## 2. 老子懂了
+
+## 3. 实战演练
+> 自己在项目中如何使用vuex 项目参照antdv的antdpro项目
++ ### 项目结构 
+  <details>
+    <summary>目前的路径</summary>
+    
+    > 带后缀的是文件,没带后缀就是文件夹
+    - `src`
+      -  `store`
+         -  <font color=#008000>index.js</font>
+         -  `modules`
+            -  state.js
+   </details>     
++ ### 文件之间的如何导入
+  + 在main.js中导入store,如下面的代码所示
+    ```
+        import Vue from 'vue'
+        import store from './store/'
+        // elseImport...
+
+        // someUse...
+        new Vue(
+            store,
+            // elseMounet
+        ).$mount('#app');
+    ```
+  + 在store目录下的`index.js`中配置导入[vue](https://cn.vuejs.org/index.html)和[vuex](https://vuex.vuejs.org/zh),顺便导入`modules`中自己创建的vuex模块,如下面代码所示
+    ```
+        import Vue from 'vue'
+        import Vuex from 'vuex'
+
+        import stateStore from './modules/state'
+        // 继续导入其他模块
+
+        //vue 使用vuex
+        Vue.use(Vuex);
+
+        export default new Vuex.store({
+            modules: {
+                stateStore,
+                // 其他的vuex模块
+            },
+            state: {
+
+            },
+            mutations: {
+
+            },
+            actions: {
+
+            },
+            getters: {
+
+            }
+        })
+    ```
+  
+## 4. 这到底是个啥?
+## 6. 我又悟了

+ 55 - 46
vue脚手架配置.md

@@ -1,5 +1,5 @@
 # vue脚手架的基础配置
-1. *配置路径别名*
+## 1. *配置路径别名*
    >从网上找的方法,网上还有另外一种配置方法,但是没法用
    + 在根目录下找到 `vue.config.js` 文件
         >如果没有此文件可以直接去找其他教程,或者是找尝试自己创建一个,免得浪费时间
@@ -31,50 +31,59 @@
         import H from '@components/HelloWorld.vue'
         import b from '@request/api';
         ```
-2. 设置服务器启动端口
-    > 配置vue的启动端口
-    + 依旧是在 `vue.config.js` 中进行配置,依旧是返回的对象.加上如下代码
-     > 
-            devServer: {
-                open: process.platform === 'darwin',
-                host: '127.0.0.1',
-                port: 2333,
-                https: false,
-                hotOnly: false,
-                proxy: null, // 设置代理
-                before: app => {}
-            }
+## 2. 设置服务器启动端口
+> 配置vue的启动端口
+  + 依旧是在 `vue.config.js` 中进行配置,依旧是返回的对象.加上如下代码
+    > 
+    ``` 
+    devServer: {
+        open: process.platform === 'darwin',
+        host: '127.0.0.1',
+        port: 2333,
+        https: false,
+        hotOnly: false,
+        proxy: null, // 设置代理
+        before: app => {}
+    }
+    ```
    + 重新启动服务,可以发现端口已经被修改成了2333
-3. 配置mockjs
-   > 这一步浪费了挺多时间的,过于傻逼,可能早已经配置好了结果自己写错了路径,导致找了大量资料,方法不一定适用所有的
-    + 引入mockjs
-        > 
-        ```
-        npm install mockjs
-        ```
-    + 创建mockjs
-        > 在src目录下边创建mock文件夹,在mock文件夹中创建index.js 其中写上如下代码
-        ```
-        //导入mockjs
-        import Mock from 'mockjs';
-        // a可以替换成其他的mock文件
-        require('./path/a.js'); 
-        Mock.setup({
-            timeout: 800
-        });    
-        ```
-        > 在mock目录下边创建叫path的目录,里面创建a.js文件,内部写入如下代码
-        ```
-        // 导入mockjs
-        let Mock = require('mockjs');
-        // 创建成一个函数用来返回数据
-        let a = function() {
-            return {
-                abc: 1
-            }
+## 3. 配置mockjs
+> 这一步浪费了挺多时间的,过于傻逼,可能早已经配置好了结果自己写错了路径,导致找了大量资料,方法不一定适用所有的
+  + 引入mockjs
+    > 
+    ```
+    npm install mockjs
+    ```
+  + 创建mockjs
+    > 在src目录下边创建mock文件夹,在mock文件夹中创建index.js 其中写上如下代码
+    ```
+    //导入mockjs
+    import Mock from 'mockjs';
+    // a可以替换成其他的mock文件
+    require('./path/a.js'); 
+    Mock.setup({
+        timeout: 800
+    });    
+    ```
+    > 在mock目录下边创建叫path的目录,里面创建a.js文件,内部写入如下代码
+    ```
+    // 导入mockjs
+    let Mock = require('mockjs');
+    // 创建成一个函数用来返回数据
+    let a = function() {
+        return {
+            abc: 1
         }
-        // 第一个参数写正则来匹配路径,第二个参数写上method(get|post),a则为函数,返回一个值
-        Mock.mock(/\/mock\/news/, 'get', a);
-        ```
-        > 可以在服务启动后去访问/api/mock/news文件夹看是否成功配置好了
-    + end
+    }
+    // 第一个参数写正则来匹配路径,第二个参数写上method(get|post),a则为函数,返回一个值
+    Mock.mock(/\/mock\/news/, 'get', a);
+    ```
+    > 可以在服务启动后去访问/api/mock/news文件夹看是否成功配置好了
+  + end
+## 4. 关闭烦人的变量定义必须使用的错误
+> 变量生来自由,变量都有权选择是否被使用。为了变量的自由而战   —— 大师 
++ 在根目录的 `package.json` 里面找到eslintConfig ,添加或者找到 `rules` 字段,添加或者设置 `"no-unused-vars":"off"` 即可正常关闭
++ 后续等待更新,也许用于不更新  
+## 5. 全局注册Antd组件
+  + 在main.js的入口中导入antd模块,然后挂载在vue中
+