面试总结

vue项目开发流程

建立一个基于 webpack 模板的新项目

vue init webpack my-project

需求分析

对设计稿进行分析

页面布局

效果

需求

准备

在 src 文件夹下新建一个 images 文件夹, 把须要用到的图片素材放到里面 (名字最好语义化,方便查找) 设计稿标注的尺寸应是实际尺寸的2倍, 因此应在 src/main.js文件中配置

项目目录设计

在 src\components 文件夹中建立组件时,最好建立几个对应模块的文件夹, 用来存放组件

Zepto

安装 npm install zepto --save 配置

Vue 引入 zepto

UI组件 - Mint UI

安装 (2.0版本) npm install mint-ui --save 配置

Vue-router (路由)

安装 (若是配置脚手架时已经安装了router, 请跳过此步) npm install vue-router --save

src/router/index.js 配置 vue-router 路由和组件

Vuex

为何要用Vuex?

咱们知道组件之间是独立的，组件之间想要实现通讯，我目前知道的就只有props选项，但这也仅限于父组件和子组件之间的通讯。若是兄弟组件之间想要实现通讯呢？嗯..，方法应该有。抛开怎么实现的问题，试想一下，当作中大型项目时，面对一大堆组件之间的通讯，还有一大堆的逻辑代码，会不会很抓狂???那为什么不把组件之间共享的数据给“拎”出来，在必定的规则下管理这些数据呢？ 这就是Vuex的基本思想了

安装 npm install vuex --save 配置 src/store/index.js // 导入变量

import Vue from 'vue'
import Vuex from 'vuex'
复制代码

// 在模块化构建系统中，需在开头调用 Vue.use(Vuex) Vue.use(Vuex);

// 本来直接export外部是没法识别的，加上default就能够了.可是一个文件内最多只能有一个export default // export能够多个,但在导入时要加{}，export default则不须要 export default new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ } } })

Less

简介

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增长了变量、Mixin、函数等特性，使 CSS 更易维护和扩展

安装 npm install less less-loader --save-dev

配置

less 引用与配置

Axios 数据交互

安装 npm install axios --save

mock（模拟后台数据）

src/utils/mock.js

打包

路由懒加载

当打包构建应用时，JavaScript 包会变得很是大，影响页面加载。若是咱们能把不一样路由对应的组件分割成不一样的代码块，而后当路由被访问的时候才加载对应组件，这样就更加高效了。 结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。 结合这二者，这就是如何定义一个可以被 Webpack 自动代码分割的异步组件。 const Foo = () => import('./Foo.vue') 在路由配置中什么都不须要改变，只须要像往常同样使用 Foo router.vuejs.org/zh/guide/ad…

webpack

什么是WebPack

Webpack能够看作是模块打包机。它作的事情就是分析你的项目结构，找到JS模块以及其余的一些浏览器不能直接运行的语言好比(sass,Typescript)，并将其转换和打包为合适的格式供浏览器使用。在3.0出了之后WebPack 还肩负起了优化项目的责任。

简单来讲就3个方面

打包 : 能够把多个JS文件打包成一个文件，减小服务器压力和下载带宽 转换 : 把拓展语言转换成普通的JS让浏览器顺利运行 优化 : 提高优化和提高性能的责任

(三) 一张图告诉你webpack的做用

做者: www.jianshu.com/p/f25545f60…