微信小程序mpvue+vantUI+flyio+vuex入坑(1)
mpvue是美團(tuán)團(tuán)隊(duì)開(kāi)發(fā)的一個(gè)基于vue.js核心開(kāi)發(fā)小程序的前端框架，可以使用vue的語(yǔ)法來(lái)寫(xiě)小程序頁(yè)面。對(duì)于我這種只會(huì)vue全家桶的前端來(lái)說(shuō)，算是福音了。
介紹一下vantUI
因?yàn)楸容^懶，就選了一個(gè)UI框架來(lái)節(jié)省時(shí)間，其實(shí)有幾個(gè)不錯(cuò)的UI框架，對(duì)比了一下vant weapp比較符合當(dāng)前需求，所以最后選用了這個(gè)有贊的UI框架，不過(guò)iview和weui也不錯(cuò)，雖然我沒(méi)用過(guò)
起步
首先先安裝一個(gè)mpvue
# 全局安裝 vue-cli $ npm install --global vue-cli # 創(chuàng)建一個(gè)基于 mpvue-quickstart 模板的新項(xiàng)目 $ vue init mpvue/mpvue-quickstart my-project # 安裝依賴(lài) $ cd my-project $ npm install # 啟動(dòng)構(gòu)建 $ npm run dev 復(fù)制代碼
更多詳情可以自己去Mpvue官網(wǎng) 查看，我就不多說(shuō)了。
安裝好了之后目錄結(jié)構(gòu)是醬紫的：
看起來(lái)和平常的vue項(xiàng)目沒(méi)太大區(qū)別
# 啟動(dòng)項(xiàng)目 $ npm run dev 復(fù)制代碼
點(diǎn)開(kāi)微信開(kāi)發(fā)者工具，新建項(xiàng)目，目錄選擇項(xiàng)目下的dist文件夾，打開(kāi)項(xiàng)目，會(huì)看到項(xiàng)目默認(rèn)頁(yè)面
引入U(xiǎn)I框架
研究了很多，也試過(guò)了Mpvue-zanUI，最后還是放棄了，直接把git上下載的vantUI的dist拷貝到自己項(xiàng)目的dist目錄下，我自己重命名了文件名為vant。如圖：
引入之后，要使用的話(huà)就直接引入就好了
usingComponents: {
'van-search': '../../vant/search/index',
'van-col': '../../vant/col/index',
'van-row': '../../vant/row/index',
'van-icon': '../../vant/icon/index'
}
|
mpvue安裝下來(lái)每個(gè)頁(yè)面都mian.js不方便，也不能使用router。 加上mpvue-entry和mpvue-router-patch后就可以了。 mpvue-entry: 集中式頁(yè)面配置，自動(dòng)生成各頁(yè)面的入口文件，優(yōu)化目錄結(jié)構(gòu)，支持新增頁(yè)面熱更新 mpvue-router-patch: 在 mpvue 中使用 vue-router 兼容的路由寫(xiě)法 復(fù)制代碼
1、安裝依賴(lài)
cnpm install mpvue-entry --D
cnpm install mpvue-router-patch --S
復(fù)制代碼
2、創(chuàng)建router文件
在src目錄下創(chuàng)建router文件夾 復(fù)制代碼
3、引入mpvue-router-patch 在src目錄下的main.js文件里引入mpvue-router-patch
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 寫(xiě)成 {'toPath': 'fromPath'} 的形式，
// toPath 為相對(duì)于 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主要就是這些配置改動(dòng)了。
5、配置router.js，并在對(duì)應(yīng)的頁(yè)面使用UI組件
我就直接上代碼了
module.exports = [
{
path: 'pages/index/index',
name: 'index',
config: {
navigationBarTitleText: '首頁(yè)',
enablePullDownRefresh: true,
usingComponents: {
'van-search': '../../vant/search/index',
'van-col': '../../vant/col/index',
'van-row': '../../vant/row/index',
'van-icon': '../../vant/icon/index'
}
}
}]
|
頁(yè)面引入
<template>
<div class="container">
<van-search
:value="keywords"
placeholder="請(qǐng)輸入搜索關(guān)鍵詞"
use-action-slot
@search="onSearch"
>
</div>
</template>
|
效果如圖：
6、結(jié)束
好了基本上UI和router的配置就解決了，碼字好累，下篇接著寫(xiě)flyio的使用，我也是邊做邊寫(xiě)，有問(wèn)題的可以一起探討。
