mobileBasicVue: A JavaScript repository from fangxiaoxingit

## 基于 vue-cli 的移动项目开发基础模板整合

使用说明

node,npm 已安装，clone 本地后：

npm install

npm run dev

2020-01-07 更新

新增 Clean-Webpack-Plugin ，配置 Webpack ，Build 前清除 Dist 文件内容；新增浏览器收藏图标 favicon.Ico Build

2020-01-06 更新

新增分支：合并了分支，采用 pxtorem 方式；全局less样式，使用的是 sass-resources-loader ，注意如下配置

less: generateLoaders('less').concat({
	loader: 'sass-resources-loader',
	options: {
		resources: path.resolve(__dirname, '../src/assets/theme/theme.less')
	}
}),

原因：可以直接使用 750px 的设计稿，编写 css 时，直接使用 px 单位，通过 postcss-pxtorem 转换成 rem 适配。根元素的 fontSize 通过 rem.js 设置（可具体查看代码内容）；

main.js 内增加：

import "./assets/js/rem"

主要添加了 reset.css ,引入阿里 iconfont ,已经分类好的文件结构，加入了移动端适配方式，加入 less，搭建了基本的开发框架结构，可直接使用，UI 框架可在后面选择合适的，整个本身没有难度，只是方便自己开发整合一下。

如有纰漏及疑问，邮件联系：onlyfangsiyu@163.com

2018-07-27 更新

新增分支：pxtorem

main.js 内增加：

import "./assets/js/rem"

需要安装：$ npm install postcss-pxtorem

并在 .postcssrc.js 的 plugins 里面添加如下代码：

"postcss-pxtorem": {
  "rootValue": 32,
  "propList": ["*"],
  // 注意：如果有使用第三方UI如VUX，则需要配置下忽略选择器不转换。
  // 规则是class中包含的字符串，如vux中所有的class前缀都是weui-。也可以是正则。
  "selectorBlackList": ["weui-"]
}

说明

样式部分

1. reset.css 最好自己看一遍，熟悉一下，添加自己的东西

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

个人感觉里面还有可添加的内容，比如输入框各个浏览器默认的 outline 样式等

2. 如果你用 less 写，你需要安装 less-loader,其他同理

npm install --save-dev less-loader less

同时在 webpack.base.conf 里面增加

{
        test: /\.less$/,
        loader: 'style-loader!css-loader!less-loader'
      }

3. 可能你还要一个 base.less ，定义一些设计给的标准（最好要一下设计标准，或者自己提取一些设计稿中的相同元素设定）

// 颜色定义规范
@color-theme: #42b983;
@color-background: #222;
@color-text: #fff;
@color-btn: #42b983;

4. 阿里 iconfont 的使用

具体可以参考官方文档，推荐 font-class 引用的方式使用（代码里可读性更好），注意修改 css 路径和在 main.js 内加入

import "./assets/fonts/iconfont.css"

5. 各移动端适配

采用 iphone 6/7/8 的 750px 设计稿为标准（和设计对接好） js独立在 fitMobile.js 里面（参考网络）

// 根据设备设置 html 的 fontsize
var fitMobile = function () {
    var docEl = document.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; //设计稿750px宽
        };
    if (!document.addEventListener) return;
    window.addEventListener(resizeEvt, recalc, false);
    document.addEventListener('DOMContentLoaded', recalc, false);
}

export {fitMobile};

main.js 里面引入

//引入移动端适配 js
import {fitMobile} from "./assets/js/public"
Vue.use(fitMobile);

其中的 ==docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'== 的数值 750 是设计稿尺寸，可以自己更改，这样 1rem 对应设计稿上 100px,

6. 图片资源

统一放在 assets 下的 images 下；

基本样式部分结束；

全局样式：index.less
局部样式：写在各自文件里或者你直接写 index.less，后面也可以，也方便维护，看个人喜好

跨域配置

目前我这边遇到过两种情况：

项目允许跨域，这个好办，后台解决就行
本身项目就不允许跨域的，调用测试环境接口时会出问题，后台也没必要修改，毕竟上线了还要改回去，前端解决，设置 webpack 如下：在 config 文件夹 index.js 里面修改 proxyTable 内容：

proxyTable: {
      '/mobile': { //根路经
        target: 'http://XXX.XXX.XX.XX:XX', // 测试域名
        secure: false, //如果是https接口，需要配置这个参数
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        pathRewrite: {
          '^/mobile': '/mobile'  //重写接口
        }
      }
    },

接口，域名的配置

1.本地配置

    host: 'localhost', // run 之后的访问域名，可设置成电脑 ip 方便局域网手机输入地址测试
    port: 8080, // 端口号
    autoOpenBrowser: true, // npm run dev 之后可以自动打开默认浏览器调试

2.测试，生产环境配置

    //dev.env.js
    module.exports = merge(prodEnv, {
		NODE_ENV: '"development"',
		API_ROOT: '"//192.168.1.111/api"'  //配置开发环境地址
	})

	//prod.env.js
    module.exports = merge(prodEnv, {
		NODE_ENV: '"development"',
		API_ROOT: '"//www.google.com/api"'  //配置开发环境地址
	})

Hbuild 打包 APP

（当然你也可以用其他工具，比如：Cordova）

根据官网论坛里面提到的，需要修改 config 文件夹 index.js 里面修改 build 内容：

assetsPublicPath: './',

是的，就是在前面加个 . 即可，然后正常 build 之后，放进 hbuild 正常操作即可；

fangxiaoxingit/mobileBasicVue