怎么制作一个广元的手机站首页

一般在中国三四线不太会做本地的app,因为投资收益算不过账。今天我就给广元这个4、5线城市做个站点，先不聊业务，先看看技术是怎么实现的。

移动端页面展现形式可以很多种公众号，小程序，app等。我这里用vue+mint-ui的方式来制作。为什么我选用这个技术呢，因为公众号与小程序都可以用web技术来实现，而app也可以其于web再加一些中间工具(如uni-app)实现。

一、构思与设计

首先要考虑app要分那些模块，经过参考多个app,发现基本都有的模块有四块。

1.首部搜索框

2.分类标签或图标

3.主营商品/内容

4.底部工具菜单

第1块与第4块的组件都可以从mint-ui找到。

第2块与第3块的内容需要自己实现，当然也可以网上搜一些参考例子。

因为只有我一个人来做这个，没有设计和运维。那么图片与部署从简，图片自己用mac自带的照片等工具处理，部署到云服务器的tomcat里即可。

二、实现

vue的环境搭建在前面的视频里已经讲过，今天直接使用初始化命令，安装mint-ui

vue init webpack projectname

npm install mint-ui -S

npm install babel-preset-es2015 --save-dev


npm install babel-plugin-component -D

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "mint-ui",
        "style": true
      }
    ]
  ]
}

三、注意事项

1.vue中title的修改。

在main.js中添加：

// 设置浏览器标题
Vue.directive('title', {
  inserted: function (el, binding) {
    document.title = el.dataset.title
  }
})

这段代码要在new Vue之前，否则会出问题。

<div  v-title data-title="广元服务网首页">

2.滚动条的设置

3.mint-ui默认样式的修改,深度查找样式

.mint-search >>> .mint-searchbar {
    background-color:#fafafa !important;
}
.mint-search >>> .mint-searchbar-cancel{
  color:#949293;
}