Mui-Vue-Pug-Sass-Starter Mui-Vue-Pug-Sass-Starter

本文做为个人近几个月接触 Mui 的总结，主要通过 Vue 来模块化开发

NodeJs & cnpm 此部分跳过，请自行脑补
Vue-Cli 全局安装

cnpm install --global vue-cli

初始化Vue

vue init webpack mui-vue-pug-sass-starter

PS: vue-router 这一步，输入 n，其余全部默认

? Project name mui-vue-pug-sass-starter
? Project description A Vue.js project
? Author jun
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run npm install for you after the project has been created? (recommended) npm

要最大化利用 Webview 运行效率，采用 Mpa 方案来进行 Vue 的开发，所以关闭 vue-router
漫长的等待后...
配置篇安装所需依赖

cnpm install --save-dev glob node-sass sass-loader pug pug-loader pug-filters clean-webpack-plugin
cnpm install --save axios
cnpm install

目录结构

+-- builder +-- config +-- src |+-- app // 多页面入口，每个目录为一个页面，build 输出以目录为名的 html ||+-- page1 |||--- App.vue// 主模块 |||--- page1.js// 入口，文件名同目录名 |||--- page1.pug// html 模板，文件名同目录名 ||+-- page2 ||+-- ... |+-- assets// 存放一些公共静态文件及 js 库 ||+-- img ||+-- js ||+-- sass |+-- components// 公共 vue 组件目录 +-- static |--- mui.min.css// 需修改 mui.ttf 路径为 ./ |--- mui.min.js |--- mui.ttf

修改 Vue 为 Mpa 多页面入口模式
为最大化利用 Webview，需修改 Vue 为多页面入口模式
build/utils.js

添加输出遍历多页面入口的函数

// 使用glob模块遍历导入多页面入口 const glob = require('glob')exports.entries = (globPath) => { let entries = {}, baseName, tmp, pathName glob.sync(globPath) .forEach(entry => { baseName = path.basename(entry, path.extname(entry)) tmp = entry.split('/').splice(-3) pathName = tmp.splice(0, 1) + '/' + baseName entries[pathName] = entry }) return entries }

build/webpack.base.conf.js

修改 module.exports.entry

/** * 遍历 app 目录中所有子目录，生成多页面入口 */ entry: utils.entries('./src/app/**/*.js'),

build/webpack.dev.conf.js

注释掉单页面入口

/* 关闭单页面入口 new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true }), */

在最后添加多页面入口代码段

// 多页面入口配置 let templates = utils.entries('./src/app/**/*.pug') for (let pathName in templates) { let conf = { filename: pathName + '.html', template: templates[pathName], inject: true, chunksSortMode: 'dependency' } if (pathName in devWebpackConfig.entry) { conf.chunks = ['manifest', 'vendor', pathName] conf.hash = true } devWebpackConfig.plugins.push(new HtmlWebpackPlugin(conf)) }

build/webpack.prod.conf.js

注释掉单页面入口代码段

/* 关闭单面页入口 new HtmlWebpackPlugin({ filename: process.env.NODE_ENV === 'testing' ? 'index.html' : config.build.index, template: 'index.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency' }), */

在最后添加多页面入口代码段

// 多页面入口配置 let templates = utils.entries('./src/app/**/*.pug') for (let pathName in templates) { let conf = { filename: pathName + '.html', template: templates[pathName], inject: true, chunksSortMode: 'dependency' } if (pathName in module.exports.entry) { conf.chunks = ['manifest', 'vendor', pathName] conf.hash = true } module.exports.plugins.push(new HtmlWebpackPlugin(conf)) }

配置 pug
build/webpack.base.conf.js

在 module.exports.module.rules 中添加 pug 定义

{ test: /\.pug$/, loader: 'pug-loader' },

其它配置
build/utils.js

修正 css 中引入外部文件（如字体、图片等）路径问题

// Extract CSS when that option is specified // (which is the case during production build) if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', /** * 修正css 引入外部字体、图片等路径 */ publicPath: '../../../' }) } else { return ['vue-style-loader'].concat(loaders) }

build/webpack.base.conf.js

定义路径别名 module.exports.resolve

