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中设置的baseURL
changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
//ws: true, // proxy websockets
//pathRewrite方法重写url
pathRewrite: {
'^/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 () {
// 获取地址栏目中的url
const urls = location.hash.split('/')[1];
if (urls === '') {
// 判断是首页的时候点击二次退出app
if (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 () {
// 获取地址栏目中的url
const urls = location.hash.split('/')[1];
alert(urls);
if (urls === 'index' || urls === 'mine') {
// 判断是首页的时候点击二次退出app
if (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. 选择云打包或本地打包
