VUE项目编写总结（一）

VUE项目编写总结（一）

写在前面：学习VUE也一段时间了，不过只是零散的在学，知识点一个一个的学，但是这样是不够的，没有经历过沙场的士兵称不上真正的士兵。于是自己打算写一个真实的VUE项目，从系统选择，又考虑了一部分实用性。项目还在一点一点的编写中，中间遇到了很多的问题，但是绝大部分都是由于自己基础不牢固或者知识储备不够导致的。这里做一个阶段性总结，方便以后查阅也方便知识巩固。文中有理解错的概念或者说的不好的地方还望大家不吝赐教指导，我会积极改正的，嘿嘿。

一. 基础知识储备

相信着手项目实战的小伙伴也一定都有了基础的知识储备。我曾经以为一个项目，无非就是 前端+后端+数据库 这样的组成模式，复杂的系统加一些中间件做一些缓存、消息分发的处理。只要学点前端知识，学点后端知识，再来点sql，一个项目也就写的七七八八了。但是这些天来，彻底改变了我的这种想法。只看湖的表面是不能知道深浅的，要涉足其中，要置身事内。

在这里我想先以自己的理解几个在写项目时不清楚或者根本就没听说不知道的概念，也不怕大家笑话说这家伙这东西都不知道就来写项目哈哈哈哈哈哈哈哈哈。有写的不好或者理解有错误的地方也望大家批评指正。

二、编写思路

刚开始的话我是想起哪里就写哪里，想起来给新建一个组件了就去建一个组件，想起来给主页面填点东西了就加点东西。没有什么逻辑的概念。后来慢慢地文件多了起来，立马就变得很乱了，通常该一个东西，牵连着很多地方，往往写完一个地方就会报错，然后就需要排查修改，这样是很废时间的。现在总结下来我的编写思路大体如下：

1. 确定好你的项目文件和路由的名称命名方式，驼峰命名（fileName），还是单词间用 - 连接（file-name），还是下划线（file_name）或者怎么样(FileName)，同一种类型的文件或者文件夹，一定要用统一的命名方式，不然后面不仅难看还容易自己乱（亲身经历过，血的教训）。在vue项目中，我采用的命名方式是这样的：

多名称的文件夹用 - 连接，例如：folder-name

多名称的文件用驼峰命名，例如：fileName

vue文件字母都大写（vue文件最好至少由两个字母组成） 例如：FileName

路由地址用 - 连接，例如： router-path

路由地址的名字与组件名称一样，首字母大写，例如：RouteName

函数、类、用驼峰命名，例如： functionName、className

以上命名仅供参考，不管大家用什么样的命名方式，统一起来的才是最好的，适合自己的才是最好的，习惯要在一开始就养成。

2. 在最开始编写项目时，先创建这个组件，然后配置这个组件的路由地址，最后编写需要跳转该路由地址的位置。

三、路由

1. 前端路由，这个东西说白就是地址，我们在进行页面切换或者进行后端请求的时候，都需要指定一个路由地址，在我们的浏览器地址栏里会展示前端路由的地址，他用来切换我们的展示页面。在VUE中这个概念不只是页面，他也可以是一个组件的指向。我们通常在VUE中用router-view标签来标识配置路由的组件展示位置和切换该位置的组件。

  <router-view></router-view>

再一个就是如何进行点击切换路由地址或者路由地址组件的位置。目前的话我用的比较多的是标签跳转< router-link :to=“{name:‘RouteName’}”>和编程式跳转 this.$router.push()

<router-link :to="{name:'RouteName'}">
@click="routeJump('path')"

我将跳转的方式写成了一个函数这样方便调用，传递的参数为路由的地址。

routeJump(path){
      this.$router.push(path)
    }

关于路由组件展示位置，你可以把他把他的就当做是一个标签，我将 router-view 标签放在哪，接下来的点击就会切换哪里。

2. 后端路由，我所理解的后端路由就是咱们平常说的接口地址，当我为这里的一个点击设置后端路由地址时，他就会向地址指向的后端接口函数或者方法发起请求，把对应的参数传递给它，用来进行新的数据获取和变更。目前这块我还没写到，后面写到会在后面的文章中介绍。

四、框架

就目前来看，我们在写代码时，多数用的都是一些开源的框架，我们在其基础上进行我们想要的样式或者功能的变更。对于框架的理解，我是这么想的，把编写项目当做是在建一所房子，基础的代码语法类似于砖块和水泥，而这框架则是别人已经砌好的墙体，我们把别人的墙体直接拿来搭建房子肯定要比自己用水泥和砖来垒墙快的多，而这墙体也分好坏和轻便之分，这就是咱们的各个框架的优劣了。我这里用到的前端框架是 Element UI 。用框架搭建项目的难点在于对于这个框架的掌握程度，有的时候我们修改一块砖的位置，整面墙可能就塌了，所以我们在对框架进行调整时，一定要先熟悉框架的使用，了解清楚里面各个元素和标签的作用或功能。

五、遇到的部分坑

1. vue文件引入外部js，与外部js属性值获取不到
   这里遇到的问题是在参（fu）考（zhi）其他页面时，外部js获取属性，在vue渲染完成前无法获取。这里提供一下引入外部 js 的方法和让他在挂载完成能后获取值再调用的方法。用的对不对咱也不知道…但是这样能实现。有了解的朋友可以评论区解释下(～￣(OO)￣)ブ

//这里用了插值语法，通过我们定义的getJs函数获取到js，并展示在这个位置，nextTick在这里的作用是进行延迟调用，这样就可以获取到对应的属性
{{this.$nextTick(getJs)}}

//@在这里的意思是指向APP.vue的文件位置，以它的位置为路径起点，require在这里的作用是获取到外部的js文件
getJs(){
      let scriptPath = require('@/script/home.js')
      return scriptPath
    }

2. 路由跳转
   这里遇到的问题是把 this.$router.push(path)的传递参数记错了，当我们在进行路径填写，path要填写完整的地址，包括它的上级路由地址。
   
3. 页面组件摆放
   这里遇到的问题是在设计页面时，他由多个组件构成，我想要把对应的组件摆放到指定的位置上，但是无论怎么调整，他都到不了我想要的位置。这是因为我在使用页面布局是用的element-ui，它是通过row、col、span等标签和属性进行设置的，我们查看elemrnt-ui的文档可以发现，只要通过设置span就可以调整每个组件的占用位置。我们只要吧组件放到row或者col里，就可以方便的控制它展示的位置了。（element-ui ：这锅我不背）。row是行，col是列，span是每列的比例，一个col被划分成了24份，通过调整span的数值就可以控制对应组件所占用的宽度了。
   

以上作为第一阶段的总结吧，后面会继续更新深入的编写以及在编写过程中遇到的各种问题，文中有写的不好的地方，还希望大家能够批评让我改正。