vue 遇到的坑于与总结

cli3 安装 vux

https://blog.csdn.net/Honnyee/article/details/82181620

不能使用consle

image.png

解决办法：

再根目录新建 .eslintrc.js ，粘贴

module.exports = {
  extends: [ 'plugin:vue/essential', 'airbnb-base' ],
  rules: {
    'no-console': 'off',
  }
};

为什么：

ESlint代码质量检查禁用了console，详情https://juejin.im/post/5aa7ba24f265da23771915cf

vue中使用mock

1，安装依赖

//我们使用axios来发起http请求
    npm install axios --save
    //安装依赖mockjs
    npm install mockjs --save-dev

2，在根目录新建一下文件

image.png

//index.js
const Mock = require('mockjs');//mockjs 导入依赖模块
const util = require('./util');//自定义工具模块
    //返回一个函数
module.exports = function(app){
    //监听http请求
    app.get('/user/userinfo', function (rep, res) {
        //每次响应请求时读取mock data的json文件
        //util.getJsonFile方法定义了如何读取json文件并解析成数据对象
        var json = util.getJsonFile('./userInfo.json');
        //将json传入 Mock.mock 方法中，生成的数据返回给浏览器
        res.json(Mock.mock(json));
    });
}

//util.js
const fs = require('fs');//引入文件系统模块
    const path = require('path');//引入path模块
    
    module.exports = {
        //读取json文件
        getJsonFile:function (filePath) {
            //读取指定json文件
            var json = fs.readFileSync(path.resolve(__dirname,filePath), 'utf-8');
            //解析并返回
            return JSON.parse(json);
        }
    };

//userinfo.json
{
        "error":0,
        "data":{
            "userid": "@id()",
            "username": "@cname()",
            "date": "@date()",
            "avatar": "@image('200x200','red','#fff','avatar')",
            "description": "@paragraph()",
            "ip": "@ip()",
            "email": "@email()"
        }
    }

vue cli3简化了配置，去掉了config，server等文件夹及其配置
所以这里要在根目录新建 vue.config.js

module.exports = {
    devServer : {
        before: require('./mock')//引入mock/index.js
    }
}

如果是vue cli2直接build/webpack.dev.conf.js下devServer 加入 before: require('./mock') 即可；
然后去请求就好了

getInfo:function(){
        axios.get('/user/userinfo')
        .then(({data})=>{
          //打印mock data
          console.log(data);
          if(data.error === 0){
            this.userInfo = data.data;
          }else{
            this.userInfo = {};
          }
        });
      }

详情：https://juejin.im/post/5acdb5345188255c5668caa5

局部载入less

<style lang="less">
    @import "../../assets/styles/login.less";
</style>

然后build/webpack.base.conf.js 规则（rules）加入

{
        test: /\.less$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'less-loader'
        ]
      }

全局载入less

http://pangjunpeng.com/2018/04/09/Vue%E9%A1%B9%E7%9B%AE%E4%B8%AD%E4%BD%BF%E7%94%A8%E5%85%A8%E5%B1%80less%E9%81%87%E5%88%B0%E7%9A%84%E5%9D%91/

方法很简单，npm install less less-loader --save然后webpack.base.conf.js中加入

{
  test  : /\.less$/,
  loader: "style-loader!css-loader!less-loader",
}

webstorm中语法还是报错，在style标签上加入type='text/less'就好了
然而项目中有好多组件样式可以复用，在App.vue中写的，由于作用域的原因其他组件并不能引入，会报undefined错误，只能另辟蹊径。

重新建一个global.less文件，然后在组建中单独@import '../assets/css/global.less'引入就可以用啦
但是这样每个页面岂不是都要import一下！
有没有什么办法可以一劳永逸呢，不得不说万能的网友还是厉害。
方法如下

安装sass-resources-loader
找到build文件夹下面的utils.js
找到 less: generateLoaders('less')
修改成

less: generateLoaders('less').concat({
    loader: 'sass-resources-loader',
    options: {
      resources: path.resolve(__dirname, '../src/assets/css/global.less')
    }
}),

如果有多个文件，继续这个套路concat就可以了

[VeeValidate]Vue验证(https://baianat.github.io/vee-validate/)

1，首先安装 npm install vee-validate@2.0.0-rc.25
2，然后看教程https://segmentfault.com/a/1190000011275513

vue 遇到的坑于与总结