打包工具的使用

HBuilder打包

HBuilder打包 是将前端开发的HTML/CSS/JS文件进行打包,打包成可以直接安装在手机上面的App,不借助浏览器就可以直接运行

1. 使用webpack将项目进行打包,打包好的文件会在dist目录
webpack -p

2. 打开Hbuilder,新建移动App项目,然后删掉css/js/imgs文件夹和index.html文件

3. 将使用webpack打包的dist目录里面的文件全部拷贝到新建的移动项目目录中

4. 选中HTML文件,点击HBuilder导航上面的`发行`-`打原生安装包`,直接下一步,选安卓公共证书-`打包`

5. 在项目的`unpackage\release`中可以得到打包完毕的apk文件

cordova打包

直接在本地进行打包

需要电脑配置Java环境和Android环境 (配置方式参考react native课程第一天)

// 1. 安装全局cordova
npm i cordova -g

// 2. 创建cordova项目
cordova create cordova_project

// 3. 添加需要打包的平台
cordova platform add android

// 4. 运行或者打包
cordova run android
cordova build android

vue-cli打包完成后

1. 错误信息:postcss-svgo: Error in parsing SVG: Unquoted attribute value

   • 需要修改mui.css中的 图片引用 单引号全部改成双引号

2. 提示必须使用服务器的方式打开,即使用localhost方式打开

   // 1. 安装http-server
   npm i http-server -g
   // 2. 使用hs -o命令打开index.html文件
   hs -o
   

3. 如果打包完成后希望直接用file协议打开,需要修改config/index.js 中的build下的assetsPublicPath: '/'换成assetsPublicPath: './'

OM节点
v-show:实现元素隐藏显示切换的时候,是操作DOM元素的样式，display:block/display:none

如果元素显示隐藏切换的比较频繁,用v-show
如果元素一开始不显示,后期满足某个条件时才显示,而且切换不频繁,用v-if

// 用v-on给第三方组件绑定事件的时候,有时候不一定能绑上去,需要使用native修饰符

双向数据绑定原理:
M-V:数据劫持,Object.defineProperty,get、set(数组下标改变数据、length属性改变数据、如果数据不是提前在data中进行定义，这三种情况Object.defineProperty都无法进行劫持)
Vue3.0以后使用 ES6 中的Proxy(代理)进行数据劫持
V-M:监听表单元素的change事件

axios:(如何坚持当前js运行环境是Node还是浏览器?直接访问window对象,如果存在是浏览器,如果不存在是node;直接全局访问this,如果是window则是浏览器,如果是undefined则是node)
浏览器平台:XMLHttpRequest
Node平台:http.request()

vue-resource:专门为vue开发的请求库

移动端项目: vue-cli + vuex + axios + mui + mint-ui + 组件传值(父向子用属性传递/子向父用$emit) + watch(监听路由) + vue-loader(深度样式作用选择器/deep/ >>>) + vue-preview(缩略图预览) + flex布局 + vue过渡动画(css类/动画钩子函数) + sass

## HBuilder打包

> HBuilder打包 是将前端开发的HTML/CSS/JS文件进行打包,打包成可以直接安装在手机上面的App,不借助浏览器就可以直接运行

```JavaScript
1. 使用webpack将项目进行打包,打包好的文件会在dist目录
webpack -p

2. 打开Hbuilder,新建移动App项目,然后删掉css/js/imgs文件夹和index.html文件

3. 将使用webpack打包的dist目录里面的文件全部拷贝到新建的移动项目目录中

4. 选中HTML文件,点击HBuilder导航上面的`发行`-`打原生安装包`,直接下一步,选安卓公共证书-`打包`

5. 在项目的`unpackage\release`中可以得到打包完毕的apk文件

cordova打包

直接在本地进行打包

需要电脑配置Java环境和Android环境 (配置方式参考react native课程第一天)

// 1. 安装全局cordova
npm i cordova -g

// 2. 创建cordova项目
cordova create cordova_project

// 3. 添加需要打包的平台
cordova platform add android

// 4. 运行或者打包
cordova run android
cordova build android

vue-cli打包完成后

1. 错误信息:postcss-svgo: Error in parsing SVG: Unquoted attribute value

   • 需要修改mui.css中的 图片引用 单引号全部改成双引号

2. 提示必须使用服务器的方式打开,即使用localhost方式打开

   // 1. 安装http-server
   npm i http-server -g
   // 2. 使用hs -o命令打开index.html文件
   hs -o
   

3. 如果打包完成后希望直接用file协议打开,需要修改config/index.js 中的build下的assetsPublicPath: '/'换成assetsPublicPath: './'