公众号：积雷山摩云洞，欢迎关注！！！
最新开始重构嵌入微信公众号的h5项目，所以就把项目的初始搭建过程叙述下
以上是项目刚开始搭建后首页的样子
一、选择技术栈
这个是听上去好像很牛叉，但是实际就那么一会事的东西。小公司，也就不用什么react了，我用了，后边也没有其他人写，何必呢，就vue+vant，vant是我比对了mint ui, WeUI， vux,mui，还有滴滴和京东等框架后做出的选择，fork数也达到了8K以上，stars达到17点多
- 创建项目：
vue create xxx
复制代码其他的选型我都不说了，说一些关键的选型，vue我选的是2，ts也没有使用，除了最后两项单元测试的，其他的都选了。还有不要问我为啥，问就回答为了稳定和高效！！！
- 加载vant 官网地址：vant-contrib.gitee.io/vant/#/zh-C… 使用方法
npm i vant -S
复制代码然后配置main.js 注意，不要全部引用，会胖死的！！！，按需加载，盛多少吃多少，不要对着锅吃。
import { Tabbar, TabbarItem } from 'vant'
import 'vant/lib/index.css'
const plugins = [Tabbar, TabbarItem]
plugins.forEach(p => Vue.use(p))
复制代码在这里我们使用了tabbar组件。
二、配置vuex
这个其实也没啥，但是还是说下。vuex就state,getters,mutations,actions，modules,是的，在这里你需要全用，不要偷懒！！！ 创建index.js、getters.js 文件夹modules，以及modules目录下user.js和app.js。哦，这个初始目录在store目录下哈。
- index.js目录下的代码
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
const store = new Vuex.Store({
modules,
getters
})
export default store
复制代码这里主要说两个地方，一个是require.context()方法，还有下面的那个递归。 require.context有三个参数，分别是要搜索的目录，是否搜索他的子目录，以及正则。 这样就知道是什么意思了。第二个是拿到目录，我们要把vuex分模块。
里边的内容app.js
const state = {
tabbarList: [
{
iconPath: 'https://bocai-kitchen.oss-cn-hangzhou.aliyuncs.com/upload/slider/000/000/001/5f68aa847ba3d749.png',
pagePath: '/pages/shop_index/index',
pageType: 'shopIndex',
selected: true,
selectedIconPath: 'https://bocai-kitchen.oss-cn-hangzhou.aliyuncs.com/upload/slider/000/000/001/5f68aa847bb1c523.png',
text: '首页',
type: '0'
}, {
iconPath: 'https://bocai-kitchen.oss-cn-hangzhou.aliyuncs.com/upload/slider/000/000/001/5f68abe238597280.png',
isSpecial: true,
pagePath: '/pages/my/my_order?store_id=',
pageType: 'page',
selected: false,
selectedIconPath: 'https://bocai-kitchen.oss-cn-hangzhou.aliyuncs.com/upload/slider/000/000/001/5f68abe23867d527.png',
text: '订单',
type: '0'
}, {
iconPath: 'https://bocai-kitchen.oss-cn-hangzhou.aliyuncs.com/upload/slider/000/000/001/5f68aaec7a086601.png',
pagePath: '/pages/plat_menu/my',
pageType: 'myIndex',
selected: false,
selectedIconPath: 'https://bocai-kitchen.oss-cn-hangzhou.aliyuncs.com/upload/slider/000/000/001/5f68aaec7a165817.png',
text: '我的',
type: '0'
}
]
}
const mutations = {
SET_TABBARlIST: (state, tabbarList) => {
state.tabbarList = tabbarList
}
}
const actions = {
}
export default {
namespaced: true,
state,
mutations,
actions
}
复制代码请留意tabbarlist，后边会使用到。
user.js
const state = {
token: ''
}
const mutations = {
SET_TOKEN: (state, token) => {
state.token = token
}
}
const actions = {
}
export default {
namespaced: true,
state,
mutations,
actions
}
复制代码这个是初始。也就没写啥。
三、页面布局
1. 画页面
在view文件中创建layout文件，并在里边创建index.vue 代码如下：
<template>
<div>
<router-view></router-view>
<app-Tabbar></app-Tabbar>
</div>
</template>
<script>
export default {
name: 'layout',
data () {
return {
}
},
created () {
console.log('this.$store', this.$store)
},
mounted () {
console.log('this.$store', this.$store)
},
method () {
}
}
</script>
<style lang="less">
</style>
复制代码在写一个初始的默认页面。 创建index文件，在内部创建index.vue
<template>
<div>这是首页</div>
</template>
<script>
export default {
name: 'index',
data () {
return {
}
},
method () {
}
}
</script>
复制代码请注意这个app-Tabbar组件。
2. 配置router
在routes中新增我们刚才的页面
import Layout from '../views/layout/index.vue'
{
path: '/',
name: 'Layout',
component: Layout,
redirect: '/index',
children: [
{
path: 'index',
component: () => import('@/views/index/index'),
name: 'index'
}
]
},
复制代码上边做了导入和使用
其实，现在已经差不多了，剩下最后的tabbar了
四、自定义组件
在components创建tabbar文件夹，在文件夹中创建index.vue
<template>
<van-tabbar v-model='active'>
<van-tabbar-item v-for="(item,index) in tabbarList" :key="index">
<span :class="active == index?'tabbar-color tabbar-active':'tabbar-color'">{{item.text}}</span>
<template #icon="">
<img :src="active == index ? item.selectedIconPath : item.iconPath" />
</template>
</van-tabbar-item>
</van-tabbar>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'app-Tabbar',
data () {
return {
active: 0
}
},
computed: {
...mapState({
tabbarList: state => state.app.tabbarList
})
}
}
</script>
复制代码代码如上所写，组件没啥说的，大家可以自己看，主要说下，mapState，它的使用方式有两种，一种是数组的，一种是对象的，我现在所使用的就是对象的，原因在于我们拿到的state是一个对象，不能直接解构出在app.js中的tabbarList内容，所以要使用object的方式，导出数据。
写完组件后我们要去使用它，为了方便，我把所有的组件的使用写在了一个文件夹中，components的index.js
import AppTabbar from './tabbar/index.vue'
const components = [AppTabbar]
const install = (Vue) => {
components.map((component) => {
Vue.component(component.name, component)
})
if (typeof Window !== 'undefined' && window.Vue) {
install(Window.Vue)
}
}
export default {
install
}
复制代码代码也很简单，没啥好说的，最后在main.js中使用
const plugins = [globalComponent, Tabbar, TabbarItem]
复制代码写出以上代码，我们就可以运行了
npm run serve
复制代码你的代码运行成功了吗？欢迎留言交流，有问题的可以留下联系方式！！！
公众号：积雷山摩云洞，欢迎关注！！！