尚硅谷
模块化、组件化、工程化 vue全家桶 es6
脚手架初始化vue项目
模拟json后台数据实现前后端分离
webpack打包
vue vue-router vuex
vue-lazyload 图片懒加载
滑动库
vue-scroll
better-scroll
swiper
日期处理
moment
date-fns
前后台交互
mockjs
postman
ajax请求 vue-resource axios
模块化
es6
babe
项目构建/工程化
webpack
vue-cli
eslint
css预编译
stulys
拆分路由
商家下面 三个子路由 三个tab选项
/shop
/shop/dc 点餐
/shop/ 评价
/shop/ ...
API(接口) 4个
请求地址 url
请求方式 get post
请求参数
响应 响应数据格式(一般是json数据 那么要知道json数据格式)
接口文档(文件)
应用的所有接口描述信息
对接口
联调
前后台分离
后台：处理请求响应数据
前台：获取数据渲染
mock数据
模拟数据
学习内容
1、axios/vue-resource 发请求
2、vuex 管理应用组件状态
3、better-scroll/vue-scroller 实现页面滑动
4、vue-lazyload 实现图片懒加载
5、mockjs模拟数据接口
6、stylus编写模块化css
7、vue.js的过渡编写交互动画
8、制作使用图标字体
9、解决移动端1px边框问题
10、移动端经典 css sticky footer 粘性布局
11、flex布局
项目开始
- build webpack 相关的配置文件夹(基本不修改)
- config webpack 相关的配置文件夹(基本不修改)
- index.js 可以修改端口号 是否自动打开浏览器 配置代理
- node_modules
- src 源码文件夹
- main.js 应用入口文件
- static 静态资源文件夹
- .babelrc babel的配置文件
- .editorconfig 通过编辑器的编码/格式进行一定的配置
- .eslintignore eslint 检查忽略的配置
- eslintrc.js eslint 检查的配置
- gitignore git版本管制忽略的配置
- index.html 主页面文件(单页)
- package.json 应用包配置文件
应用名称 版本号 依赖 命令是什么 - readme.md 说明文件
开发环境运行(平常用)
npm run dev 编码测试(npm run start 实际上也是运行npm run dev 因为自己配置了) 在内存中编译
访问: http://localhost:8080
编码，自动在内存中编译打包。查看效果
index.js里面配置浏览器是否自动打开
生产环境运行(打包运行)
先下载一个工具包 再部署运行某某文件夹
npm run build 打包发布 会生成本地打包文件
npm i serve -g （先下载serve 才可以使用serve dist）
serve dist
打包完毕后端口号改变成5000
- 以上执行命令的位置必须是在packjson所在的文件夹的位置(根目录)
相关概念
- 图片Base64：(不用发请求，图片转成字符串，文件不能大于1m)
图片使用base64编码(小图片)
样式中引用的小图片，在webpack打包会自动处理转化为样式内部的Base64编码字符串 - iconfont 使用图标库 （font-class 方式引用更简单）
可以在页面中引入在线的iconfont图标库资源
目录结构设计
- main.js 入口js 配置好了不能乱改名
- common 通用资源文件夹
- components 非路由组件文件夹
- pages 路由组件文件夹
- mock 模拟数据接口文件夹
- store vuex相关模块文件夹
- router 路由文件夹
安装依赖包
- 1、npm i stylus stylus-loader -S
stylus ===== stylus转换为css
stylus-loader ==== 让webpack可理解stylus - 2、编写样式（组件里写样式使用stylus语法）