VUE基础构建整个项目的全流程！含git基础操作（本人超细心整理，适合VUE小白）

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

——————————————————————————————
【首先全局安装node-cli环境 npm install -global vue-cli】
1、官网下载git，一直next就可以了，然后终端命令git -version 如果能看到git版本就成功
2、码云新建个人仓库

3、然后点击头像里的设置，点击SSH公钥，然后返回电脑桌面，右键git base（相当于用linax的终端），输入ssh-keygen -t rsa -C "账号"回车，再输入 cat ~/.ssh/id_rsa.pub回车，然后把下面公钥复制到码云的公钥大框里面。

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、使用户不能放大缩小页面

9、Reset重置web页面css文件（不同手机初始化样式不同）：【reset、border、】

10、退出服务端，在cmd中进入travel项目文件夹，npm install fastclick --save
然后在main.js引用并使用：（解决点击延迟）

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：


15、引入iconfont图标步骤：
（1）在官网把图标放进购物车，然后批量下载，解压，把里面这种格式的文件放进assets/style下的iconfont文件夹里，然后把iconfont.css放在style文件夹下，再修改iconfont.css里url的文件夹位置

（2）再mian.js引用iconfont.css

（3）复制iconfont网页的所选icon代码，直接黏贴到div或span或li之类的标签里，记得加固定class=“iconfont”

（4）如果显示不出来图标，重新安装stylus和stylus-loader

16、使用全局通用颜色：在styles下新建一个varibles.styl,在里面放css变量，然后在css样式里面用@import引入styl文件


17、创建文件位置别名：然后要重启服务器。别名在css中使用时 记得在别名前加~

18、上传好文件到git。在码云里进入我的项目，然后新建分支

然后在终端travel下运行git pull显示分支，再运行git checkout 分支名，就可以把线上分支拉到本地，之后开发的代码，就是在这个新分支里的了。运行git status 可以看到现在本地所在哪个分支上

19、引用swiper插件（拉动页面用better-scroll，步骤根据官网教程一样）：
（1）终端在travel文件夹下运行 npm install [email protected] --save,然后重启服务器。然后在main.js里进行引入：

（2）然后在vue组件内使用（其实这个插件的安装和使用都是查看官网的步骤可以复制的）：


（3）使用swiper插件里的某些div，例如下标（也就是上图dom最下面的div）；可以在浏览器f12看下标的class名，然后用>>>进行突破scoped的穿透，修改下标的样式：

在swiperOption里加一个loop：ture，就支持循环轮播了

20、按比例撑开swiper的高度，使得页面刷新不抖动，在外层包裹一个class为wrapper的div，然后设置（31.25%是swiper里所用img的长宽比例）：[图片外层都这样]

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引入并使用：



23、父子组件传递数据（如果各子组件自己接收数据，就要发送很多次请求，性能不好，直接父组件接收，传给子组件）：
（1）在home.vue import上axios，并且cmd进入travel文件夹，命令npm install axios --save 下载axios。把json文件放进static/mock文件夹下【static文件夹是存放静态资源，外部是可以直接访问到的】。并添加并使用方法获取json数据。

（2）在gitignore文件里加上static/mock文件夹，使得它虽然可以直接被外部访问，但是不能直接通过浏览器输入地址访问

（3）添加proxy代理，这样的话以后要换数据位置，就可以直接在proxy里面换数据地址位置：下图的/api就直接代替了/static/mock，以后可以直接这里换掉/static/mock数据地址后缀；target可以直接换成后端的数据地址

（4）父组件用axio方法接收json数据后，把子组件需要的数据拿出来


（5）父组件用：bind也就是简写的：把拿出来的数据，传递给子组件

（6）子组件用prop接收父组件传过来的数据，注意要定义接收的数据类型，就可以直接用数据了

24、对象循环+对象里的数组 双层嵌套循环：




24、城市列表页功能（兄弟组件数据传递）：

功能一：点击字母，显示相应字母城市
（1）字母组件监听字母li的click事件，然后用$emit向外触发change事件，并用change事件携带li里的innertext信息

（2）父组件用@监听子组件向外触发的事件，定义的事件方法放在methods里面



上图这个letter所指的数据，还会指的是下面的滑动事件的this.letters[index]的值

（3）用：绑定数据，把data里的letter数据传递给城市列表子组件，子组件用prop接收父组件传来的数据


（4）子组件在需要被滚动的dom元素属性加：ref=“key”

（5）城市列表子组件设置滚动方法

功能二：滑动字母表，根据滑动距离，计算出此时字母，从而显示相应字母城市列表
（1）在字母表的vue文件里

（2）在字母表的vue文件里定义触摸滑动事件

（3）在字母表的vue文件里

（4）添加：ref

（5）开始计算滑动距离，然后通过滑动距离算出对应的letters数组的index，再找到对应的字母


（6）把计算出的字母传出去，注意：下图写错了，change携带的两个数据其实是同一个数据，都是指现在所位于的这一个字母，而其他组件所接收到的，也就一个字母

