Ask_Js 2019-04-08T14:10:16.000Z http://q1019736727.github.io/ Ask_Js Hexo React.js之react-router http://q1019736727.github.io/2019/03/17/react-router/ 2019-03-17T13:50:23.000Z 2019-04-08T14:10:16.000Z 前言

 当我刚刚开始接触react的时候，路由的跳转到底该使用react-router还是使用react-router-dom,这个是让我们很懵逼的，下面就先来说说react-router和react-router-dom的关系以及区别

(一)api的区别

  • react-router提供了router的核心api，如Router、Route、Switch等等，但是并没有提供相关dom操作的api
  • react-router-dom提供了通过dom触发的时间路由，例如BrowserRouter、Route、Link等

(二)功能的差异性

  • react-router-dom是基于react-router实现的，并且加入了一些浏览器运行的一些功能，
    例如：Link组件会渲染一个a标签，BrowserRouter使用 HTML5 提供的 history API可以保证你的 UI 界面和 URL 保持同步，HashRouter使用 URL 的 hash 部分保证你的 UI 界面和 URL 保持同步

所以综上所说因素，一般我们只要引入react-router-dom即可,react-router-dom会自动引入依赖库react-router,在react-router@v4.0版本以后，React Router被拆分成三个包：react-router,react-router-dom和react-router-native，目前网站搭建只需要引入react-router-dom即可，更多用法可以查看官网

1
2
3
yarn add react-router-dom
//或则
npm install react-router-dom

react-router-dom

（一) BrowserRouter与HashRouter

 HashRouter与BrowserRouter这两个路由是基本，我们需要将他们包裹在最外层，当然他们的内层也只能包裹一个元素，例如这样

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import {BrowserRouter as Router, HashRouter, Route} from "react-router-dom";

    <HashRouter>
      <div>
        <Route exact path='/' component={Login}></Route>
        <Route path='/home' component={Home}></Route>
     </div>
    </HashRouter>
    
    //或则使用BrowserRouter这样
    
    <Router>
      <div>
        <Route exact path='/' component={Login}></Route>
        <Route path='/home' component={Home}></Route>
      </div>
    </Router>

在这里我们要说说HashRouter和BrowserRouter的区别

  • BrowserRouter使用HTML5历史记录API（pushState，replaceState和popstate事件）来保持您的UI与URL同步
  • HashRouter使用URL的哈希部分（即window.location.hash）来保持您的UI与URL同步，使得路径上会出现 # 键

(二) Route

Route 就像原材料，控制着我们应该对应显示的内容，也是最重要的路由组件
Route常用的属性，path、exact、component

  • path：对应的路径
  • exact：仅当路径与location.pathname完全匹配时才匹配，当匹配到路劲后就不会再往下匹配
  • component：对应要显示的组件
    app.js
    1
    2
    3
    4
    5
    6
    7
    8
    import {BrowserRouter as Router, HashRouter, Route} from "react-router-dom";
        <HashRouter>
          <div>
            /*一般这里都要加个exact，不然切换路径后，两个路径对应的组件都会被显示出来*/
            <Route exact path='/' component={Login}></Route>
            <Route path='/home' component={Home}></Route>
          </div>
        </HashRouter>

 Link与NavLink都是控制路由跳转的，当然NavLink所具有的功能比Link更多，所以，使用的时候视情况而定。控制路由跳转这只是其中的一种方法，我们也可以使用react-router里面的js方法实现跳转

1
2


先暂时写在这儿，等有时间再接着完善]]> <h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><p>&emsp;当我刚刚开始接触react的时候，路由的跳转到底该使用react-router还是使用react-router-dom,这个是让我们很懵逼的，下面就先来说说react-router和react-router-dom的关系以及区别<br></p> 谈谈vuex http://q1019736727.github.io/2019/03/11/vuex/ 2019-03-11T07:30:27.000Z 2019-04-08T14:10:16.000Z 简介

 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
 Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新
 我们不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。

安装

 vuex的安装

1
2
3
4
5
//npm 方式引入
npm install vuex --save

//yarn 方式引入
yarn add vuex

vuex 基本概念

vuex最主要的几个核心概念就是State,Getter,Mutations,Actions

(一) State

state就是Vuex中的公共的状态, 可以将state看作是所有组件的data, 用于保存所有组件的公共数据，这里面的数据是响应式的，当很多地方引用了同state数据源并且未对数据进行深拷贝，那么当一个地方改变该数据，所有引用的地方数据都会发生变化。

