为了账号安全,请及时绑定邮箱和手机立即绑定

Days09 Vue.js2

标签:
Vue.js

前言

学习vue第二天,之前关于router和option模糊的很,跟着视频完成一个小demo以后感觉很nice。由于跳过了node.js导致很多请求很陌生,对数据不是很敏感,之前对于前端的一些看法改变了很多。可以说,现在JS无所不能了。但是里面的那些坑也多的很。所以前端路一定要走下去,而且要高级!!!

1.router

webp

router

webp

编程导航

webp

axios

2.项目总结

讲师手动搭建的vue目录

webp

vue手写目录

npm  init -y安装package.json描述文件npm install  --save 会把依赖包名称添加到 package.json 文件dependencies (运行依赖)键下,--save-dev 则添加到 package.json 文件 devDependencies (开发依赖)键下

正常使用npm install时,会下载dependencies和devDependencies中的模块,当使用npm install –production或者注明NODE_ENV变量值为production时,只会下载dependencies中的模块。

webpack.config.js明天会将如何打包

mint-ui

npm i mint-ui --save

//Mint:引入mint-ui

import Mint from 'mint-ui';

//Mint:引入css

import 'mint-ui/lib/style.css';

//Mint:安装插件

Vue.use(Mint);

Mui

手动下载mui包到本地应用

//MUI:引入mui的样式

import './static/vendor/mui/dist/css/mui.css';

//全局样式

import './static/css/global.css';

Axios 

npm i axios --save

//Axios:引入axios

import Axios from 'axios';

//挂载原型

Vue.prototype.$ajax = Axios;

//默认配置

Axios.defaults.baseURL = 'http://182.254.146.100:8899/api/';

webp

axios

webp

axios

Vue-cli

# 全局安装 vue-cli

$ npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

$ cd my-project    //进入到项目的根目录--直接进入到该文件夹即可

$ npm install        //安装依赖包

$ npm run dev     //运行项目

webp

vue-cli目录

webp

当前页面

自己做的demo

webp

首页


webp

图库

杂项

关于Mui,本地引入mui包的形式,结合官网案例,找需要的效果,看界面路径,在mui/examples/hello-mui中找相关界面,复制就行。

关于iconfont字体图标的用法,先在阿里iconfont中搜索需要的图标加入购物车,可以生成png图标或者下载ttf,svg三种格式的图标字体,在mui的css中引入,@font-face自定义字体图标,同时引入图标样式,通过类名,给需要的盒子套上即可

关于mint-ui,感觉功能不是很多,还需继续研究。

明天先大概处理完视频,看一下购物车和webpack的使用,很多axios请求没地址做不了。搞完开始搞一搞ajax和node,做一行爱一行,不能反感数据交互。早上去拿顺丰快递和中通,看看小米到底给我发了几个耳机。



作者:biu丶biubiu
链接:https://www.jianshu.com/p/35edac700899


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

举报

0/150
提交
取消