【前端】Vue项目相关纯干货基础知识分享！

阅读量：3967 次

发布时间：2019-05-24

本文共 3880 字，大约阅读时间需要 12 分钟。

Vue项目相关基础知识分享！

最近忙着找工作，在这期间的复习过程中，为了方便查阅，总结了很多我常用到的基础内容和面试题。在这里分享给大家，大家也可以参考复习。

说明：本文不涉及axios，因为我自己很少接触到和后端交互（接口）。而且本类基础知识分享文章只推荐给各位有基础的朋友。

用脚手架vue-cli创建项目

在这里插入图片描述

node部分的内容可以参考我的文章：

Vue的项目结构及说明可以参考我的文章：

项目使用相关说明

具体项目结构分析就不在这里展开说了。

这之后主要想总结的内容就在下图。下图就是我常用的最基本的开发Vue项目的项目结构。

assets和static：主要用来存放 css、js、图片等内容。（我通常在assets里存放图片）区别是：

components：存放各种组件。其中的项目结构都需要自己设定了。

router：存放路由信息。涉及的路由组件可以考虑放在components（pages）中，或者是放在其他自己设定好的文件夹。

vuex：用Vuex管理各种状态信息。

当然完整项目不可能就这么几个文件夹，各位需要看项目需求或者根据自己习惯设计。

在项目的src文件下，必须要有main.js和App.vue。

main.js是入口文件，用来创建Vue实例：

import Vue from 'vue'import App from '@/App.vue'/*vuex*/import store from '@/vuex/store'/*路由*/import router from '@/router'/*element-ui组件库完整导入*/import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'/*vant组件库完整导入*/import Vant from 'vant'import 'vant/lib/index.css'Vue.use(ElementUI)Vue.use(Vant)new Vue({
     el: '#app',  render: h => h(App), // 简便写法  /*  components: {App}, // 映射组件标签  template: '
   ' // 指定需要渲染到页面的模板  */  store,  router})

这其中如果想使用ui组件库有很多种使用方式，具体的使用请参考上方提供的官方文档，文档中写的很清晰。

在导入组件App.vue时：import App from '@/App.vue'，这个App不像以前一样就直接确定了这个组件的标签名，在这里我们还需要配置。这就是上面components的作用：将这个组件映射成特定名称的标签。

它完整的格式其实是这样的：components:{App: App}，但是我们可以简写，就变成了components: {App}。而现在又更加简化了：render: h => h(App)。

当我们导入好了之后就可以将这个模板匹配到页面中的id为app的div。

我们渲染的根组件就是App.vue。

组件：局部功能界面，里面包含实现这个界面所有的相关资源html+css+js / img。正是因为它需要这些相关资源，所以在组件App.vue中，我们可以看到三组标签：<template> <script> <style>。

它的默认结构是：

以上的默认结构中，template的部分存放的就是html，且在其中一定要有一个根标签，当然根标签不一定是div。然后script向外默认暴露一个配置对象，即script的部分存放的就是Vue（JS、jQuery）。style的部分没什么说法，存放的就是css。

在一个组件中可能遇到的，常用用法总结：

组件间通信的几种方式

可以参考我的文章中通信方式部分内容：

Vue的data为什么是一个函数

data写成函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

vue-router

在这里插入图片描述

具体内容就不在这里赘述了，相关用法可以参考我的文章中vue-router部分：

单页应用（SPA）

单页应用，简单来说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的html, js, css。所有的页面内容都包含在这个所谓的主页面中。

多页面，就是指一个应用中有多个页面，页面跳转时整页刷新。

单页面的优点和缺点：

优点：

1、内容的改变不需要重新加载整个页面，对服务器压力较小。

2、前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整；

缺点：

1、首次加载页面的时候需要加载大量的静态资源。

2、不利于 SEO优化。

3、页面导航不可用，如果一定要导航需要自行实现前进、后退。

Vue keep-alive内置组件的作用

凡是被keep-alive组件包裹的组件或路由，除了第一次以外，不会再经历创建和销毁阶段的，第一次创建后就会被缓存下来。

怎么定义 vue-router 的动态路由? 怎么获取传过来的值

推荐文章：

1.命名路由搭配params，刷新页面参数会丢失

2.查询参数搭配query，刷新页面数据不会丢失

3.接受参数使用this.$router后面就是搭配路由的名称就能获取到参数的值

vue-router 有哪几种导航钩子

推荐文章：

$route 和 $router 的区别

在这里插入图片描述

vue项目实现路由按需加载(路由懒加载)的3种方式

推荐文章：

Vuex

最后，不得不说的就是Vuex，Vuex的作用就是对 vue 应用中多个组件的共享状态进行集中式的管理(读/写)。比如刚才评论的例子，我们把comments评论部分数据放在了App.vue中，这么做之后还需要考虑组件间通信（但是实际上用了Vuex不一定比组件间通信简单，使用Vuex只是因为它的逻辑结构清晰）。

想使用Vuex，需要安装：npm i --save vuex

下图为Vuex的结构图：

vuex里有四个结构，state、mutations、actions、getters。

更新state的是mutations、用state进行计算的是getters。

操作mutations的是actions。

这四个都是对象。

state里面包含的数据原本是从vue组件中转移过来的。

而组件要想获取到state里的数据，有四种方式：

$store.state 或 mapState()

$store.getters或mapGetters()

在vue中对标签 / 按钮进行操作，分发事件，触发action调用，用到的就是dispatch()或mapActions()。action不能直接对数据进行操作，所以去请求mutation，用到的就是commit()。这时候可能需要获取数据后再commit，所以就涉及到后台backend，用到的就是ajax请求，也就是说在vuex里可以直接进行异步操作。而到了mutation就可以直接更新状态。mutation里还有个开发工具devtool，专门用来监视mutation。

现在先看看整体思路：

在这里插入图片描述