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