• Wechat mini program mpvue+vantUI+ Flyio +vuex into the pit (2)
  • Wechat mini program mpvue+vantUI+ Flyio +vuex into the pit (3)

A brief introduction to MPVue

Mpvue is a front-end framework developed by Meituan team based on vue. Js core development applet, which can use vUE syntax to write applet pages. Good news for a vUE bucket front end like me.

Introduce vantUI

I used a UI framework that I felt I could do something to save time. I did a bit of research on vant appellate APP I did, but IView and weUI are also great, although I haven’t used them yet

start

Start by installing an MPvue

# Global install VUE - CLI
$ npm install --global vue-cli

Create a new project based on the MPvue-QuickStart template
$ vue init mpvue/mpvue-quickstart my-project

# install dependencies
$ cd my-project
$ npm install
# start build
$ npm run dev
Copy the code

For more details, you can go to Mpvue’s official website. I won’t say more.

Once installed, the directory structure looks like this:

# Start a project
# You can see the commands that can be executed in package.json file, including wechat (WX), Toutiao (TT), Baidu (swan), Alipay (my).
# Build specified platform during development (wechat, Baidu, Toutiao, Alipay)
$ npm dev:wx
$ npm dev:swan
$ npm dev:tt
$ npm dev:my
Copy the code

Click the wechat developer tool to create a new project, and the directory is the newly created project directory (non-dist directory). Note that the project should be started, otherwise app.json will not be found

Page Routing Configuration

If the self-configured MPvue-entry always fails, you can choose a well-configured solution such as mpvue.com/mpvue/quick… , but only support the basic use of wechat small program

$ npm install -g @vue/cli @vue/cli-init
$ vue init F-loat/mpvue-quickstart my-project
$ cd my-project
$ npm install
$ npm run dev
Copy the code

Okay, let’s move on to the multiplatform applet

1. Install dependencies

    Install the latest version of MPvue-Entry
    cnpm install mpvue-entry@next -D
    cnpm install mpvue-router-patch --S
Copy the code

2. Import mpvue-router-patch. Import mpvue-router-patch in main.js under SRC

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/app.json'Module.exports = {// If you want to define the file path in the generated dist directory, // you can write entry as {'toPath': 'fromPath'Dist /index/demo.js entry, target: require(dist/index/demo.js entry)'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'.The '@': 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: [// API unified bridge protocol new webpack.defineplugin ({'mpvue': 'global.mpvue'.'mpvuePlatform': 'global.mpvuePlatform'
    }),
    new MpvuePlugin(),
    new MpvueEntry()
    // new CopyWebpackPlugin([{
    //   from: '**/*.json',
    //   to: ' '
    // }], {
    //   context: 'src/'
    // }),
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '.. /static'),
        to: path.resolve(config.build.assetsRoot, './static'),
        ignore: ['*']}])]}Copy the code

Introducing a UI framework

Install dependencies

# npm
$ npm i vant-weapp -S --production

# yarn
$ yarn add vant-weapp --production
Copy the code

Configure vtant-pervasive P in webpack.base.conf.js

Mpvue is not convenient for installing mian.js on every page, nor is it possible to use router. Add mpVUe-entry and mpvue-router-patch. Mpvue-entry: centralized page configuration, automatically generates entry files for each page, optimizes directory structure, and supports hot update of new pages. Mpvue-router-patch: uses vue-router-compatible routes in MPvueCopy the code

Page import, in app.json

<template>
  <div class="container">
    <van-search
      :value="keywords"
      placeholder="Please enter your search terms"
      use-action-slot
      @search="onSearch"
    >
  </div>
</template>
Copy the code

The effect is as follows:

End of 6,

Ok basically UI and router configuration is solved, code word is very tired, next to write the use of Flyio, I also do while writing, have a question can discuss together.