VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)

这个以前我刚学完前端基础知识后,第一次接触vue轻量框架做的笔记,小白跟着它耐心慢慢看看,再自己做个项目慢慢琢磨,会有不少收获。(这个把一个普通css html js 写的项目换成vue的格式的笔记)
刚开始这样跟着做,可能会很僵硬,但是做多几次项目,你就会自然而然发现里面一些原理啦,就能自己写啦
【个人也比较喜欢用axios进行数据获取,还有可以很方便得用共同模块,循环dom什么的,都很方便】

——————————————————————————————
【首先全局安装node-cli环境 npm install -global vue-cli】
1、官网下载git,一直next就可以了,然后终端命令git -version 如果能看到git版本就成功
2、码云新建个人仓库
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第1张图片
3、然后点击头像里的设置,点击SSH公钥,然后返回电脑桌面,右键git base(相当于用linax的终端),输入ssh-keygen -t rsa -C "账号"回车,再输入 cat ~/.ssh/id_rsa.pub回车,然后把下面公钥复制到码云的公钥大框里面。
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第2张图片
4、再在码云点开新建好的仓库项目,点击克隆,选择ssh,然后复制下载地址,返回git base框,cd进入想要建立的项目文件夹的位置,输入“git clone 刚刚复制的地址”,就可以看到该位置出现码云的项目文件夹,码云的项目 就和电脑的项目同步了。
5、用webpack新建vue项目:cmd进入终端,cd进入项目文件夹的上一层(这里项目文件夹名叫Travel),然后vue init webpack Travel 回车,一直回车就好了
6、Cmd进入travel文件夹 npm run dev,然后命令错误 就npm install先下载依赖,再npm run dev,让文件夹跑起来
7、同步本地和码云的代码:Ctrl+c退出服务器,然后在travel目录下执行 git status,可以看到本地多出来的文件,然后git add.回车,然后,git commit -m ‘add’回车,然后git push,已经同步了(之后再次添加也一样)
————————————————手机端webapp项目初始化————————————
8、使用户不能放大缩小页面
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第3张图片
9、Reset重置web页面css文件(不同手机初始化样式不同):【reset、border、】
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第4张图片
10、退出服务端,在cmd中进入travel项目文件夹,npm install fastclick --save
然后在main.js引用并使用:(解决点击延迟)
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第5张图片
11、去iconfont新建一个travel项目
12、把helloworld.vue等没用的 代码和相关import引用删了,修改index.js路由根目录改为home.vue显示,在src下新建pages文件夹,把页面都放着,在assets下新建styles文件夹放css文件
——————————————代码编写——————————
13、退出服务器,下载stylus安装包,辅助编写css代码:cmd进入travel文件夹,npm install stylus --save,然后npm install stylus-loader --save,然后重新启动项目(安装sass的命令是cnpm install node-sass@latest)
14、在需要些css的vue文件下引用stylus,stylus下px变成. 1rem/1.1rem:
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第6张图片
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第7张图片
15、引入iconfont图标步骤:
(1)在官网把图标放进购物车,然后批量下载,解压,把里面这种格式的文件放进assets/style下的iconfont文件夹里,然后把iconfont.css放在style文件夹下,再修改iconfont.css里url的文件夹位置
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第8张图片
(2)再mian.js引用iconfont.css
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第9张图片
(3)复制iconfont网页的所选icon代码,直接黏贴到div或span或li之类的标签里,记得加固定class=“iconfont”
在这里插入图片描述
(4)如果显示不出来图标,重新安装stylus和stylus-loader

16、使用全局通用颜色:在styles下新建一个varibles.styl,在里面放css变量,然后在css样式里面用@import引入styl文件
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第10张图片
在这里插入图片描述
17、创建文件位置别名:然后要重启服务器。别名在css中使用时 记得在别名前加~
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第11张图片
18、上传好文件到git。在码云里进入我的项目,然后新建分支

然后在终端travel下运行git pull显示分支,再运行git checkout 分支名,就可以把线上分支拉到本地,之后开发的代码,就是在这个新分支里的了。运行git status 可以看到现在本地所在哪个分支上
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第12张图片