resolve: { extensions: ['.js', '.vue', '.json', 'scss', 'css'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'assets': resolve('src/assets'), 'components': resolve('src/components'), 'js': resolve('src/assets/js'), 'img': resolve('src/assets/img'), '@img': resolve('src/assets/img'), '@fonts': resolve('src/assets/fonts'), '@sass': resolve('src/assets/sass') } },

build/webpack.prod.conf.js

run build 时自动清空 dist 目录

// 在头部 require const CleanPlugin = require('clean-webpack-plugin') // 在 const webpackConfig 代码段中的 plugins 数组内添加如下代码 // build时清空dist目录 new CleanPlugin(['../dist']),

config/index.js

修正 run build 后的 html 页面内的路径问题

// module.exports.build.assertsPublicPath assetsPublicPath: '../',

package.json

修改 browserslist 项，自动适配浏览器

"browserslist": [ "> 1%", "not ie <= 8", "iOS >= 7", "Android > 4", "Firefox > 20", "last 5 versions" ]

应用篇关于 ESLint

本文配置项中已开启 ESLint Standard 的支持，目的为规范代码的编写，具体 ESLint 的作用和用法，请自行脑补

vue 如何整合 mui ？
经过多次试验，最终还是在主html模板中引入mui这种方式最为合适

复制 mui.min.js、mui.min.css、mui.ttf 到 static 目录
需要修改 mui.min.css 中 mui.ttf 的路径为 ./mui.ttf

创建页面入口

src/app 目录为所有页面入口，每一个子目录代表一个页面，包含一个主模板、一个入口JS、一个主VUE模块

范例（基于 Webview 的 tab bar）

在 src/app 目录下新建 index 目录和 nav 目录

+-- src |+-- app ||+-- index ||+-- nav

新建 index 模块

// src/app/index/index.pug // 主模板，文件名称需和目录名一致doctype html html head meta(charset='UTF-8') title index meta(name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no') link(rel="stylesheet", href="https://www.it610.com/static/mui.min.css") body script(src='https://www.it610.com/static/mui.min.js') #app

// src/app/index/index.js // 入口文件，需和目录名一致 // 基本所有入口文件都可如下一致import Vue from 'vue' import App from './App'// eslint-disable-next-line new Vue({ el: '#app', components: { App }, template: '' })

// src/app/index/App.vue // 主模块文件

因 mui 是在主模板中 script src 引入，在模块和入口里没有定义，需在 script 段第一行加入 /* global mui / 将mui全局化，如不加这一行，编译时会报错，如果用到了 plus ，则为 / global mui plus */

mui.init 或 mui.plusReady 等初始化函数，需写入 vue 生命周期 mounted 内

新建 nav 模块

可以直接将 src/app/index/index.js 和 src/app/index/index.pug 复制到 src/app/nav 目录下，并分别改名为 nav.js 和 nav.pug，这两个文件的内容可以不改动

// src/app/nav/App.vue

本示例中应用到了 vue 的特性，v-on:tap, v-bind:class, v-for

新建 home 模块

同 nav 模块，可直接复制 pug 与 js 文件到 src/app/home

// src/app/home/App.vue

新建 axios 模块

同上操作复制 pug 与 js 到 src/app/axios 目录
本示例示范 vue 官方推荐的 ajax 库 axios 的简单操作
点击查看 axios 中文文档

// src/app/axios/App.vue

至此，一个简单的，基于 Vue 的 mui 模块化开发示范大体结束

调试篇

npm run build
输入上面一行命令，将我们的开发成果 build 出成品

HBuilder 入场
请出我们久违了的 HBuilder，开始调试我们的成果

HBuilder >> 文件菜单 >> 选择目录

选择 build 后生成的 dist 目录，并起个项目名称，然后完成

左侧项目管理器中，鼠标右键点击上一步完成后出现的项目，选择右键菜单中 “转换成移动App”，此时，HBuilder 将会在 dist 目录下添加 manifest.json 文件

HBuilder 中打开 manifest.json 开始配置我们的 App，请注意要选择一下页面入口这一项，这里我们设置成 app/index.html

其他相关 manifest.json 的设置请参照 dcloud 官方文档

至此，本文档大体结束，可以按照我们之前的操作习惯在 HBuilder 中进行真机测试了。