封装 ~ 智能搜索

• axios搜索接口调用

• • App.vue

• 参考文件 目录

• 整合

封装Search组件搜索框

===========================================================================

App.vue

---

搜索

main.js

---

import Vue from ‘vue’

import App from ‘./App.vue’

import router from ‘./router’

import store from ‘./store’

Vue.config.productionTip = false

new Vue({

router,

store,

render: h => {

return h(App)

}

}).$mount(‘#app’)

Search.vue

---

<span class=“clear-btn” @click=“clearKw” v-show=“kw.length > 0 && clearable”>×

搜索

router 里的 index.js

---

import Vue from ‘vue’

import VueRouter from ‘vue-router’

Vue.use(VueRouter)

const routes = [

]

const router = new VueRouter({

mode: ‘history’,

base: process.env.BASE_URL,

routes

})

export default router

store 里的 index.js

---

import Vue from ‘vue’

import Vuex from ‘vuex’

Vue.use(Vuex)

export default new Vuex.Store({

state: {

},

mutations: {

},

actions: {

},

modules: {

}

})

封装Tag组件并保持搜索记录

============================================================================

App.vue

---

搜索记录

<span class=“iconfont icon-shanchu1” @click=“clearHistory”>

Tag.vue

---

{{text}}

封装Cell组件

======================================================================

App.vue

---

<cell title=“男装” text=“200” @click=“search”>

Cell.vue

---

{{title}}

axios搜索接口调用

=========================================================================

App.vue

---

参考文件 目录

=====================================================================

参考文件 目录

— — assets

— — components

— — router

— — index.js

— — store

— — index.js

— — views

— — Cell.vue

— — Search.vue

— — Tag.vue

— — App.vue

— — main.js

整合

================================================================

— — router — — index.js

import Vue from ‘vue’

import VueRouter from ‘vue-router’

Vue.use(VueRouter)

const routes = [

]

const router = new VueRouter({

mode: ‘history’,

base: process.env.BASE_URL,

routes

})

export default router

— — store — — index.js

import Vue from ‘vue’

import Vuex from ‘vuex’

Vue.use(Vuex)

export default new Vuex.Store({

state: {

},

mutations: {

},

actions: {

},

modules: {

}

})

— — views — — Cell.vue

{{title}}

— — views — — Search.vue

<input type=“text” v-model=“kw” class=“search-input-el” @input=“handleInput” @keypress.enter=“handlePress” :style=“{borderRadius: rarius}”>

<span class=“clear-btn” @click=“clearKw” v-show=“kw.length > 0 && clearable”>×