1
2
3
4
5
6
7
8
9
10
11
12
13
//定义
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)

const store = new Vuex.Store({
  state:{
      todoList:[1,2,3]
  }
})

//组件获取
this.$store.state.todoList




(二) Getter

Getter是对state里面的数据进行预加工处理的函数方法，当我们需要对原始数据进行一个处理时，我们就需要用到getter，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const store = new Vuex.Store({
  state: {
    todoList: [
      { time: 1, text: 'do some'},
      { time: 2, text: 'do some' }
    ]
  },
  getters: {
      //这里我们返回数据的长度
    dealTodo: state => {
      return state.todoList.length
    }
  }
})

Getter 会暴露为 store.getters 对象，我们可以以属性的形式访问这些值：

1
2
//使用
this.$store.getters.dealTodo

mapGetters 辅助函数
当getters里面对象过多时，我们可以以ES6的语法形式解析里面的对象，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性computed：

1
2
3
4
5
6
7
8
9
10
11
12
import { mapGetters } from 'vuex'

export default {
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'getters1',
      'getters2',
      'getters3',
    ])
  }
}

当然我们也可以使用对象的形式放入

1
2
3
mapGetters({
    dataCount: 'getters1'
})




(三) Mutations

Mutations是更改 Vuex 的 store 中的状态的唯一方法，且不能用于处理异步事件,其中第一个参数是state, 第二参数是payload, 也就是传入数据

1
2
3
4
5
6
7
8
9
10
11
12
//实例
const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state,payload) {
      // 变更状态
      state.count +=  payload.amount
    }
  }
})

此时我们不能直接调用store里面的mutations实例方法，而是要通过commit方式对应的type来触发该方法

1
2
3
4
5
6
7
8
9
10
//使用 

//方式1
this.$store.commit('increment',{amount:100})

//方式2 直接使用包含 type 属性的对象
this.$store.commit({
  type: 'increment',
  amount: 10
})

Mutation 必须是同步函数，再次强调一下，所以存在异步操作的函数最好不要使用mutation里面的方法

mapMutations辅助函数
mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { mapMutations } from 'vuex'

export default {
  methods: {
      //方式1
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    
    //方式2
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}




(四) Action

action 类似于 mutation，不同在于：

  • action 提交的是 mutation，而不是直接变更状态。
  • action 可以包含任意异步操作。
  • actions中的回调函数的第一个参数是context, 是一个与store实例具有相同属性和方法的对象
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22

    const store = new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
        increment (state) {
          state.count++
        }
      },
      actions: {
          //写法1
        increment (context) {
          context.commit('increment')
        },
        
        //写法2 我们也可以使用ES6语法
         increment ({state,commit}) {
            commit('increment')
        }
      }
    })

action的触发,当然action也和mutation的触发方式差不多，也同样支持包含 type 属性的对象方式分发，下面我们就简单写一种,当然关键字不一样，这个触发关键字是dispatch

1
this.$store.dispatch('increment',data)

在上面我们也说到action可以进行异步操作，那么我们就可以以promise为例简单实现一下

1
2
3
4
5
6
7
8
9
10
11
const store = {
    //...
    actions:{
        increment({commit},data){
            return new Promise((resolve)=>{
                commit('increment',data)
                resolve()
            })
        }
    }
}

mapActions辅助函数
mapActions 辅助函数将组件中的 methods 映射为 store.dispatch 调用（需要在根节点注入 store）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
      'increment', 

      // `mapActions` 也支持载荷：
      // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
      'incrementBy' 
    ]),
    ...mapActions({
    // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
      add: 'increment' 
    })
  }
}




vuex项目结构拆分

当项目store文件很大的时候，我们就不得不拆分项目的目录结构，大体上我们必须准守以下规则

  • 应用层级的状态应该集中到单个 store 对象中。
  • 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
  • 异步逻辑都应该封装到 action 里面。

只要遵循上面的规则，代码可以任意组织，下面是我经常性使用的组合形式

1
2
3
4
5
6
7
8
9
10
11
└── store
    ├── index.js
    ├── Type.js
    ├── binding
    │   ├── actions.js
    │   ├── index.js
    │   └── mutations.js
    ├── house
        ├── actions.js
        ├── index.js
        └── mutations.js

