Vue全家桶

Vue初级前端面试整理

1.vue全家桶

Vue两大核心思想：组件化和数据驱动。

• 组件化：把整体拆分为各个可以复用的个体
• 数据驱动：通过数据变化直接影响bom展示，避免dom操作。

vue全家桶

1. 构建工具：vue-cli，sass样式
2. 路由：vue-router（http://router.vuejs.org）
3. 状态管理：vuex（http://vuex.vuejs.org）
4. http请求：vue-resource（https://github.com/pagekit/vue-resource）
   vue2.0之后，就不再对vue-resource更新，而是推荐使用axios。

2.vue-cli脚手架搭建

确保电脑中安装node.js（版本至少6以上，否则可能会报错）：

https://nodejs.org/zh-cn/

如果是window7，安装低版本
nodev12版本
找到倒数第五个64位操作系统.msi文件进行安装，直接解压可能不好用
打开cmd命令行，安装cnpm（也可直接使用npm）

npm install cnpm -g --registry=https://registry.npm.taobao.org

安装全局vue

cnpm install -g vue-cli

通过cd命令进入文件夹，创建vue-cli工程

vue init webpack +项目名

创建成功后，安装依赖

cnpm install 

启动项目

npm run dev

也可使用vue ui 进入可视化脚手架

3.vue-router路由懒加载

为什么要使用vue路由懒加载
vue这种单页面应用，如果我们不去做路由懒加载，打包之后的文件将会异常的大，就会造成进入首页时，需要加载的内容过多，时间过长，会出现长时间的白屏，不利于用户体验，运用懒加载就可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。
如何实现路由懒加载
方法一（ES中的import 推荐使用）：

import Vue from 'vue'
import Router from 'vue-router'
const home = ()=>import("@/components/page/home/home")
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home
    },
    //或者
 routes: [
  {
    path: '/',
    name: '首页',
    meta: {
      title: "ElvenShop",
      requireAuth: false,
      backgroundColor: "#fff",
      footer: true,
    },
    component: () => import( '../views/Home.vue')
  },

方法二（使用resolve方法）

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: resolve=>(require(["@/components/page/home/home"],resolve))
    },

4.vuex

安装

npm install vuex --save

创建store对象：vuex 中最关键的是store对象，这是vuex的核心。可以说，vuex这个插件其实就是一个store对象，每个vue应用仅且仅有一个store对象

const store = new Vuex.Store({...});

1.state – 存放状态
2.getters – state的计算属性
3.mutations – 更改状态的逻辑，同步操作
4.actions – 提交mutation，异步操作
5.mudules – 将store模块化

参考链接

5.vue脚手架aixos安装使用

1.安装：

npm install axios

2.在src新建api文件夹，新建api/index.js文件，以配置aixos
3.在需要的页面是使用import引入

import axios from 'axios'

4.跨域请求
在项目根目录中创建js文件，命名为vue.config.js，然后添加一下代码

module.exports = {
	// baseUrl: "./",     //配置打包时的相对路径
	devServer: {
		open: false,    //项目启动时是否自动打开浏览器，我这里设置为false,不打开，true表示打开
		proxy: {
			'/': {     //代理api
				target: "https://vapi.frayun.com",//服务器api地址
				changeOrigin: true,//是否跨域
				ws: false, // proxy websockets
				pathRewrite: {//重写路径
					"^/": '/'
				}
			}
		}
	},
}

在api/index.js中增加配置

import axios from 'axios'

export function get(url, params){    
  return new Promise((resolve, reject) =>{        
      axios.get(url, {            
        params: params        
      }).then(res => {
        resolve(res.data);
      }).catch(err =>{
        reject(err.data)
    })    
  })
}

export function post(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(res => {
        resolve(res.data);
      })
      .catch(err =>{
        reject(err.data)
      })
  });
}

6.vue-loader是什么？使用它的途径有哪些？

一、vue-loader作用：
解析和转换.vue文件。提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template，再分别把他们交给对应的loader去处理
二、用途
js可以写es6,style样式可以写scss或less、template可以加jade等
三、
css-loader：加载由vue-loader提取出的CSS代码
vue-template-compiler：把vue-loader提取出的HTML模板编译成可执行的jacascript代码