Краткое введение в mpvue
MPVUE - это фрагментная структура, разработанная командой Meituan, для разработки небольших программ, основанных на ядре Vue.js. Может использовать синтаксис Vue для записи небольших страниц программы. Для передового меня, который может использовать только Vue Family Bucket, это хорошие новости.
Представьте Вантуи
Так как мне было лень, я выбрал UI-фреймворк для экономии времени, на самом деле есть несколько хороших UI-фреймворков, я их сравнил.vant weappОн больше соответствует текущим потребностям, поэтому я в итоге выбрал этот классный UI-фреймворк, но iview и weui тоже хороши, хотя я им никогда не пользовался.
Начало
Сначала установите mpvue
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project
# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev
Для получения более подробной информации вы можете перейтиОфициальный сайт мпвьюПроверьте, больше не скажу.
После установки структура каталогов становится фиолетовой:
# 启动项目
# 可以看到package.json文件可以执行的命令，有微信（wx）、头条(tt)、百度（swan）、支付宝（my）
# 指定平台的开发时构建(微信、百度、头条、支付宝)
$ npm dev:wx
$ npm dev:swan
$ npm dev:tt
$ npm dev:my
Нажмите на инструмент разработчика WeChat, создайте новый проект, выбор каталога - это только что созданный каталог проекта (не каталог dist), обратите внимание на запуск проекта, иначе он сообщит, что app.json не может быть найден
Конфигурация маршрутизации страницы
Если mpvue-запись, настроенная вами, всегда дает сбой, вы можете выбрать лучше настроенное решение.MPV UE.com/MPV UE/быстро…, но поддерживает только апплет WeChat Основное использование
$ npm install -g @vue/cli @vue/cli-init
$ vue init F-loat/mpvue-quickstart my-project
$ cd my-project
$ npm install
$ npm run dev
Что ж, перейдем к мультиплатформенному апплету
1. Установите зависимости
# 安装最新版本的mpvue-entry
cnpm install mpvue-entry@next -D
cnpm install mpvue-router-patch --S
2. Введите mpvue-router-patch Введите mpvue-router-patch в файл main.js в каталоге 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 = {
// 如果要自定义生成的 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: [
// api 统一桥协议方案
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: ['.*']
}
])
]
}
Внедрить структуру пользовательского интерфейса
Установить зависимости
# npm
$ npm i vant-weapp -S --production
# yarn
$ yarn add vant-weapp --production
Настройте vant-weapp в webpack.base.conf.js
mpvue安装下来每个页面都mian.js不方便，也不能使用router。
加上mpvue-entry和mpvue-router-patch后就可以了。
mpvue-entry: 集中式页面配置，自动生成各页面的入口文件，优化目录结构，支持新增页面热更新
mpvue-router-patch: 在 mpvue 中使用 vue-router 兼容的路由写法
Импорт страницы, импорт в app.json
<template>
<div class="container">
<van-search
:value="keywords"
placeholder="请输入搜索关键词"
use-action-slot
@search="onSearch"
>
</div>
</template>
Эффект показан на рисунке:
6. Конец
Ну в принципе настройка UI и роутера решена.Кодить очень утомительно.Про использование flyio напишу в следующей части.Также пишу пока делаю.