vue-项目
环境配置:
1.安装node git
2.注册码云账号 并创建自己的库 win在 git bash中配置公钥
3.将码云上项目克隆到本地 git clone 地址(ssh)
4.通过脚手架 将vue相关文件下载到相应文件夹
5.将本地的文件同步到码云上
退出服务
git status
git add .
git commit -m 'project initialized'
git push
项目代码
README.md --项目说明包
package.json -- 存放依赖包
package-lock.json -- package锁文件 确定第三方包的版本
LICENSE -- 开源协议的说明
.postcssrc.js -- postcss的配置文件
.gitignore -- 配置不需要上传的文件
.eslintrc.js -- 配置了一些代码的规范
.eslintignore -- 这里面的配置项不受.eslintrc.js的检测
.editorconfig -- 编辑器的配置项
.babelrc -- 语法解析器配置项 将vue转换成浏览器能执行的代码
多页面应用与单页面应用优缺点
多页面应用
每次页面跳转,后端返回一个新的 HTML
优点:首屏时间快(页面首个屏幕的内容展现速度),SEO 效果好(搜索引擎可以识别首页中的跳转其它页面的链接)
缺点:页面切换慢(每次跳转页面需发送 HTTP 请求)
单页面应用
JS 感知路由(URL)变化,动态清除页面内容并将新页面的内容挂在到页面上(JS 渲染),此时由前端实现路由
优点:页面切换快
缺点:首屏时间慢,SEO差
在vue中不使用标签进行页面跳转,使用
项目代码初始化
-
防止手指放大缩小页面
修改viewport,如图。 -
基础样式修饰
main.js:import './assets/styles/reset.css' -
移动端1像素边框
main.js: import './assets/styles/border.css' -
300ms点击延迟
安装fastclick: npm install fastclick --save
main.js:
import fastClick from 'fastclick'
fastClick.attach(document.body) -
iconfont注册、创建项目
header
①.使用 Stylus 辅助开发,终端中运行以下命令:
npm install stylus --save
npm install stylus-loader --save
- 注意要重新启动编译项目
②.合理拆分组件,提高开发效率。
组件通过 import 方式导入
注意要填写子组件中 export default 中的 name 属性,声明组件名称
③.组件中使用 stylus 编写样式