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代碼質(zhì)量檢查禁用了console，詳情https://juejin.im/post/5aa7ba24f265da23771915cf

vue中使用mock

1，安裝依賴(lài)

//我們使用axios來(lái)發(fā)起http請(qǐng)求
    npm install axios --save
    //安裝依賴(lài)mockjs
    npm install mockjs --save-dev

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

image.png

//index.js
const Mock = require('mockjs');//mockjs 導(dǎo)入依賴(lài)模塊
const util = require('./util');//自定義工具模塊
    //返回一個(gè)函數(shù)
module.exports = function(app){
    //監(jiān)聽(tīng)http請(qǐng)求
    app.get('/user/userinfo', function (rep, res) {
        //每次響應(yīng)請(qǐng)求時(shí)讀取mock data的json文件
        //util.getJsonFile方法定義了如何讀取json文件并解析成數(shù)據(jù)對(duì)象
        var json = util.getJsonFile('./userInfo.json');
        //將json傳入 Mock.mock 方法中，生成的數(shù)據(jù)返回給瀏覽器
        res.json(Mock.mock(json));
    });
}

//util.js
const fs = require('fs');//引入文件系統(tǒng)模塊
    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簡(jiǎn)化了配置，去掉了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') 即可；
然后去請(qǐng)求就好了

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 規(guī)則（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/

方法很簡(jiǎn)單，npm install less less-loader --save然后webpack.base.conf.js中加入

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

webstorm中語(yǔ)法還是報(bào)錯(cuò)，在style標(biāo)簽上加入type='text/less'就好了
然而項(xiàng)目中有好多組件樣式可以復(fù)用，在App.vue中寫(xiě)的，由于作用域的原因其他組件并不能引入，會(huì)報(bào)undefined錯(cuò)誤，只能另辟蹊徑。

• 重新建一個(gè)global.less文件，然后在組建中單獨(dú)@import '../assets/css/global.less'引入就可以用啦
  但是這樣每個(gè)頁(yè)面豈不是都要import一下！
  有沒(méi)有什么辦法可以一勞永逸呢，不得不說(shuō)萬(wàn)能的網(wǎng)友還是厲害。
  方法如下

安裝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')
    }
}),

如果有多個(gè)文件，繼續(xù)這個(gè)套路concat就可以了

[VeeValidate]Vue驗(yàn)證(https://baianat.github.io/vee-validate/)

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

vux配置全局樣式