store的根目录index.js用于整合各个局部状态store，使用modules整合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//文件 store/index.js

import Vuex from 'vuex'
import Vue from 'vue'
import houseStore from './house'
import bindingStore from './binding'
Vue.use(Vuex)

const store = new Vuex.Store({
  modules:{
    house:houseStore, //house store
    binding:bindingStore  //binding store
  }
})

export default store

Type.js主要用于存储事件type名

1
2
3
4
5
6
//Type.js
//例如...
//操作1
export const RRDUCELIST = 'RRDUCELIST'
//操作2
export const ADDLIST = 'ADDLIST'

局部store我就以binding为例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

/*----------------------------index.js-----------------------------*/
//index.js
import {RRDUCELIST} from '@/store/Type.js'
import mutations from './mutations'
import actions from './actions'
const index = {
  state:{
    tableDta:[
      {data:['数据1','数据2','数据3']},
    ]
  },
  mutations,
  actions,
}
export default index


/*----------------------------mutations.js-----------------------------*/
//mutations
import {RRDUCELIST,ADDLIST} from '@/store/Type.js'
const mutations = {
  //删除数据
  [RRDUCELIST](state, payload) {
    state.tableDta.splice(0, 1)
  },
  //增加数据
  [ADDLIST](state,payload){
    state.tableDta.push(payload)
  }
}
export default mutations


/*----------------------------actions.js-----------------------------*/
//actions
import {RRDUCELIST,ADDLIST} from '@/store/Type.js'
const actions = {
  reduceListAction({commit,state},index){
    return new Promise((resolve, reject) => {
      commit(RRDUCELIST,index)
      resolve()
    })
  },
  addListAction({state,commit},data){
    commit(ADDLIST,data)
  }
}
export default actions

]]> <h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><p>&emsp;Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。<br>&emsp;Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新<br>&emsp;我们不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。<br></p> SCSS常用基础功能整理 http://q1019736727.github.io/2019/03/06/scss/ 2019-03-06T13:01:54.000Z 2019-04-08T14:10:16.000Z

 Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。
 Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。
其中Scss就是演化于Sass，Sass诞生于Ruby社区，只不过Sass写法更加的精简，Sass是有严格的缩进规范并且没有‘{}’和‘；’。而Scss则和css的规范是一致的。

mixin

 可以设置的通用样式，避免繁琐的重复代码，让css看起来更具条理性
 关键字@mixin @include

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//定义一个debug样式
@mixin dbug {
  border: 1px solid red;
}
#container {
  //使用关键字@include使用该样式
   @include dbug;
   .box1 {
     color: red;
   }
   .box2 {
     color: blue;
   }
 }

 当然mixin里面也和js的函数一样，可以接受参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@mixin dbug($color) {
  //接受形参$color
  border: 1px solid $color;
}
#container {
   $R: #eee;//定义一个color值
   @include dbug($R);
   >.box1 {
     color: red;
   }
   >.box2 {
     color: blue;
   }
 }


%placeholder

 placeholder的用法和mixin的用法差不多一样,只是不能接受参数,使用时前面修饰符是@extend
 关键字% @extend ，那么用%placeholder的方式上面可以写成

1
2
3
4
5
6
7
8
9
10
11
12
13
//不能接受参数
%dbug{
  border: 1px solid red;
}
#container {
  @extend %dbug;
  >.box1 {
    color: red;
  }
  >.box2 {
    color: blue;
  }
}


&以及冒号:的运用

 &代表着当前选择器,:冒号相当于一个连接符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.userCard{
  width: 100px;
  //多类选择器
  &.active{
    background: yellow;
  }
  //详当于是 .userCard-name 的写法 
  &-name{
    color: black;
    // font-size font-weight
    font:{
      size: 28px;
      weight: bold;
    }
  }
}


除法运算

 以下三种情况 / (斜杠)将被视为除法运算符号：

 1.如果值，或值的一部分，是变量或者函数的返回值
 2.如果值被圆括号包裹
 3.如果值是算数表达式的一部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
p {
  font: 10px/8px;             // 直接使用除法，不会触发运算
  $width: 1000px;
  width: $width/2;            // 使用变量,触发运算
  width: round(1.5)/2;        // 使用一个函数,触发运算
  height: (500px/2);          // 使用括号,触发运算
  margin-left: 5px + 8px/2px; // 使用加号,触发运算
}

