vue项目记录
项目脚手架的安装 vue-cli 基于2。x的安装
vue init webpack vue-music 这个命令没有效果 显示要npm安装全局的
所以要安装vue-cli命令为
npm install -globla vue-cli
安装的时候提示出现错误 不用连字符
使用cnpm重新安装解决这个错误
安装完成之后切换到文件夹所在的位置 进行webpack的打包安装
cnpm vue webpack vue-music
提示项目的名字 vue-music
项目的描述 音乐播放器
作者名称
一些必要的选择
等他安装完成之后进入文件夹 运行 npm run dev 根据给出的地址链接出vue的生成初始化的页面
安装完成之后报错 查看日志看不懂
之后重新安装
vue init webpack vue-music
安装不了
报错显示有个模板指令安装不成功
但是你等待它自己安装完成之后又会成功了 能显示这个页面了、
基于项目的难度而言 音乐app现阶段还做不出来
所以从外卖的简单的app开始做已经做过的项目
这次项目要一个字一个字的理解完成
之后再开始新的音乐
重新开始做旅游的app
使用上面的安装过程能出现vue的页面 安装成功
========================================
下面是git的问题
当git clone 显示 权限被拒的时候以为是github公钥的问题 经过多次发现是 http的命令能下拉 ssh的命令不能下拉
根据指令查到的问题是 电脑名称被更改的问题
再次改回原来的名称 之后再试试
改会原来的名字之后发现还是权限被拒的问题
使用命令检查的方式ssh-vt git@github.com
如果你有麻烦ssh-add或ssh-agent。可以试试这个
重新添加身份和公钥成功之后还是不行 相同的提示
ls -al ~/.ssh命令查看本地是否有ssh文件
问题留着暂时使用http的方式下拉
继续上面的git clone ssh没有权限的问题
试着重新git一个ssh
注册全局的git
git config --global user.name "yourname"
git config --global user.email“your@email.com"
之后删除C盘里面.ssh里面的文件
继续生成新的邮箱
ssh-keygen -t rsa -C "your@email.com"（请填你设置的邮箱地址）
之后再C盘重新生成了两个文件
id_rsa和id_rsa.pub，用记事本打开id_rsa.pub
再之后再github里面去重新添加密钥就就行了
添加完成之后可以使用git clone SSH的方式了 不过要输入密码 确定可以
===============================
进入vue的旅游项目
在本的文件夹中把新生成的代码放置到线上代码中
使用git status查看本地仓库中的代码 但是我没有再本地生成仓库
如果要使用git协作的话其生成的条件是 先生成git的仓库 clone到本地 再本地打开仓库 再仓库的文件夹里面创建vue的项目 两个项目的名字一个大写一个小写 再构建的过程中它会询问你是否要确定的 确定就好了
然后再运行过程中又发现了一个问题 项目运行的时候只能使用项目文件夹的名字 npm run dev 大小与不项目会引发项目报错不运行
之后就是安装vue项目的必须的选项了
完成之后可以弹出vue的页面表示成功 之后就可以上传至git的仓库了
通过命令git status 查看
通过git add . 新加 和后面的那个.号要有个空格不然后面的提交就没有效果 日他妈的 花了我一天时间找原因
通过git commit -m '项目注释的内容' 提交
通过git push 上传
之后就能再github或者码云上查看对应的的代码了
按照上述的方式之后github上面的代码没有更新
码云和github的git操作方式是否一样的？
最后的PUSH的命令是git push -u origin master
这里是git的操作的链接https://blog.csdn.net/u014135752/article/details/79951802
根据上面的操作之后还是不能解决不能更新再github的问题
现在测试重新建立一个仓库
然后按原来的步骤重新来过
首先再E盘git clone 一个仓库
然后再e盘重新安装一个同样名字的 vue项目
这次下载很慢
后面发现根本的问题就是git add 。 add和.的中间没有加空格引发的问题
就是vue init webpack my-project很慢的一说
这个也是一个问题 是npm的版本太低了要升级 全局升级一下就好了
全部都搞好之后创建一个vue项目就非常的快了
还有创建的时候git不能选择菜单的问题
选择git bash 的安装目录，找到bash.bashrc文件
文件末未添加 ：
alias vue='winpty vue.cmd'
测试可以解决
这这里 新建的一个全新的项目 已经完成 并且上传到github的仓库了
============================================================================
下面就是正式的vue项目了 基本上是路由的简单的介绍
项目的代码列表的介绍已经有个大概的认识
mian。js文件是一个入口 里面规定了写出了app的工作原理的 还有路由跳转的方式 是根据网站不同来跳转的 路由的原理是根据hash和histroy来实现的 都是根据他们自带的方法判断是否前进和回退的
建立一个页面的组件文件夹里面放上细分的每个组件的名字
代码严格模式模式的检查 tab键是两个空格 按两下tab代码检查会报错 还有使用双引号也会报错的 如果有组件被引用了 但是没有注册也会报错的
之后在建立一个list的组件在页面里面 相当是细化的组件 都是通过路由跳转的
这里是关于路由的总体步骤
建立一个组件的单页面 在touch页面里面注册组件的名称 然后使用index.js的route来注册一个新的跳转页面 当然这是最简单的一种形式
几个主要注意的地方就是 在组件的文件里建立组件文件夹和.vue的组件 然后再组件里面注册它的名字 之后就是使用 路由的功能跳转组件的页面
其路由的设置一般有三个 path name component 当然要再最开头做单页面的组件的引用 使用的是@引用 不知道还有没有别的引用方式
==============================================================================
代码的初始化
有一个关于一像素边框的问题 再多倍屏幕上显示多个像素的问题 使用border的css文件直接解决 有收藏
还有一个关于移动端300毫秒点击延时的问题 再移动端开发的时候某些浏览器或者某些机型使用的时候 使用click事件的时候会延时300的问题
引入一个fastclick的库来解决这个问题 npm install fastclick --save 使用这个命令引用且保存在config文件里面
之后再main的文件里面引入这个库的解决方式
==========================================================
首页的开发
安装对应的依赖包
stylus stylus-loader
使用npm报网络错误使用的淘宝镜像就可以了 不过要更新淘宝镜像
关于vue的首页的开发都是使用模块的方式 即一个页面可以分为多个小的组件页面 就是所谓的父子组件 再父组件的文件里面生成.vue父组件之后 再新建一个问文件夹放子组件components
其使用的方式是再子组件里面新增子组件的名字
然后再父组件中使用import 子组件的名字 from 子组件的地址
之后再父组件中使用组件的属性components的方式把子组件的名字写进去
每个子组件划分好了之后就可以根据原型图来写每个模块的样式了
首先是header的样式
根据原型图可以分为三个小的样式
左边 中间 和右边 使用一个大的div包裹
写样式的时候使用的是stylus的样式 lang='stylus' 而且这个组件的样式不对其他的组件的样式产生影响 加上关键字scoped就可以了
关于写移动端的样式的时候不是用px的这里使用rem的自适应布局
一个rem对应的是html设置的font-size的大小
但是设计师给的圆形稿又是2倍尺寸 所以可以吧html的font-size设置为50px 这样就完美还原设计稿和rem自适应对应的尺寸了
就是说1rem对应完美的1px
左右布局使用的是浮动的方式
可以使用flex：1为一的方式把中间的部分自动撑开
flex：1为1的意思是？
首先明确一点是， flex 是 flex-grow、flex-shrink、flex-basis的缩写, flex 的默认值是以上三个属性值的组合
flex:1的值是 1 1 0%
=============================================================================
这里是页面的css和阿里图标的使用 对页面代码的使用不大
iconfont的使用
进入iconfont的首页 ----图标管理 ------我的项目 -----填写项目资料 协作者之类的
登录iconfont的官网 使用找到对应的图标 或者搜索或者找大项目的图标
选定图标之后根据项目什么的下载至本地 解压文件之后 找到对应的字体文件和css文件
在已有的vue项目中的 src-assets-styes里面新建一个文件夹名字叫iconfont放置字体文件 在styles里放置css文件 在css文件更改正确的引用路径 使用当前的路径
因为是一个全局的引用的文件 所以直接在main的文件里面引用 所有的项目文件都能使用
webpack使用时候的代码引用的简化
在css文件中代码引用的简化
之后就是代码的css的编写确定它的位置的css的代码 还有css的代码的简化
设置全局的css变量的时候 再styles的问题件里面新建一个存放全局css变量的新文件名 然后再里面赋值给css变量新的名称 比如 $bgclor = #ccc
使用引用的时候直接使用 @import ‘。。。。。。。。。。。’这种格式就好了 不用加编辑器自能给出的url 然后再使用颜色的时候使用变量名称就好了 比如 background $bgcolor 它的意思等同于 background #ccc
项目里面很长的目录的名字可以使用webpack的配置简化为一个变量或者一个符号 再webpack.base.conff.js的文件里面去找到对应的配置
swiper的使用 引入node模块 使用github上面给出的代码依次放入到mian文件中 然后使用 不要的功能可以删除
引入的文件有css文件 node依赖 Vue.use(awesomeswiper)
之后就是对应的创建子组件里面的代码了 template代码和javascript的代码
图片的宽高比例的自适应的方式
可以使父级div的width为100%
overflow:hidden hieght；0 padding-bottom:百分比 这个就是设置图片自动比例的
如果把百分比直接写再height上面的话是不行的 它表示是总的父级盒子的高度的 所以没有效果了
github创建分支的使用流程
有个主分支的按钮 点击之后会弹出一个下拉的创建窗口 输入你要创建分支的名字 就创建了一个线上的分支
然后你要到线下编辑代码 就要先到线上拉取分支要本地 git pull
之后切换到需要的分支上就行了 git checkout xxxxxx
然后再IDE上编写你的代码 写完了确定了没问题之后提交 然后合并到主分支
切换分支的命令 git checkout master
第一次能运行服务器第二次又不行的问题 首先报错 格式不对 空格的问题 使用软件格式化之后 有报错是相同的名字 要区分大小写 要使用相同的套管之类的东西
使用切换分支不能解决问题
百度的查找出来的解决方案是引用的时候要区分大小写 不能再有大写的问题件里面引用小写的名字 大概这个意思
检查之后发现的问题是 github上面复制的代码第二次使用的时候 不能通过大小写的检测了 还有引用的css文件也是 注释之后就能运行
但是它不影响程序的运行 有效果可以直接运行的
然后代码写好之后 提交本地的分支代码到线上的分支代码 和提交没有分支的时候是一样的
git add.
git commit -m "xxx"
git push
提交之后然后切换到主分支上 git checkout master
然后合并线上的分支代码 git merge origin/index-swiper
最后再git push 提交下
这个就是项目级的代码运行的流程 分支上的代码确定没有问题的时候 就会合并到主分支上面
padding-bottom这个东西要搞明白
还有图片的放再整个div要全部自适应的显示 使用img图片的width 和height的100%来表示 当然是相对父级的 父级的要设置好
这里有一段图片自适应和分为多个图标的css代码
小模块化的图标增加时候实现可以拖动的效果
既然是拖动的轮播效果 还是要用到swiper的
根据轮播图的效果做出小图标拖动的效果 只不过轮播的图片是自己定义的一个个小的图标
代码不是写的一摸一样的才有效果的 是要看看到那个div上面运行v-for 那个div上面绑定id和url的链接的 要自己找的 swiper的东西就是用一下而已
vue计算属性的应用 根据其他数据生成的一种结果 可以保存数据 不用每次都重新加载 有缓存的机制
关于一个区块里面有好多个小的div的要展示 但是放不下的情况
这时候使用分页的形式
首选确定你要拖动的数据 就是你要foreach的数据 这里就是swiperList的这个数据 首选你要一个空的数组来放
遍历之后拿到这个数组的下标 看要这个区块是要显示多少个小图标 一般是按8个算的 使用向下取整的方式来计算图标的个数
如果有大于或者等于8的情况表示 有第九个图标 这个图标就是要放再下一页的 所以要重新定义一个新的数组 来存放多的图标 或者大于等于16的时候又要计算一次
这个地方出过错误 再计算属性的时候 判断数组的时候写成了小括号 所以报错找不到function
向下取整math.floor（index/16）
小图标下面的文字过长的时候显示三个小点的样式
这个是借助css的样式来完成的？
使用overflow hidden; white-space nowrap; text-overflow ellipsis;着三个样式就能完成多余的文字是三个小点的功能！！
关义更新分支的问题 不经过pull的代码在本地更新之后只会在主分支想更新 子分子还是以前的代码 要更新我用得重新pull得方法
更新代码得提交顺序是 本地子分子提交 然后切换到主分支提交
子分支 git add. git commit -m 'xx' git push git checkout master git push git merge origin/xxx git push 流程就是这么个流程了
取消更改 git checkout .
text-inden 首行文本得缩进 可以使用padding
浙公网安备 33010602011771号