Vue.js,Vuejs
Vue.js,Vuejs
文章目录
- 环境及知识准备
- Vue
- vue cli安装
- vue创建项目
- css模块化设计
- scss引入
- Js组件设计
- 自适应
- viewport
- SPA设计
环境及知识准备
Node
使用nvm
来管理Node
链接Git
Git
简易基础 链接Webpack
链接npm
链接babel
链接1 链接2ESLint
链接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组件设计
- 设计原则
- 高内聚低耦合
- 周期性迭代
- 设计方法
- 先整体后部分再颗粒化
- 尽可能的抽象
自适应
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
评论暂时关闭