柚子的第一篇博客(菜鸟之路)(mock.js)

我的第一篇优快云博客
*关于mock.j和vue-cli结合的基础入门
*(前后端分离,前端可以独立后端开发,mock.js可以生成大量的伪造数据,拦截ajax请求后将数据返回到前端,有利于前端功能的开发和简单的调试)

• 搭建好vue-cli脚手架
• 打开对应的vue-cli项目文件夹下 运行命令 npm isntall mockjs --save-dev
• 在src文件夹下新建一个文件夹mock,在新建的文件夹mock目录下新建一个mock.js的js文件
• 在mock.js文件夹写入以下内容:
• const Mock =require(‘mockjs’) //引入mock.js Moc是个对象 里面有很多的方法
  Mock.mock(‘http://test.cn’,(req,res)=>{
  return Mock.mock(
  {//输出数据
  ‘name’: ‘@name’,//随机生成姓名
  ‘age|1-10’: 10, //随机生成数字(年龄)
  ‘color’:’@color’ //随机生成颜色
  }
  )
  });
  想要生成不同的数据可以写很多的接口来调用
  如下图
  

好了 数据都已经生成了 现在就差调用啦

在对应需要数据的组件的 script标签下引入mock的数据data
注意相对文件夹的路径,两个点点是返回上一级的意思根据自己的文件夹路径正确引入即可

• 运行 npm install axios --save-dev
• 在mian.js中引入axios
• 
• 在对应的方法里写this.axios.get(‘api’).then(function(res){console.log(res)})
• 注意这里不能alert 写console 因为alert出来是[Object Object] console.log后再浏览器控制台打开再去看自己需要的对象的对应的属性数据即可

会生成随机的数据表格
我用的element-ui这个vue组件库
简单介绍一下element-ui引入vue的方法

• npm install jquery --save-dev
• npm install element-ui --save-dev
• main.js文件中这样引入

楼主是菜鸟 还是停留在helloworld
先全局引入jquery
重点来了 我这个菜鸟引入element-ui的时候各种报错 找不到element-ui的index.css这个文件
很简单是因为文件自动补全的功能 一顿tab操作后 最后是theme-chalk/index
index后面没有加.css
手动加上.css吧index.css骚年 就不会报错了!!
那些改配置文件的操作 不适合我这种菜鸟! 先不报错能用就可以了!
柚子的第一篇博客 写的只有自己能看懂了
后期不断改进 不断总结自己前端开发路上踩到的坑 !
分享给更多和我一样零基础的菜鸟开发者们!