vue开发中遇到的问题

た入场券 2022-06-04 00:05 1151阅读 0赞

**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][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/][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**

[https_mp.weixin.qq.com_s_ye1CeIjlfs9VSUab3gQI5g]: https://mp.weixin.qq.com/s/ye1CeIjlfs9VSUab3gQI5g
[http_192.168.11.102_8081]: http://192.168.11.102:8081/