19、引用swiper插件(拉动页面用better-scroll,步骤根据官网教程一样):
(1)终端在travel文件夹下运行 npm install [email protected] --save,然后重启服务器。然后在main.js里进行引入:
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第13张图片
(2)然后在vue组件内使用(其实这个插件的安装和使用都是查看官网的步骤可以复制的):
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第14张图片
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第15张图片
(3)使用swiper插件里的某些div,例如下标(也就是上图dom最下面的div);可以在浏览器f12看下标的class名,然后用>>>进行突破scoped的穿透,修改下标的样式:
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第16张图片
在swiperOption里加一个loop:ture,就支持循环轮播了
在这里插入图片描述
20、按比例撑开swiper的高度,使得页面刷新不抖动,在外层包裹一个class为wrapper的div,然后设置(31.25%是swiper里所用img的长宽比例):[图片外层都这样]
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第17张图片
21、把写的swiper上传到git的swiper分支里,并主分支master将其合并(意思是:把小功能页面单独放进分支,进行测试,可以了就合并放master上线):
因为刚刚已经进入swiper分支开发代码,所以Cmd运行git add . 就可以把新写的代码上传分支,再git commit -m ‘change’ (change是自己写的上传的标记),在git push 。就把分支内容上传了。
然后git checkout master 切换到master分支上,然后git merge origin/index-swiper 把新分支上的内容合并到master上,再git push提交
22、status下的css样式可以通过封装的样式引用:
将精彩重复用的样式封装在stly文件,然后在vue文件下style引入并使用:
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第18张图片
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第19张图片
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第20张图片
23、父子组件传递数据(如果各子组件自己接收数据,就要发送很多次请求,性能不好,直接父组件接收,传给子组件):
(1)在home.vue import上axios,并且cmd进入travel文件夹,命令npm install axios --save 下载axios。把json文件放进static/mock文件夹下【static文件夹是存放静态资源,外部是可以直接访问到的】。并添加并使用方法获取json数据。
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第21张图片
(2)在gitignore文件里加上static/mock文件夹,使得它虽然可以直接被外部访问,但是不能直接通过浏览器输入地址访问
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第22张图片
(3)添加proxy代理,这样的话以后要换数据位置,就可以直接在proxy里面换数据地址位置:下图的/api就直接代替了/static/mock,以后可以直接这里换掉/static/mock数据地址后缀;target可以直接换成后端的数据地址
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第23张图片
(4)父组件用axio方法接收json数据后,把子组件需要的数据拿出来
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第24张图片
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第25张图片
(5)父组件用:bind也就是简写的:把拿出来的数据,传递给子组件
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第26张图片
(6)子组件用prop接收父组件传过来的数据,注意要定义接收的数据类型,就可以直接用数据了
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第27张图片
24、对象循环+对象里的数组 双层嵌套循环:
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第28张图片
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第29张图片
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第30张图片
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第31张图片
24、城市列表页功能(兄弟组件数据传递):
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第32张图片
功能一:点击字母,显示相应字母城市
(1)字母组件监听字母li的click事件,然后用$emit向外触发change事件,并用change事件携带li里的innertext信息
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第33张图片
(2)父组件用@监听子组件向外触发的事件,定义的事件方法放在methods里面
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第34张图片
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第35张图片
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第36张图片
上图这个letter所指的数据,还会指的是下面的滑动事件的this.letters[index]的值

(3)用:绑定数据,把data里的letter数据传递给城市列表子组件,子组件用prop接收父组件传来的数据
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第37张图片
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第38张图片
(4)子组件在需要被滚动的dom元素属性加:ref=“key”
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第39张图片
(5)城市列表子组件设置滚动方法
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第40张图片

功能二:滑动字母表,根据滑动距离,计算出此时字母,从而显示相应字母城市列表
(1)在字母表的vue文件里
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第41张图片
(2)在字母表的vue文件里定义触摸滑动事件
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第42张图片
(3)在字母表的vue文件里
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第43张图片
(4)添加:ref
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第44张图片
(5)开始计算滑动距离,然后通过滑动距离算出对应的letters数组的index,再找到对应的字母
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第45张图片
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第46张图片
(6)把计算出的字母传出去,注意:下图写错了,change携带的两个数据其实是同一个数据,都是指现在所位于的这一个字母,而其他组件所接收到的,也就一个字母
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第47张图片
(7)因为滑动可能会短时间滑动多次,频率快,所以要设一个时间限制流提高性能,意思是假如你执行了滑动动作,让你16毫秒后再去执行,如果你16毫秒内又滑动,就会以新的滑动动作为指标执行内容
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第48张图片
25、城市搜索功能
(1)另起一个search.vue组件,里面的搜索区域层级设为1,覆盖之前的城市列表
(2)
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第49张图片
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第50张图片

(3)把接收到的cities数据与双向绑定的keyword做匹配
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第51张图片
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第52张图片
(4)把所匹配的城市在HTML上循环渲染
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第53张图片
(5)插入better—scroll插件里的滑动功能,使得search-content区域可以滑动,并用mounted使用,记得在使用Bscroll功能的dom属性加:ref
在这里插入图片描述
在这里插入图片描述
(6)如果匹配内容为空,则显示“没有匹配内容”
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第54张图片
在这里插入图片描述
(7)如果输入内容为空,则整个search-content不显示,使得下面盖住的城市列表显示出来。
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第55张图片
26、使用vue x共享数据:多个组件之间,其中一个组件中的公用数据改变,其他组件都感知得到也改变(点击城市列表的某一个城市,首页的城市定位就显示那个城市)
(1)cmd进入travel文件夹npm install vuex --save下载vue x
(2)因为vuex配置比较复杂,所以在src下新建store/index.js,在这个index.js配置:
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第56张图片
(3)再在外面的main.js引入
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第57张图片
因为在main.js里的根实例里引入了store,所以下面的每个组件都可以直接用这个store,使用格式是 this.$store.state.city state是store里的其中一个存放数据的地方
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第58张图片
(4)在header.vue里直接使用公共数据,无需再引入
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第59张图片
(5)使用vuex的方法改变store里的数据的示意图
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第60张图片
【上图写错了,mutation里设置的函数方法自动附带第一个参数是state】

