三人成太

主题

vuecli创建移动端app项目

三人2020-07-09框架vuevuecliapp

vuecli创建移动端app项目

安装vuecli ​

bash
npm i -g @vue/cli

创建项目 ​

bash
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

如果没安装sass,需要装sass ​

bash
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ -D
npm i -D sass-loader

安装vw ​

bash
npm i -D postcss-viewport-units postcss-px-to-viewport postcss-write-svg postcss-aspect-ratio-mini

配置

js
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')({})
        ]
      }
    }
  }
}

兼容

bash
  npm i -S viewport-units-buggyfill

main.js中使用

js
var hacks = require('viewport-units-buggyfill.hacks');
require('viewport-units-buggyfill').init({
  hacks: hacks
});

添加normalize.css ​

bash
npm i normalize.css -S

main.js中引入

js
  import 'normalize.css'

引入公共的scss样式 ​

js
// 在vue.config.js中配置
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "~@/assets/css/common.scss";`
      }
  }
}

项目中动态引入本地图片，js中使用本地图片 ​

js
  data() {
  return {
    image: require('./img.png)
  }
}

组件样式穿透 ​

使用scoped 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式

css
/*css*/
>>> .vant {}
/*sass*/
/deep/ .vant {}

使用hbuilderx运行，显示白板 ​

js
// vue.config.js配置
publicPath: './', //发布路径,用相对路径，不然会报错
路由使用hash模式
mode: 'hash'

出现横向滚动条 ​

js
// 当父元素使用overflow后触发BFC，子元素绝对定位元素超出宽度，在移动端会出现滚动条。
// 解决办法：给超出宽度的元素再加一个容器

添加axios ​

bash
  vue add axios

配送devServer,target一定要写，不然运行会报错upgrade ​

js
  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': '/'
          }
      }
    }
  },

使用了axios插件后怎么提取公共api.js ​

js
// 发现插件将axios挂载到了全局window对象上
// api.js
const axios = window.axios;

使用h5+，监听返回按钮，返回页面(测试了下没必要) ​

bash
# 安装 h5+
npm i -S vue-awesome-mui
js
// 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中
// 监听返回按钮
  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);
  });

一像素边框 ​

js
  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;

使用hbuilderx打包 ​

js
  // 1. 在hbuilderx上新建一个h5+app项目
  // 2. npm run build 打包，将打包生成的dist目录里的文件复制
  // 3. 替换hbuilderx生成项目下的对应文件
  // 4. 选择云打包或本地打包

axios post调用接口，后端接收不到参数 ​

js
// 按照查询到的方法设置content-type,无效
config = {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
}
// 经研究是因为序列化的问题
import qs from 'qs'; // 不用安装，axios包里有这个
// 在请求拦截器里重新stringify data
_axios.interceptors.request.use(
  function(config) {
    config.data = qs.stringify(config.data);
    return config;
  },
  function(error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

引用三方js压缩文件 eslint忽略 ​

js
// 在三方文件里前后加入

/* eslint-disable */

beforeCreate中调用methods里的方法报错 ​

js
    // 这个时候实例还未创建，不能用this

根目录中创建.env.development和.env.production两个文件时，需要注意，配置变量需要以VUE_APP_开头，否则build后无效 ​

js
 // .env.development
 VUE_APP_apiUrl = 'http://localhost:8089'

 // 使用
 process.env.VUE_APP_apiUrl

安卓离线打包 plus.runtime.install android9+无法运行 plus.runtime.openFile同理 ​

js
// 在Androidmanifest.xml添加provider节点 activity同级，将里面的io.dcloud.HBuilder改成自己应用的包名。
  <provider  
        android:name="io.dcloud.common.util.DCloud_FileProvider"  
        android:authorities="XXXX.XXX.XX(当前的应用包名).dc.fileprovider"  
        android:exported="false"  
        android:grantUriPermissions="true">  
        <meta-data  
            android:name="android.support.FILE_PROVIDER_PATHS"  
            android:resource="@xml/dcloud_file_provider" />  
    </provider>

安卓离线打包后， input file 在androi10手机上无法上传“文件管理”里的文件 ​

js
  // build.gradle文件 28 一定要是28 
  android {
    compileSdkVersion 28
    buildToolsVersion "30.0.1"

    defaultConfig {
        applicationId "com.example.gwlz"
        minSdkVersion 19
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

利用template标签 for循环生成 input或textarea同时有v-if key值只能绑在input上 绑定v-model会出现 输入失焦 的情况 ​

老老实实用div解决问题,在外层包裹一个div没有v-if的。

打包 ​

1. npm run build ​

2. HbuilderX 新建5+app ​

3. 删除掉除unpackage和manifest.json的所有文件 ​

4. 复制第一步打包的dist文件夹里的所有文件到前面创建的5+app项目文件夹中 ​

5. HbuilderX点击发行->原生app本地打包->生成本地打包app资源（若选云打包就不需要后面的步骤） ​

6. 后续步骤详情 dcloud ​

更新（5+app uniapp 离线打包） ​

WARNING

更新SDK时需要同时更新aar/jar文件(lib里面)和build.gradle配置 data下资源需要同时更新 修改后注意包名 xx.xxx.com app名 string.xml中

最后更新时间:

渝ICP备2023009532号三人   2019 - 2025公安备50022502000284

网站运行时间：