vue开发中遇到的问题-蒲公英云

1、（1）Cannot find module ‘electron’
解决方案：cmd中输入：npm install --save-dev electron。
（2）后来还差cfonts、webpack-dev-server、webpack-hot-middleware、babili-webpack-plugin、eslint-friendly-formatter、copy-webpack-plugin、extract-text-webpack-plugin、html-webpack-plugin，同样安装依赖。
2、屏幕自适应
（1）

npm i lib-flexible --save
npm i px2rem-loader --save-dev

（2）build/utils.js

const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75 // 这个参数值是通过psd设计稿的宽度/10来计算的，这里是以750
    }
  }
function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, px2remLoader, postcssLoader] : [cssLoader, px2remLoader]

（3）main.js
import 'lib-flexible';
（4）index.html
viewport设置成width=device-width,initial-scale=1.0；
（5）字体想显示成14px，则设计图28px，代码是28px。
3、为什么你做的H5开屏那么慢？H5首屏秒开方案探讨
https://mp.weixin.qq.com/s/ye1CeIjlfs9VSUab3gQI5g
4、浏览器通过写ip:端口号无法打开，提示“不允许访问”。
（1）config-index.js-dev-host，改成0.0.0.0
这样浏览器中输入：http://192.168.11.102:8081/
就能打开了。
5、数据存储
‘vuex’ and ‘vuex-persist’
6、如果是从别人那儿下载下来的项目，自己想要打开
（1）npm run dev 尝试启动项目
报错：Error: Cannot find module ‘express’
解决：看package.json里有没有express的依赖项,有的话直接npm install,没有的话 npm install express —save
（2）Cannot find module ‘webpack-merge’,应该是很多依赖没有安装，所以都安装一下
npm install —save
（3）报错：stylus-loader@2.5.1 requires a peer of stylus@>=0.52.4 but none was installed.
解决：npm install stylus —save
（4）config-index.js-dev-port改个端口号，就能在指定端口打开项目。
6、项目发布到线上后
报错：webpackJsonp is not defined
解决：build-webpack.pro.conf.js

new HtmlWebpackPlugin({
    }),

加上了

chunks: ['manifest', 'vendor', 'app'],

，即

new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      chunks: ['manifest', 'vendor', 'app'],
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency' // 默认4个选项：'none', 'auto', 'dependency', '{function}'
    }),

7、如果在router中没有用mode: ‘history’,

export function getStr(name) {
  // 获取url的指定属性
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
  var r = window.location.search.substr(1).match(reg);
  if (r != null) return decodeURI(r[2]);
  return null;
}

用这个方法获得的url参数为null。
（1）此时的location是http://localhost:8081/\#/myInfoReport?storageSign=1012190735&schid=，location.search得到的是空字符串
（1）解决：router中用mode: ‘history’,后台需要配置，不然页面会显示一片空白。
6、数组更新
数组不能像对象那样自动更新，需要手动用set方法去更新

// 数组更新数据
this.$set(tranArr, i, tranArr[i]);

7、路由的query和params
1、this.$route.params; ,相当于post，在刷新后会为空。
2、this.$route.query; ,相当于get,在刷新后会一直存在。

8、报错：Failed to mount component：template or render function not defined. (found in )
1、原因：同目录下有同名的vue和js
2、解决：将js的文件名改成不一样的就好了。
9、js中引入vue组件
1、alert-modal.vue

<div class="alert" v-if="showFlag">
   <div class="alert-mask"></div>
   <div class="alert-dialog"><div class="alert-dialog-hd">提示</div><div class="alert-dialog-bd" v-html="hintContent"></div><div class="alert-dialog-ft"><button class="alert-btn-sure" @click="alertSure">确定</button></div></div>
 </div>
</template>
<script type=text/ecmascript-6>
export default {
 name: 'hint',
 props: {
   hintContent: {
     type: String,
     default: ''
   }
 },
 data() {
   return {
     showFlag: true
   };
 },
 methods: {
   alertSure() {
     this.showFlag = false;
     this.$emit('showH', false);
   }
 }
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
 @import "~assets/stylus/variable"
 .alert-mask
   position:fixed;
   left:0;
   right:0;
   top:0;
   bottom:0;
   z-index:999;
   background-color:rgba(0,0,0,0.6);
 .alert-dialog
   position: fixed;
   left:15%;
   right:15%;
   top: 30%;
   z-index: 1000;
   margin: 0;
   width:70%;
   border-radius: 3px;
   text-align: center;
   background:$color-white;
   overflow: hidden;
 .alert-dialog-hd
   padding: 1.2em 0 .5em;
 .alert-dialog-bd
   padding: 0 20px;
   font-size: $font-size-m;
   color: $color-text-l;
   word-wrap: break-word;
   word-break: break-all;
 .alert-dialog-ft
   margin-top: 20px;
   border-top:1px solid $color-border;
   line-height: 42px;
   text-align:center;
 .alert-btn-sure
   line-height:42px;
   font-size:$font-size-l;
   color: $color-theme;
   background:$color-white;
</style>

2、同目录下创建alert-modal-component.js

import Vue from 'vue';
import modalModule from './alert-modal.vue';
// 创建组件构造函数,类似vue的子类
const ModalConstructor = Vue.extend(modalModule);
const alertModal = function (options) {
// 防止重复弹出
 let domed = document.getElementsByClassName('alert-modal');
  if (domed.length > 0) {
    return;
  }
  const {
    ...rest
  } = options;
  options = options || {};
  // 创建组件实例
  var instance = new ModalConstructor({
    propsData: {
      ...rest
    }
  });
  // 页面渲染
  instance.vm = instance.$mount(); // 挂载但是并未插入dom，是一个完整的Vue实例
  document.body.appendChild(instance.vm.$el);
  // instance.vm.visible = true;
  return instance.vm;
};
export default alertModal;

3、封装的axios.js中，如果error调用
import alertModal from 'base/alert/alert-modal-component.js';
alertModal({ hintContent: '弹出错误提示' });

4、以上是纯js中引入vue.
5、下面是vue直接引入另一vue组件的api，不用添加元素、import成component的形式
（1）新建index.js

import AlertModal from 'base/alert/alert-modal.vue';
import alertModal from 'base/alert/alert-modal-component.js';
export default (Vue) => {
  Vue.component(AlertModal.name, AlertModal);
  Vue.prototype.$alertModal = alertModal;
  Vue.alertModal = alertModal;
};

（2）main.js中引入

import alertModal from 'base/alert/index.js';
Vue.use(alertModal);

（3）login.vue中使用

this.$alertModal({
          hintContent: '请输入密码'
        });

（4）如果在login.vue中点击弹框的确定之后要进行其他操作，则用添加元素,import成component的方法。同一页面这2种方法可以混用。
10 better-scroll无法滚动
1、自己用touchstart,touchmove写的左滑删除后，better-scroll无法滚动。
2、原因：touchmove的方法中写了e.stopPropagation();导致垂直方向无法滚动。
3、删除e.stopPropagation.
11