编译为

p {
  font: 10px/8px; //直接使用 / (斜杠),并未被编译
  width: 500px;
  height: 250px;
  margin-left: 9px; 
}


媒体查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//手机宽度
@mixin phone {
  @media (max-width: 500px) {
    @content;
  }
}
//ipad宽度
@mixin ipad {
  @media (min-width: 501px) and (max-width: 1024px) {
    @content;
  }
}
//pc宽度
@mixin pc {
  @media (min-width: 1025px) {
    @content;
  }
}

//使用
#container{
    @include phone {
      background: red;
    }
    @include ipad{
      background: blue;
    }
    @include pc{
      background: green;
    }
}


@function的使用

这个和js的写法都差不多,可以传入一个参数，并返回处理后的数据

1
2
3
4
5
6
7
8
@function px($value){
 @return $value/2 + px;
}
#container{
  width: px(200);
  height: px(200);
  background:#000;
}

]]> <p><img src="/2019/03/06/scss/scss.jpg" alt></p> 写一个简单的事件订阅中心eventsHub http://q1019736727.github.io/2019/03/06/eventshub/ 2019-03-06T01:51:50.000Z 2019-04-08T14:10:16.000Z  在有些时候，当我们写了两个组件，当需要相互通信，该想想怎么使两个组件之间可以互相监听事件，并且能够传递obj，那下面我们用VanillaJS来实现一个简单的小demo吧。


首先创建一个事件对象
1
const eventsHub = {}

 那么接下来创建一个事件中心用来存储事件，创建的时候最好以obj的形式，不要以array形式创建。以obj方式我们能更快以订阅事件的name快速读取里面储存的fuction。

1
2
3
4
const eventsHub = {
      //用于存储事件
      events:{}
}


事件绑定

 事件绑定的时候，我们需要传入对应的事件名称key，以及callback函数，然后我们再拿这个key去事件中心去寻找是否存在该事件，存在该事件就继续网里面添加callback函数，不存在将该事件初始化一个空的Array，然后将传入的callback函数push进去

1
2
3
4
5
6
on:function (bindname,fn) {
      if (this.events[bindname] === undefined){
          this.events[bindname] = []
      }
      this.events[bindname].push(fn)
  }


事件执行

 查找该执行事件的key，获取Array里面的callback函数，全部执行

1
2
3
4
5
6
7
emit:function (bindname,data) {
    if (this.events[bindname]) {
        this.events[bindname].map((fn)=>{
            fn.call(undefined,data)
        })
    }
},


使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const eventsHub = {
    events:{},
    //执行事件
    emit:function (bindname,data) {
        if (this.events[bindname]) {
            this.events[bindname].map((fn)=>{
                fn.call(undefined,data)
            })
        }
    },
    //绑定事件
    on:function (bindname,fn) {
        if (this.events[bindname] === undefined){
            this.events[bindname] = []
        }
        this.events[bindname].push(fn)
    }
    
}
export default eventsHub


//订阅
eventsHub.on('eventName',(res)=>{
    //... do something
})

//执行
 eventsHub.emit('eventName',data)
]]> <p> &emsp;在有些时候，当我们写了两个组件，当需要相互通信，该想想怎么使两个组件之间可以互相监听事件，并且能够传递obj，那下面我们用VanillaJS来实现一个简单的小demo吧。</p> vue仿写cnode社区 http://q1019736727.github.io/2019/03/04/cnode/ 2019-03-04T01:41:42.000Z 2023-10-11T02:16:44.126Z  写的一个vue小项目,接口基于cnode社区开放接口,项目使用Vue2.0实现,写了一段时间了总结一下项目，该项目未适配手机屏幕。
源码地址 | 预览地址

项目主体结构

 因为项目较小,就没有使用vuex,网络方面使用axios。

axios挂载

 一般当我们网络请求时，都需要一个网络框架，这里我选择axios。每当一个组件需要网络请求时，都需要引入axios模块，为了避免这种重复操作，可以把axios挂载到Vue的原型上

 入口文件main.js

1
2
3
4
5
import Axios from 'axios'
import Vue from 'vue'

/*这里可以随便命名,为了方便记住,我命名$http*/
Vue.prototype.$http = Axios

 需要使用的组件调用

