vue移动端app项目
1.安装vuecli
npm i -g @vue/cli
2.创建项目
vue create myProject
// 选择
Manually select features
Babel, Router, Vuex, CSS Pre-processors, Linter
y
with node-sass
with standard lint
lint on save
In dedicated config files
3.如果没安装sass,需要装sass
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ -D
npm i -D sass-loader
4.安装vw
npm i -D postcss-viewport-units postcss-px-to-viewport postcss-write-svg postcss-aspect-ratio-mini
5.配置
module.exports = {css: {loaderOptions: {postcss: {plugins: (loader) => [require('postcss-aspect-ratio-mini')({}),require('postcss-write-svg')({utf8: false}),require('postcss-px-to-viewport')({viewportWidth: 750, // (Number) 设计稿的视口宽度unitPrecision: 3, // (Number) 单位转换后保留的精度viewportUnit: 'vw', // (String) 希望使用的视口单位.fontViewportUnit: 'vw', // 字体使用的视口单位propList: ['*'], // 能转化为vw的属性列表selectorBlackList: [], // (Array) 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位minPixelValue: 1, // (Number) 设置最小的转换数值,如果为1的话,只有大于1的值会被转换mediaQuery: false, // (Boolean) 媒体查询里的单位是否需要转换单位.replace: true, // (Boolean) 是否直接更换属性值,而不添加备用属性exclude: [], // (Array or Regexp) 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件landscape: false, // (Boolean) 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)landscapeUnit: 'vw', // (String) 横屏时使用的单位landscapeWidth: 568 // (Number) 横屏时使用的视口宽度}),require('postcss-viewport-units')({})]}}}
}
6.兼容
npm i -S viewport-units-buggyfill
7.main.js中使用
var hacks = require('viewport-units-buggyfill.hacks');
require('viewport-units-buggyfill').init({hacks: hacks
});
8.添加normalize.css
npm i normalize.css -S
9.引入公共的scss样式
// 在vue.config.js中配置css: {loaderOptions: {scss: {prependData: `@import "~@/assets/css/common.scss";`}}
}
10.项目中动态引入本地图片,js中使用本地图片
data() {return {image: require('./img.png)}
}
11.组件样式穿透
使用scoped 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式
//css
>>> .vant {}
// sass
/deep/ .vant {}
12.使用hbuilderx运行,显示白板
// vue.config.js配置
publicPath: './', //发布路径,用相对路径,不然会报错
路由使用hash模式
mode: 'hash'
13.出现横向滚动条
// 当父元素使用overflow后触发BFC,子元素绝对定位元素超出宽度,在移动端会出现滚动条。
// 解决办法:给超出宽度的元素再加一个容器
14. 添加axios
vue add axios
15.配送devServer,target一定要写,不然运行会报错upgrade
devServer: {// host: '0.0.0.0',//target host// port: 8080,proxy:{'/api':{ target: '/',//代理地址,这里设置的地址会代替axios中设置的baseURLchangeOrigin: true,// 如果接口跨域,需要进行这个参数配置//ws: true, // proxy websockets//pathRewrite方法重写urlpathRewrite: {'^/api': '/'}}}},
16.使用了axios插件后怎么提取公共api.js
// 发现插件将axios挂载到了全局window对象上
// api.js
const axios = window.axios;
17.监听返回按钮,返回页面
// 安装 h5+
npm i -S vue-awesome-mui
// main.js 使用
import Mui from 'vue-awesome-mui';Vue.use(Mui);// 原始代码document.addEventListener('plusready', function (a) {let first = '';window.plus.key.addEventListener('backbutton', function () {// 获取地址栏目中的urlconst urls = location.hash.split('/')[1];if (urls === '') {// 判断是首页的时候点击二次退出appif (new Date().getTime() - first < 3000) {window.plus.runtime.quit();// 表示退出app} else {first = new Date().getTime();}} else {history.go(-1);}}, false);});// 改造一下,加入main.js中(测试了下没必要)
```js
// 监听返回按钮document.addEventListener('plusready', function (a) {let first = '';window.plus.key.addEventListener('backbutton', function () {// 获取地址栏目中的urlconst urls = location.hash.split('/')[1];alert(urls);if (urls === 'index' || urls === 'mine') {// 判断是首页的时候点击二次退出appif (new Date().getTime() - first < 3000) {window.plus.runtime.quit();// 表示退出app} else {first = new Date().getTime();}} else {router.go(-1);}}, false);});
18.一像素边框
npm i -D postcss-write-svg
// vue.config.js
postcss: {plugins: (loader) => [require('postcss-write-svg')({ utf8: false })]
}
// common.scss
@svg 1px-border {height: 2PX;@rect {fill: var(--color, black);width: 100%;height: 50%;}
}
// 使用border-bottom: 1px solid transparent;border-image: svg(1px-border param(--color $navbar-border-color)) 2 2 stretch;
19.使用hbuilderx打包
// 1. 在hbuilderx上新建一个h5+app项目// 2. npm run build 打包,将打包生成的dist目录里的文件复制// 3. 替换hbuilderx生成项目下的对应文件// 4. 选择云打包或本地打包
vue移动端app项目相关推荐
- vue服务端渲染——项目搭建、开发、生产环境的部署、浏览渲染、SEO优化
几个月前,公司要求(服务端渲染)--用vue-ssr做了个服务端渲染,从起搭建.开发.部署.浏览器渲染到优化,希望对有需要的小伙伴有帮助,若是有不足之处,望指出,一起讨论学习.--几个月过去了,公司又 ...
- Vue移动端商城项目
1 准备基本的项目模板 文件结构如下(用之前webpack配置好的文件目录) index.html <!doctype html> <html lang="en" ...
- vue的移动app项目中,自定义拖拽指令的问题
使用vue的都知道vue有一个自定义指令,我比较喜欢的就是拖拽的自定义指令,感觉挺方便的! //组件内的拖拽指令 directives: {//组建内自定义指令drag: {// 指令的定义bind: ...
- vue移动端浏览器项目,调用支付宝支付
浏览器调用支付宝支付,只需要前端这边,提交后台返回的表单即可,并且提供一个支付完成后的回调地址给后台即可,接口那边返回的表单格式一般为: <form name="punchout_fo ...
- vue仿写音乐App项目移动端(部分)
在这一个月期间跟着逆战班级做的一个基于vue的音乐App项目 项目目录结构如下: public文件夹用于存放公用文件.src用于存放项目源代码 1.App组件代码 <template>&l ...
- Vue 服务端渲染原理 拆分成三步个步骤简单的实现一个案例
前言 可能我们平常接触比较多的是使用 vue + vue全家桶来搭建起一个单页(SPA)应用.用 服务端渲染 搭建项目比较少,本文是记录我在学习 服务端渲染 过程中的一些见解,如有出错或疏漏,麻烦帮忙 ...
- 关于vue移动端下载图片
最近在做一个vue移动端的项目,设计技术为vue2+vue相关+vant-ui+less,搭配浙里办Bridge插件.也算是几年来第一次做移动端相关的项目了,在做的过程中,记录下几个问题,一起分享下我 ...
- vue移动端项目打包成app
这几天 我做了一个vue移动端的小项目 就想着打包成 app安装在手机上看看 我就讲解下整个思路和过程 首先项目开发完之后 (我使用的是vue-cli 3.*版本) 在项目文件夹下创建一个 vue. ...
- Vue项目打包移动端App(App打包教程),简便直接
一.Vue项目打包移动端APP 需要准备的工具:Hbuilder 二.首先打包vue到dist目录 npm run build 三.然后再Hbuilder中打开dist目录 首先可以看到dist目录的 ...
- vue入门项目:类新闻类移动端app
vue入门项目:类新闻类移动端app 工程地址 github地址 项目介绍 使用框架 项目是一个使用vue脚手架开发的类新闻类应用 需要知识: vue vue-router axios mui min ...
最新文章
- 才一年,智能车就不再是新势力专利!
- Java常用的设计模式总结
- 【体验】感谢朋友雪中送炭寄来的便携示波器,便携示波器开箱体验
- vue异常——template SyntaxError: string literal contains an unescaped line break
- 只需要2个工具,百度云盘大文件就能用迅雷和IDM下载
- 【Kafka】kafka 0.10.0 版本低级消费 API
- python socket connection_Python socket.create_connection方法代码示例
- AndroidStudio_android中实现ImageView的清空操作---Android原生开发工作笔记235
- iPhone在scrollview中双击定点放大的代码
- 断线的风筝,该飘向哪里
- HTMLTestRunner文件
- 汇编 DOS系统功能调用
- python3处理普通文件【open内置函数】
- win10专业版和企业版的区别_Win10专业版和家庭版有什么区别?
- (小柯-java- 基础)
- 【css设置滚动条粗细】
- Linux 系统中成功恢复已删除的文件
- 2023年基建工程(设计规划施工)经验分享,超多干货
- creator owner是什么用户_并发系列-到底什么重量级锁?
- iOS 更改webView文字颜色丶文字大小丶背景色的方法
热门文章
- C语言自学之路十四(详解C语言初阶结构体)
- 了解CV和RoboMaster视觉组(五)滤波器、观测器和预测方法:维纳滤波器Wiener Filter,LMS
- Kconfig Kbuild
- hdr_pj410说明书_索尼HDR-PJ410
- shell脚本教程--Bash shell--4.流控、循环
- 【DSP】频谱泄露与栅栏效应简介
- 千亿数仓第四章(指标计算_订单分析地域、分类维度分析业务开发)
- 深度学习入门之txt文本文件转换为npz文件
- 使用Kali Linux系统生成木马病毒并实现远程控制计算机
- ghost错误代码大全