微信小程序mpvue vantUI flyio vuex入坑(1)

Mpvue是美团团队开发的基于vue.js core的小程序开发前端框架，可以使用vue语法编写小程序页面。对我来说是个好消息，只知道vue bucket的前端。

介绍一下vantUI

选择UI框架是为了节省时间，因为它比较懒。事实上，有几个好的UI框架。和Vantwapp相比，更符合现在的需求，所以我最终选择了这个牛逼的UI框架，但是iview和weui也不错，虽然我从来没有用过。

起步

首先安装一个mpvue。

#全局安装vue-CLI $ NPM安装-全局vue-CLI #基于mpvue-quick start $ vueint mpvue/mpvue-quick start my-project的模板创建一个新项目#依靠安装$ cd my-project$ npm安装#开始构建$ NPM运行dev复制代码。更多详情可以去Mpvue官网查看，我就不多说了。

安装后，目录结构为紫色：

它看起来与通常的vue项目没有太大区别。

#启动项目$ npm运行dev复制代码，点击微信开发者工具，新建一个项目，选择项目目录下的dist文件夹，打开项目，会看到项目默认页面。

引入UI框架

研究了很多，尝试了Mppvue-zanUI。最后，我放弃了。我把从git下载的vantUI的dist直接复制到了我的项目的dist目录下，我自己把文件名也改名为vant。图：

介绍完了，想用就直接介绍。

使用组件： { '货车搜索' : '././vant/search/index '，' van-col': '././vant/col/index '，' van-row': '././vant/row/index '，Van-icon' : '././vant/icon/index'}复制代码mpvue。不方便在每一页安装mian.js，也不能使用路由器。添加mpvue入口和mpvue路由器补丁。Mpvue-entry:集中页面配置，自动生成每页的入口文件，优化目录结构，支持新页面热更新。mpvue-router-patch3360使用vue-router兼容的路由写入来复制mpvue中的代码。1.安装依赖项。

Cnpm安装MPV UE-条目-d cnpm安装MPV UE-路由器-补丁-s复制代码2。创建路由器文件

在src目录中创建路由器文件夹复制代码

3.引入mpvue-router-patch将mpvue-router-patch引入src目录中的main.js文件。

1026/0UU21392-3.jpg" />

4、修改webpack的配置

修改webpack.base.conf.js的配置

var path = require('path')var fs = require('fs')var utils = require('./utils')var config = require('../config')var vueLoaderConfig = require('./vue-loader.conf')var MpvuePlugin = require('webpack-mpvue-asset-plugin')var glob = require('glob')var CopyWebpackPlugin = require('copy-webpack-plugin')var relative = require('relative')const MpvueEntry = require('mpvue-entry')function resolve (dir) {  return path.join(__dirname, '..', dir)}// function getEntry (rootSrc) {//   var map = {};//   glob.sync(rootSrc + '/pages/**/main.js')//   .forEach(file => {//     var key = relative(rootSrc, file).replace('.js', '');//     map[key] = file;//   })//    return map;// }// const appEntry = { app: resolve('./src/main.js') }// const pagesEntry = getEntry(resolve('./src'), 'pages/**/main.js')// const entry = Object.assign({}, appEntry, pagesEntry)const entry = MpvueEntry.getEntry('./src/router/router.js')module.exports = {  // 如果要自定义生成的 dist 目录里面的文件路径，  // 可以将 entry 写成 {'toPath': 'fromPath'} 的形式，  // toPath 为相对于 dist 的路径, 例：index/demo，则生成的文件地址为 dist/index/demo.js  entry,  target: require('mpvue-webpack-target'),  output: {    path: config.build.assetsRoot,    filename: '[name].js',    publicPath: process.env.NODE_ENV === 'production'      ? config.build.assetsPublicPath      : config.dev.assetsPublicPath  },  resolve: {    extensions: ['.js', '.vue', '.json'],    alias: {      'vue': 'mpvue',      '@': resolve('src')    },    symlinks: false,    aliasFields: ['mpvue', 'weapp', 'browser'],    mainFields: ['browser', 'module', 'main']  },  module: {    rules: [      {        test: /\.(js|vue)$/,        loader: 'eslint-loader',        enforce: 'pre',        include: [resolve('src'), resolve('test')],        options: {          formatter: require('eslint-friendly-formatter')        }      },      {        test: /\.vue$/,        loader: 'mpvue-loader',        options: vueLoaderConfig      },      {        test: /\.js$/,        include: [resolve('src'), resolve('test')],        use: [          'babel-loader',          {            loader: 'mpvue-loader',            options: {              checkMPEntry: true            }          },        ]      },      {        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,        loader: 'url-loader',        options: {          limit: 10000,          name: utils.assetsPath('img/[name].[ext]')        }      },      {        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,        loader: 'url-loader',        options: {          limit: 10000,          name: utils.assetsPath('media/[name].[ext]')        }      },      {        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,        loader: 'url-loader',        options: {          limit: 10000,          name: utils.assetsPath('fonts/[name].[ext]')        }      }    ]  },  plugins: [    new MpvuePlugin(),    new MpvueEntry(),    new CopyWebpackPlugin([{      from: '**/*.json',      to: ''    }], {      context: 'src/'    }),    new CopyWebpackPlugin([      {        from: path.resolve(__dirname, '../static'),        to: path.resolve(__dirname, '../dist/static'),        ignore: ['.*']      }    ])  ]}复制代码

webpack主要就是这些配置改动了。

5、配置router.js，并在对应的页面使用UI组件

我就直接上代码了

module.exports = [  {    path: 'pages/index/index',    name: 'index',    config: {      navigationBarTitleText: '首页',      enablePullDownRefresh: true,      usingComponents: {        'van-search': '../../vant/search/index',        'van-col': '../../vant/col/index',        'van-row': '../../vant/row/index',        'van-icon': '../../vant/icon/index'      }    }  }]

页面引入

<template>  <div class="container">    <van-search      :value="keywords"      placeholder="请输入搜索关键词"      use-action-slot      @search="onSearch"    >  </div></template>

效果如图：

6、结束

好了基本上UI和router的配置就解决了，码字好累，下篇接着写flyio的使用，我也是边做边写，有问题的可以一起探讨。