1
2
3
4
5
6
7
8
9
this.$http.get('...',{
          params: {
            ...params
          }
        }).then((res) => {
           // ... do something
        }).catch(error =>{
           // ... do something
        })

路由配置

 总共5个组件模块，顶部导航栏、主页列表、详情即评论区域、个人详情、分页器
详情页的数据信息因为返回的html数据形式，这里引入了一个第三方mardown文本样式

1
@import url('../assets/markdown.css');//引入markdown样式

 vue-router路由配置信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Router({
  // 如果需要去掉路径上的#，model使用history模式
  // mode:'history',
  routes: [
    {
      name:'root',//router-link跳转时需要使用
      path:'/',
      components:{
        main: Publish//这里和下面命名main是因为渲染的时候(router-view 时需要用)
      }
    },
    {
      name:'post-detail',
      path:'/topic/:id&:name',//需要传递参数id和name,注意在
      components:{
        main: Postdetail,
        slider: Slider
      }
    },
    {
      name:'user-page',
      path:'/user/:username',
      components:{
        main:Userinfo
      }
    },

  ]
})

分页器的实现

 在主页的底部，我们需要一个分页器。首先我们要理清需求，做一个最多显示5页的分页器，当大于5页的时候，前面显示省略号，页数也都加1，当页数小于5时，前面的省略号消失。

 大体效果如下

 首先我们构建一个分页容器,其中ismore用于判断是否显示前边的省略号，selectIndex用于判断当前选中页数

1
2
3
4
5
6
7
<div class="page-wrapper">
  <button @click="changeBtn">首页</button>
  <button @click="changeBtn">上一页</button>
  <button v-show="ismore">......</button>
  <button @click="changeBtn(item)" v-for="item in Pages" :class="{active: selectIndex === item}">{{item}}</button>
  <button @click="changeBtn">下一页</button>
</div>

 初始数据值

1
2
3
4
5
6
7
data:function() {
  return{
    Pages:[1,2,3,4,5,'......'],//初始页数
    selectIndex:1,//初始选中状态
    ismore:false//是否显示前面的......
  }
}

  按钮点击逻辑处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
changeBtn(page){
       //过滤点击省略号事件
       if (typeof page !== 'number') {
         if (typeof page === 'string'){
           return
         }
         let str = page.currentTarget.innerText
         switch (str) {
           case '首页':
             this.Pages = [1,2,3,4,5,'......'];
             this.changeBtn(1);
             break
           case '上一页':
             this.$jq('button.active').prev().click()
             break
           case '下一页':
             this.$jq('button.active').next().click()
             break
         }
         return
       }
       this.selectIndex = page;
       if(page>4){//判断是否显示省略号
         this.ismore = true;
       }else{
         this.ismore = false;
       }
       //页码状态处理
       if(page == this.Pages[4] ){
         this.Pages.shift();
         this.Pages.splice(4,0,this.Pages[3]+1);
       }else if(page == this.Pages[0] && page !=1){
         this.Pages.unshift(this.Pages[0]-1);
         this.Pages.splice(5,1);
       }
       //通知主页按钮已经点击，实时更新数据
       this.$emit('changePage',page)
     }

总结

 总的说来，这是一个非常适合练手的项目，逻辑简单明了，页面逻辑也不是很复杂，可能其中还有些没讲到，不过可以下载源码在细致看一下，上面这些是我大致认为该项目还比较重要的内容，以此做个记录

]]> <p> &emsp;写的一个vue小项目,接口基于cnode社区<a href="https://cnodejs.org/api" target="_blank" rel="noopener">开放接口</a>,项目使用Vue2.0实现,写了一段时间了总结一下项目，该项目未适配手机屏幕。<br> <a href="https://github.com/q1019736727/node-Vue" target="_blank" rel="noopener">源码地址</a> | <a href="http://q1019736727.github.io/node-Vue/node-vue/dist">预览地址</a></p> <h4 id="项目主体结构"><a href="#项目主体结构" class="headerlink" title="项目主体结构"></a>项目主体结构</h4><p> &emsp;因为项目较小,就没有使用vuex,网络方面使用axios。<img src="/2019/03/04/cnode/list.jpg" alt></p> hello world http://q1019736727.github.io/2019/02/27/hello-world/ 2019-02-27T03:36:51.000Z 2019-04-08T14:10:16.000Z

]]> <p><img src="/2019/02/27/hello-world/SwiftJs.png" alt></p>