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
方法很简单,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
网友评论