目录
Home.vue首页中swiper组件的开发，以及关于分支的线上创建、拉取到线下、合并到主分支master上
项目启动前的准备
百度搜索码云
2）进入码云官网注册
2）进入码云官网注册
3）注册完成后登录
4）在自己首页左下角创建一个项目
5）填写项目名称信息
6）填写信息 
7）项目创建成功
- 百度搜索git, 进入官网
9）下载git, 并且安装git
- 安装成功后鼠标右击可以看到Git Bash Here
- 点击去查看 git版本
- 把git 和 码云 进行匹配
点击 SSH公钥
点击怎么样生产公钥
点击仓库管理 ---> 公钥管理
点击生成/添加SSH公钥
按照步骤操作即可
- 把码云中的线上项目克隆到本地
关于项目安装和创建时的准备
安装前注意：（温馨提示不行用热点wifi）
- （删除vue-cli --> npm uninstall @vue/cli）
- 如果安装不行。可以访问 NPM镜像-NPM下载地址-NPM安装教程-阿里巴巴开源镜像站
- npm cache clean --force命令就是清除这种缓存
- 在里面输入
- // 全局安装 vue-cli
-
npm install --global vue-cli
- // 创建一个基于 webpack 模板的新项目
-
vue init webpack my-project
- // 安装依赖
-
cd 项目名称
npm install
npm run serve
把本地上传到码云
- git add . 先把项目放到git的缓存区域
- git commit -m ‘新增vue-cli’
- git push 上传到线上码云
- 使用 cmd命令 输入 ipconfig 来查看网络ip地址，然后在项目中的config中的index.js文件中。把localhost 修改为 IPv4地址
-
上传码云时。Git commit -m ‘init project’时报错
1）在git命令行中重新输入命令：
先输入：$ git config --global user.name “你的名字”
回车后，
再输入：$ git config --global user.email “你的邮箱地址”
完成后再提交就没问题了。
创建好的vue-cli中的文件分别表示什么意思
单页面应用
- 页面之间的跳转
<router-link to=”/list”></router-link>
- 在组件中template标签下面只能有一个div包裹
- 例如<template>
<div>
....
</div>
</template>
项目首页的配置项介绍
Home首页的准备
- 在index.html中的meta中的配置进行完善
<meta name=”viewport”content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scale=no”>
- 统一基础样式reset.css
下载reset.css
3)把reset.css放到项目目录中
src目录 -> assets目录 -> 新建一个styles文件 -> res
- 引入reset.css样式
在 main.js中引入 --> import ‘./assets/styles/reset.css’
- 手机项目解决1像素物理问题
下载border.css并引入（像引入reste.css样式一样）
- 在vue的main.js文件中引入
import ‘./assets/styles/border.css’
import ‘./assets/styles/reset.css’
备注：（./ 表示 上一级 目录）
7）手机延迟300毫秒Bug问题
要在项目中引入一个fastclick库
步骤：
- 关闭项目，在项目目录中 --> npm install fastclick --save 在重启项目服务
- 然后在vue项目中的main.js中引入fastclick库
步骤：
- main.js ---> import fastClick from ‘fastclick’
- main.js ---> fastClick.attach(document.body)
开发时需要iconfont,需要百度搜索iconfont
Home.vue首页中header.vue组件的开发
1） 如何在项目中使用iconfont
步骤：
1：在iconfont官网中选中自己所需要的图标。放到iconfont创建的项目文件中，再通过点击下载到本地
2：在下载好的iconfont文件中选出一些文件放到src->assets->styles
iconfont.css 、 iconfont.json、iconfont.ttf、 iconfont.woff、 iconfont.woff2
注意：需要修改一下iconfont.css里面的路径
在vue项目 main.js 中引入iconfont.css
import './assets/styles/iconfont.css'
安装一个 stylus 样式管理 (可能版本问题不支持）
步骤：
1：在项目中安装npm install stylus --save
2：在安装一个stylus-loader npm install stylus-loader --save
3：重启项目 npm run dev
4：在每一个项目.vue的style标签样式中使用stylus
例如： <style lang=”stylus”>
.box
Width:100rem
.son
Height:200rem
.son1
Width:200rem
.son1-son
Width:200rem
</style>
5：为了组件之间的id 和 class名称不冲突，要在style标签中设置一个 scoped 进行限制范围(限制仅仅在本组件有效，其他组件无效）
例如：<style lang=”stylus” scoped></style>
3） 项目中关于rem 和 px的关系
1：在reset.css中设置了body中的font-size:50px;
相当于 1rem = 50px
2：一般情况设计师给的设计图都是2倍的大小
1rem = 50px * 2 = 100px
相当于 100px / 1rem = 100 <=或=> 100px / 100 = 1rem
200px / 2rem = 100 <=或=> 200px / 100 = 2rem
假设 给 86px 等于 0.86rem
算法： 86px / 100 = 0.86rem
4）项目结构的分析
例如
1：home（首页） 是由很多个组件组成，在home文件中创建一个compoents文件，然后在 components 文件下创建组件 xxx.vue
2：在home中引入组件
<template>
<home-header></home-header>
</template>
<script>
import HomeHeader from ‘./components/Header’
Export default {
Name: “Home”,
Components: {
HomeHeader:HomeHeader 或写 HomeHeader
// es6中键值对名字一样可以写一个即可
}
}
</script>
Home.vue首页中swiper组件的开发，以及关于分支的线上创建、拉取到线下、合并到主分支master上
- 分支的线上创建
- 拉去到线下
-
1：在项目文件上鼠标右击 --> 点击Git Bash Here --> 输入git pull
git pull： 表示从线上把新创建的分支拉取到线下来
2：切换到这个分支上去
git checkout index-swiper
3：打印分支状态
git status
- 项目中使用swiper轮播组件：
-
1：地址：GitHub - surmon-china/vue-awesome-swiper: 🏆 Swiper component for @vuejs
2：使用swiper步骤如图所示
- 合并到主分支master上
1：git add .
2：git commit -m ‘add swiper’
3：git push
4：git checkout master 表示切换到主分支master
5：git merge origin/index-swiper 表示把分支合并到主分支master
6：git push
613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
