2022-01-25 17:23:47 栏目: APP开发
目录
持续更新中学到一点写一点
Vuex学习
每一个 Vuex 应用的核心就是 store仓库。“store”基本上就是一个容器它包含着你的应用中大部分的状态 (state)。你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。
/zh/guide/
npm install vuex --save
项目的适配
因为移动端设备屏幕大小屏幕比例什么的差别比较大所以移动端项目的适配问题就显得尤为重要这里我们主要使用flexible.js进行适配
引入flexible.js在main.js里引入flexible.js文件可将flexible.js作为静态文件放在最外层static文件夹里引入如下图
1、window.location.hrefURL 在本窗体打开一个新的页面也是最常用的一种方法
2、window.open(URL) 在一个新的窗口打开一个新的页面
3、location.replace(URL) 本窗口的页面被替换为一个新的页面URL替换后不可以回退到上个页面
4、localtion.assign(URL) 本窗口的页面转为为一个新的页面URL与上一方法类似但此方法可回退至上一页面。
执行过程当用户点击 router-link 标签时会去寻找它的 to 属性 它的 to 属性和 js
中配置的路径{ path: ‘/home’, component: Home} path 一一对应从而找到了匹配的组件 最后把组件渲染到
标签所在的地方。
vue.config.js配置文件
vue.config.js 是一个可选的配置文件如果项目的 (和 package.json 同级的) 根目录中存在这个文件那么它会被 vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段但是注意这种写法需要你严格遵照 JSON 的格式来写。
H5与app的区别
H5就是移动端的web手机的浏览器所以vue开发的app是基于h5的基于手机浏览器的虽然后面打包成app但实际是运行在手机提供的浏览器上的。
原生app是用java写的android studio写的。
vue编译成h5 h5打包成appapp运行在手机浏览器上。
SVG
可缩放矢量图形Scalable Vector Graphics使你能够使用一组矢量与形状来描述图片在显示时可提供无关大小的零失真的平滑缩放。
调用h5接口使用手机功能。
/qianlixiaomage/article/details/104622151
1.安装库
cnpm i vue-awesome-mui -S
如果没有cnpm那就npm吧
2、引入Mui
main.js中引入
import Mui from ‘vue-awesome-mui’;
Vue.config.productionTip false
Vue.use(Mui);
在new Vue中添加上Mui
3、完成1、2、就可以在后面的vue文件中直接引用plus了。
注意
plus只能在手机上使用所以浏览器run dev没有使用。连接手机调试才能看到效果
mint ui 实在太难用开发者文档也没有演示的结果。决定用vant ui。
npm install vant -S
import Vant from ‘vant’
import ‘vant/lib/index.css’
Vue.use(Vant)
记得导入css。
van滑动单元格踩坑
官方文档中template #right,不行要改成slot“right”
van-swipe-cell right-width65van-cardnumprice更新至xxxdesc简介:七城战乱邪神复苏的阴影笼罩在赤色大陆上空家族争斗对抗怪物阶级跨越人类一切的阴谋与仇恨皆指向永夜传说指向人与时间的诅咒。title小说名classgoods-cardthumb/vant/cat.jpegclickreading/template slotrightvan-button square text删除 typedanger classdelete-button /!-- van-button square typeprimary text收藏 / --/template/van-swipe-cell电脑浏览器怎么访问网页的手机端呢?
打开开发者工具elements旁边有两个小手机框框就可以切换成H5端.
Hbuilderx创建5app项目
指向编译出来的dist
连接真机调试
打包直接把dist下面的所有文件复制到5app项目下运行/打包即可。
真机调试菜单-运行-运行到手机/模拟器-xxx手机
打包apk发布
选择发行》原生App云打包然后选择打android的包有ios的证书也可以打包为iosandroid可以用免费的公用证书开发者直接使用即可具体选择如下然后接下来等待即可。稍微等待之后打包成功之后会返回apk下载文件的下载链接点击链接把apk文件下载下来然后发送到自己的android手机安装在自己的手机上即可。
之前一直用AngularJS进行开发最近打算系统学习Vue.js。下面主要是我学习过程中心得的总结和遇到的技术难点
- Vue-cli 搭建基本项目结构
- vue-router 实现路由管理
- vue-resource 实现ajax通信
1.vue.js 2.x 版本脚手架中没有dev-server.js 如何进行数据模拟 点这里 2.新建项目
vue init webpack vuetest(vuetest为项目名称)复制代码3.安装依赖
安装sass:cnpm install node-sass --save-devcnpm install sass-loader --save-dev安装vuex:cnpm install vuex --save复制代码1、安装依赖包cnpm install vue-resource --save2、进行ajax请求{ // GET /someUrl this.$http.get(/someUrl).then(response {// get body datathis.someData response.body;}, response {// error callback });}复制代码mapState mapActions
1、localhost:8080/#/goods 改成 http://192.168.0.79:8080/#/goods2、在 https://cli.im/text?c4a9982bce94d4d7e34217b287da6599 将http://192.168.0.79:8080/#/goods 生成二维码 通过手机扫描二维码即可看到页面。复制代码!doctype htmlhtml langen\thead\t\tmeta charsetUTF-8\t\tmeta nameviewport contentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0\t\tmeta http-equivX-UA-Compatible contentieedge\t\ttitleSticky footer/title\t\tlink relstylesheet hrefcss/icon.css /\t\tstyle typetext/css.clearfix {display: inline-block;}.clearfix:after {display: block;content: ;height: 0;line-height: 0;clear: both;visibility: hidden;}.detail {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 100;overflow: auto;background: rgba(7, 17, 27, 0.8);}.detail-wrapper {width: 100%;/*让它最小高度能充满整个屏幕*/min-height: 100%;}.detail-main {margin-top: 64px;padding-bottom: 64px;}.detail-close {position: relative;width: 32px;height: 32px;clear: both;font-size: 32px;margin: -64px auto 0 auto;}\t\t/style\t/head\tbody\t\tdiv classdetaildiv classdetail-wrapper clearfixdiv classdetail-main/div/divdiv classdetail-closei classicon-close/i/div\t\t/div\t/body/html复制代码1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text-align等)4.背景(background, border等)5.其他(animation, transition等)复制代码import ./style/common.scss复制代码结果beforeCreate 创建前状态》lifecycle.html:23 el: undefinedlifecycle.html:24 data : undefinedlifecycle.html:25 message: undefinedlifecycle.html:28 created 创建完毕状态》lifecycle.html:29 el: undefinedlifecycle.html:30 data : [object Object]lifecycle.html:31 message: xuxiao is boylifecycle.html:34 beforeMount 挂载前状态》lifecycle.html:35 el: [object HTMLDivElement]lifecycle.html:36 div idapp…/divlifecycle.html:37 data : [object Object]lifecycle.html:38 message: xuxiao is boylifecycle.html:41 mounted 挂载结束状态》lifecycle.html:42 el: [object HTMLDivElement]lifecycle.html:43 div idapp…/divlifecycle.html:44 data : [object Object]lifecycle.html:45 message: xuxiao is boy复制代码!DOCTYPE htmlhtmlheadtitle/titlemeta charsetutf-8/script typetext/javascript src/vue/2.1.3/vue.js/script/headbodydiv idappp{{ message }}/p/divscript typetext/javascriptvar app new Vue({el: #app,data: {message : xuxiao is boy},beforeCreate: function () {console.group(beforeCreate 创建前状态》);console.log(%c%s, color:red , el: this.$el); //undefinedconsole.log(%c%s, color:red,data : this.$data); //undefinedconsole.log(%c%s, color:red,message: this.message)},created: function () {console.group(created 创建完毕状态》);console.log(%c%s, color:red,el: this.$el); //undefinedconsole.log(%c%s, color:red,data : this.$data); //已被初始化console.log(%c%s, color:red,message: this.message); //已被初始化},beforeMount: function () {console.group(beforeMount 挂载前状态》);console.log(%c%s, color:red,el: (this.$el)); //已被初始化console.log(this.$el);console.log(%c%s, color:red,data : this.$data); //已被初始化console.log(%c%s, color:red,message: this.message); //已被初始化},mounted: function () {console.group(mounted 挂载结束状态》);console.log(%c%s, color:red,el: this.$el); //已被初始化console.log(this.$el);console.log(%c%s, color:red,data : this.$data); //已被初始化console.log(%c%s, color:red,message: this.message); //已被初始化},beforeUpdate: function () {console.group(beforeUpdate 更新前状态》);console.log(%c%s, color:red,el: this.$el);console.log(this.$el);console.log(%c%s, color:red,data : this.$data);console.log(%c%s, color:red,message: this.message);},updated: function () {console.group(updated 更新完成状态》);console.log(%c%s, color:red,el: this.$el);console.log(this.$el);console.log(%c%s, color:red,data : this.$data);console.log(%c%s, color:red,message: this.message);},beforeDestroy: function () {console.group(beforeDestroy 销毁前状态》);console.log(%c%s, color:red,el: this.$el);console.log(this.$el);console.log(%c%s, color:red,data : this.$data);console.log(%c%s, color:red,message: this.message);},destroyed: function () {console.group(destroyed 销毁完成状态》);console.log(%c%s, color:red,el: this.$el);console.log(this.$el);console.log(%c%s, color:red,data : this.$data);console.log(%c%s, color:red,message: this.message)}})/script/body/html复制代码–save会把依赖包名称添加到package.json文件dependencies键下–save-dev则添加到package.json文件devDependencies键下。 devDependencies 里面的插件只用于开发环境不用于生产环境而 dependencies 是需要发布到生产环境的。
比如我们写一个项目要依赖于jQuery没有这个包的依赖运行就会报错这时候就把这个依赖写入dependencies
而我们使用的一些构建工具比如glup、webpack这些只是在开发中使用的包上线以
后就和他们没关系了所以将它写入devDependencies。
1、安装sass依赖包cnpm install --save-dev sass-loader//sass-loader依赖于node-sasscnpm install --save-dev node-sass2、在build文件夹下的webpack.base.conf.js的rules里面添加配置{ test: /.sass$/, loaders: [style, css, sass]}3、在APP.vue中修改style标签style langscss复制代码1、安装less依赖包cnpm install less less-loader --save2、修改webpack.config.js文件配置loader加载依赖让其支持外部的less,在原来的代码上添加{test: /.less$/,loader: style-loader!css-loader!less-loader,},3、在APP.vue中修改style标签style langless复制代码不应该使用箭头函数来定义 method 函数 (例如 plus: () this.a)。理由是箭头函数绑定了父级作用域的上下文所以 this 将不会按照期望指向 Vue 实例this.a 将是 undefined。//在methods中正确定义函数的方法如下methods: {showDetail: () {console.log(this.detailShow)}}复制代码