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. 选择云打包或本地打包