Vue.js

环境及知识准备

• Node 使用nvm来管理Node 链接
• Git Git简易基础 链接
• Webpack 链接
• npm 链接
• babel 链接1 链接2
• ESLint 链接
• ES6
• Sass
• vue.js 官网

Vue

---

vue cli安装

npm  install -h @vue/cli

---

vue创建项目

先进入项目目录

vue跳转盘符需要特殊的操作

cd /d d:

这样才能跳转到D盘

vue create 项目名字

---

css模块化设计

• 设计原则
  • 可复用能继承要完整
  • 周期性迭代
• 设计方法
  • 先整体后部分再颗粒化
  • 先抽象再具体

---

scss引入

<style lang-"scss">
	@import "./element.scss"
</style>

<style lang="scss" module>
	@import ".element.scss"
	.btn{
		color:red;
	}
</style>

---

Js组件设计

• 设计原则
  • 高内聚低耦合
  • 周期性迭代
• 设计方法
  • 先整体后部分再颗粒化
  • 尽可能的抽象

---

自适应

1. 基本概念
   a. CSS像素、设备像素、逻辑像素、设备像素比
   b. viewport
   c. rem
2. 工作原理
   a. 利用viewport和设备像素比调整基准像素
   b. 利用px2rem自动转换css单位

---

viewport

<meta name="viewport" content="width=device-width,initial-scale=1.0"

• width：控制viewport的大小，可以指定的一个值，如600，或特殊的值，如device-width为设备的宽度（单位为缩放为100%时的CSS的像素）
• height：和width对应，指定高度
• initial-scale：初始缩放比例，也即是当页面第一次load的时候缩放比例
• maximum-scale：允许用户缩放到的最大比例
• minimum-scale：允许用户缩放到的最小比例
• user-scalable：用户是否可以手动缩放

---

SPA设计

• 设计意义
  • 前后端分离
  • 减轻服务器压力
  • 增强用户体验
  • Prerender预渲染优化SEO
• 工作原理
  • History API
  • Hash