cli3 安裝 vux
https://blog.csdn.net/Honnyee/article/details/82181620
不能使用consle
解決辦法：
再根目錄新建 .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庄蹋，安裝依賴
//我們使用axios來發(fā)起http請求
npm install axios --save
//安裝依賴mockjs
npm install mockjs --save-dev
2熙暴，在根目錄新建一下文件
//index.js
const Mock = require('mockjs');//mockjs 導(dǎo)入依賴模塊
const util = require('./util');//自定義工具模塊
//返回一個函數(shù)
module.exports = function(app){
//監(jiān)聽http請求
app.get('/user/userinfo', function (rep, res) {
//每次響應(yīng)請求時讀取mock data的json文件
//util.getJsonFile方法定義了如何讀取json文件并解析成數(shù)據(jù)對象
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簡化了配置遭赂，去掉了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 規(guī)則（rules）加入
{
test: /\.less$/,
use: [
'vue-style-loader',
'css-loader',
'less-loader'
]
}
全局載入less
方法很簡單紧显，npm install less less-loader --save然后webpack.base.conf.js中加入
{
test : /\.less$/,
loader: "style-loader!css-loader!less-loader",
}
webstorm中語法還是報錯讲衫，在style標簽上加入type='text/less'就好了
然而項目中有好多組件樣式可以復(fù)用，在App.vue中寫的孵班，由于作用域的原因其他組件并不能引入涉兽，會報undefined錯誤招驴，只能另辟蹊徑。
- 重新建一個
global.less文件枷畏，然后在組建中單獨@import '../assets/css/global.less'引入就可以用啦
但是這樣每個頁面豈不是都要import一下别厘！
有沒有什么辦法可以一勞永逸呢，不得不說萬能的網(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')
}
}),
如果有多個文件触趴，繼續(xù)這個套路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