(6)在选择city的选项添加click监听事件,使用this.$store.dispatch来向vuex传入changeCity方法以及方法里的city参数,这里的changeCity等于是一个action方法
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第61张图片
在这里插入图片描述
或者可以直接用commit方法直接调用mutations,直接省去actions环节
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第62张图片

(7)在actions里写一个与刚刚传进来的action方法名字一样方法,使用mutations改变数据
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第63张图片
27、编程式导航:点击城市,跳转到首页
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第64张图片
28、用localStorage存储本地信息,相当于cookie,记住用户选择的城市;但是有些用户浏览器关闭这个功能,如果强制使用会报错,程序崩溃,所以要使用try{ }catch(e){ }
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第65张图片
27,、简化store的index.js代码,增加可维护性
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第66张图片
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第67张图片
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第68张图片
29、简化公共数据使用的引用写法(注意是在computed里改,因为是属于页面数据的计算)
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第69张图片
在这里插入图片描述
在这里插入图片描述
30、简化改变公共数据的步骤:利用vuex里提供的mapMutations方法,使组件可以直接使用mutations中的改变stage数据的方法,然后把所要改变的数据传进去
(1)引入mapMutations方法
在这里插入图片描述
(2)传所要更改的数据进mutations的方法里
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第70张图片
31、在App.vue里使用vue自带的keep—alive标签,增加缓存文件功能,减少axios文件请求,优化网页性能
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第71张图片
32、使用keep—alive后,使用其自动提供的activated生命周期方法,来改变某些请求json数据内容
(1)
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第72张图片
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第73张图片
(2)根据state数据改变axios请求地址
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第74张图片
(3)开始使用activated生命周期方法来根据用户操作动态改变是否重新执行axios
A.VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第75张图片

B.利用lastCity的改变与否和activated来控制是否重新执行axios请求(axios请求地址里的this.city本来就是根据state已经动态改变了的)
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第76张图片
33、关于router-link跳转链接样式
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第77张图片
34、循环赋予to值的链接地址
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第78张图片
35、在某个组件内使用window全局事件的时候,同时记得解绑
在这里插入图片描述
36、使用vue提供的递归组件功能,实现把json数据里有层次关系的数据,一层一层渲染出来,比如json数据是这样:
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第79张图片
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第80张图片
37、根据动态路由,动态获取数据去渲染页面
(1)在index.js里设置动态detail路由
在这里插入图片描述
(2)根据动态id描写动态axios请求地址
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第81张图片
(4)获取到数据的方法
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第82张图片
(5)
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第83张图片
(6)
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第84张图片
(7)
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第85张图片
(8)子组件通过prop获取父组件的数据,然后把相应的写死的数据修改成动态数据(上面父子组件传输数据一样)
(9)解决App.vue用了keep-alive后的缓存问题(其实也可以直接在detail.vue里用activated)
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第86张图片
37、在router文件夹里的index.js里解决滚动相互影响问题
其实可以直接看vue官网中的router的功能,直接复制的代码
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第87张图片
38、制作动画组件,并其他组件去使用
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第88张图片
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第89张图片
39、
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第90张图片
40、真机测试:
(1)把packsage.json里的“dev”变成这
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第91张图片
(2)前端电脑终端运行window电脑运行ipconfig ,苹果电脑运行ifconfig,查看电脑在内网的ip地址,然后手机和电脑连同一个局域网,手机输入电脑ip地址加上端口,就可以显示项目了
41、解决某些安卓手机浏览器没有polyfill,从而看不到页面的问题
(1)cmd进入travel文件夹,npm install babel-polyfill --save下载
(2)引用
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第92张图片
42、打包上线:
(1)如果需要把自身前端代码放进一个文件夹,并用文件夹名访问,就先改config里的index.js的assetsPuthlicPath改成文件夹名
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第93张图片
(2)cmd进入travel,npm run build,把压缩后的文件放进自己起的那个文件夹里,然后给后端放到htdoc根路径即可
43、如果项目文件比较大型,达到Mb以上,可以用异步组件
在router里的index.js里,修改路由页面插件
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第94张图片
VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第95张图片
页面里引用的组件也可以这么异步

VUE基础构建整个项目的全流程!含git基础操作(本人超细心整理,适合VUE小白)_第96张图片

你可能感兴趣的:(VUE)