（7）因为滑动可能会短时间滑动多次，频率快，所以要设一个时间限制流提高性能，意思是假如你执行了滑动动作，让你16毫秒后再去执行，如果你16毫秒内又滑动，就会以新的滑动动作为指标执行内容

25、城市搜索功能
（1）另起一个search.vue组件，里面的搜索区域层级设为1，覆盖之前的城市列表
（2）

（3）把接收到的cities数据与双向绑定的keyword做匹配


（4）把所匹配的城市在HTML上循环渲染

（5）插入better—scroll插件里的滑动功能，使得search-content区域可以滑动，并用mounted使用，记得在使用Bscroll功能的dom属性加：ref


（6）如果匹配内容为空，则显示“没有匹配内容”


（7）如果输入内容为空，则整个search-content不显示，使得下面盖住的城市列表显示出来。

26、使用vue x共享数据：多个组件之间，其中一个组件中的公用数据改变，其他组件都感知得到也改变（点击城市列表的某一个城市，首页的城市定位就显示那个城市）
（1）cmd进入travel文件夹npm install vuex --save下载vue x
（2）因为vuex配置比较复杂，所以在src下新建store/index.js，在这个index.js配置：

（3）再在外面的main.js引入

因为在main.js里的根实例里引入了store，所以下面的每个组件都可以直接用这个store，使用格式是 this.$store.state.city state是store里的其中一个存放数据的地方

（4）在header.vue里直接使用公共数据，无需再引入

（5）使用vuex的方法改变store里的数据的示意图

【上图写错了，mutation里设置的函数方法自动附带第一个参数是state】

（6）在选择city的选项添加click监听事件，使用this.$store.dispatch来向vuex传入changeCity方法以及方法里的city参数，这里的changeCity等于是一个action方法


或者可以直接用commit方法直接调用mutations，直接省去actions环节

（7）在actions里写一个与刚刚传进来的action方法名字一样方法，使用mutations改变数据

27、编程式导航：点击城市，跳转到首页

28、用localStorage存储本地信息，相当于cookie，记住用户选择的城市；但是有些用户浏览器关闭这个功能，如果强制使用会报错，程序崩溃，所以要使用try{ }catch（e）{ }

27,、简化store的index.js代码，增加可维护性



29、简化公共数据使用的引用写法（注意是在computed里改，因为是属于页面数据的计算）



30、简化改变公共数据的步骤：利用vuex里提供的mapMutations方法，使组件可以直接使用mutations中的改变stage数据的方法，然后把所要改变的数据传进去
（1）引入mapMutations方法

（2）传所要更改的数据进mutations的方法里

31、在App.vue里使用vue自带的keep—alive标签，增加缓存文件功能，减少axios文件请求，优化网页性能

32、使用keep—alive后，使用其自动提供的activated生命周期方法，来改变某些请求json数据内容
（1）


（2）根据state数据改变axios请求地址

（3）开始使用activated生命周期方法来根据用户操作动态改变是否重新执行axios
A.

B.利用lastCity的改变与否和activated来控制是否重新执行axios请求（axios请求地址里的this.city本来就是根据state已经动态改变了的）

33、关于router-link跳转链接样式

34、循环赋予to值的链接地址

35、在某个组件内使用window全局事件的时候，同时记得解绑

36、使用vue提供的递归组件功能，实现把json数据里有层次关系的数据，一层一层渲染出来，比如json数据是这样：


37、根据动态路由，动态获取数据去渲染页面
（1）在index.js里设置动态detail路由

（2）根据动态id描写动态axios请求地址

（4）获取到数据的方法

（5）

（6）

（7）

（8）子组件通过prop获取父组件的数据，然后把相应的写死的数据修改成动态数据（上面父子组件传输数据一样）
（9）解决App.vue用了keep-alive后的缓存问题（其实也可以直接在detail.vue里用activated）

37、在router文件夹里的index.js里解决滚动相互影响问题
其实可以直接看vue官网中的router的功能，直接复制的代码

38、制作动画组件，并其他组件去使用


39、

40、真机测试：
（1）把packsage.json里的“dev”变成这

（2）前端电脑终端运行window电脑运行ipconfig ，苹果电脑运行ifconfig，查看电脑在内网的ip地址，然后手机和电脑连同一个局域网，手机输入电脑ip地址加上端口，就可以显示项目了
41、解决某些安卓手机浏览器没有polyfill，从而看不到页面的问题
（1）cmd进入travel文件夹，npm install babel-polyfill --save下载
（2）引用

42、打包上线：
（1）如果需要把自身前端代码放进一个文件夹，并用文件夹名访问，就先改config里的index.js的assetsPuthlicPath改成文件夹名

（2）cmd进入travel，npm run build，把压缩后的文件放进自己起的那个文件夹里，然后给后端放到htdoc根路径即可
43、如果项目文件比较大型，达到Mb以上，可以用异步组件
在router里的index.js里，修改路由页面插件


页面里引用的组件也可以这么异步