Vue 学习总结

环境搭建

1、官网安装 Node，推荐使用LTS 版本（V14）：

2、设置淘宝的镜像源，不建议使用 cnpm（可能会出现奇怪的问题）：

npm config set registry https://registry.npm.taobao.org
配置后可通过下面方式来验证是否成功
npm config get registry

在 ~/.npmrc 加入下面内容，可以避免安装 node-sass 失败
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

.npmrc 文件位于
win：C:\Users\[你的账户名称]\.npmrc
linux：直接使用 vi ~/.npmrc

3、浏览器安装 Vue Devtools，方便后续开发、调试 Vue 实例。

快速开始

通过 IDE（推荐 idea 或 vscode ）打开前端工程，进入到根目录。

首次打开，需要安装依赖模块，在根目录执行命令：npm install，将会在本地生成一个文件夹 node_modules，里面包含了运行所需的依赖库。

本地运行

在根目录执行命令：npm run dev，将启动一个本地服务。启动成功后，可在浏览器打开查看效果。

打包部署

在根目录执行命令：npm run build，会生成一个 dist 文件夹，里面包含了上线部署所需的所有静态资源。

快速入门

基本语法

此部分的代码片段，节选自 Vue 官网的基础教程。

声明式渲染

类似于 freemarker、velocity、thymeleaf 这样的模版语言，Vue 提供了简洁的模版语法，即两组大括号包裹变量，来声明式地将数据渲染进 DOM 页面：

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

除了声明，也可以使用另一种绑定元素的方式，即使用指令：

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

条件渲染

条件判断使用的指令就是 v-if 、v-else-if、v-else：

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

循环渲染

通过 v-for 可以进行循环遍历，类似于 Java 中的增强for语法，只不过是把冒号换成了 in：

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

事件绑定

通过 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

双向绑定

通过 v-model 指令，实现表单输入和应用状态之间的双向绑定：

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

定义组件

一个组件本质上是一个拥有预定义选项的一个 Vue 实例，通过 prop 属性接收从父作用域传递过来的数据，通过 template 属性定义组件模版用来渲染页面：

<div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再
      作详细解释。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})

插槽

简单地说，插槽就是子组件给父组件一个占位符，即 <slot></slot> ，用来填一些模板或者 HTML 代码。

<navigation-link url="/profile">
  Your Profile
</navigation-link>

Vue.component('navigation-link', {
  template: `
		<a v-bind:href="url" class="nav-link">
			<slot></slot>
		</a>
	`
})

高阶使用

单文件组件（Vue Loader）

Vue-cli 是官方提供的一个用于快速创建 Vue 项目的脚手架，可以简单的理解为 Maven ，即创建时选择一个骨架，能让开发更加便捷。通过 Vue-cli 创建的项目，默认集成了 webpack 并使用了 Vue Loader，通过这个 loader，可以编写扩展名为 .vue 的单文件组件。

一个简单的示例如下：

<template>
	<p>{{ greeting }} World!</p>
</template>

<script>
module.exports = {
  data: function () {
    return {
      greeting: 'Hello'
    }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

每个 .vue 文件包含三种类型的顶级语言块、

异步通信（Axios）

在传统的开发中，一般会使用 Ajax 进行通信，而 Vue.js 作为一个视图层框架，并不支持 Ajax 的通信功能，所以需要引入第三方库，比如 Axios 来实现 Ajax 的异步通信。

Axios 的基本调用方法如下：

// GET请求
// 参数1：必填，字符串，请求的数据接口的url地址
// 参数2：可选，请求参数和请求头内容，json对象，要提供给数据接口的参数
axios.get('服务器的资源地址', {
  params: {
    参数名1:'参数值1',
    参数名2:'参数值2'
  },
  headers: {
    选项名: '选项值',// 请求头
  }
}).then(response => {// 请求成功以后的回调函数
  console.log("请求成功");
  console.log(response.data);// 获取服务端提供的数据
}).catch(error => {// 请求失败以后的回调函数
  console.log("请求失败");
  console.log(error.response);// 获取错误信息
});

// POST请求
// 参数1：必填，字符串，请求的数据接口的url地址
// 参数2：必填，json对象，要提供给数据接口的参数,如果没有参数，则必须使用{}
// 参数3：可选，json对象，请求头信息
axios.post(
  '服务器的资源地址', 
  {
    username: 'xiaoming',
    password: '123456'
  }, 
  {
    headers: {
      选项名:"选项值",
    }
  }
).then(response => {// 请求成功以后的回调函数
  console.log(response);
}).catch(error => {// 请求失败以后的回调函数
  console.log(error);
});

路由导航（Vue Router）

Vue Router 是 Vue.js 的官方路由器，功能有很多，最基础的功能就是实现和管理页面的跳转。

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

状态管理（Vuex）

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态。

1、状态定义：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  // 状态
  state: {
    count: 0,
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  // 事件
  mutations: {
    increment (state, payload) {
      state.count += payload.amount
    }
  },
  // 行为
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
})

2、注入到 Vue 实例

new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  store: store,
})

3、调用方法：

// 触发 mutation
this.$store.commit({
  type: 'increment',
  amount: 10
})

// 分发 Action
this.$store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

深入学习

如果要深入学习前端知识，建议学习顺序：

通读官方教程 (guide) 的基础篇。不要用任何构建工具，就只用最简单的

熟悉前端工程

这里以前端工程「his-admin」举例：

目录结构

├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题、字体等静态资源
│   ├── components             # 全局公用组件
│   ├── layout                 # 全局 layout（无）
│   ├── router                 # 路由
│   ├── store                  # 全局 store 管理
│   ├── utils                  # 全局公用方法
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   └── main.js                # 入口文件、加载组件、初始化等
├── babel.config.js            # babel 全局配置
├── package.json            	 # 项目配置文件
└── vue.config.js            	 # vue 全局配置

核心文件

main.js：入口文件
router/index.js：静态路由表
store/modules/user.js：全局变量管理
utils/config.js：配置后端接口地址
utils/request.js：axios封装，包括添加请求头 Token、格式化参数、返回结果统一处理等

调用接口

在 src/api 包下，创建或修改对应的 js 文件：

// 引入封装的请求文件
import request from "@/utils/request";

// GET 示例
export function getXXX(data) {
    return request({
        url: 'xxx/xxx',
        method: 'get',
        params: data
    })
}

// POST 示例
export function postXXX(data) {
    return request({
        url: 'xxx/xxx',
        method: 'post'
        data
    })
}

// PUT 示例
export function putXXX(data) {
    return request({
        url: 'xxx/xxx',
        method: 'put',
        data
    })
}

// DELETE 示例
export function delXXX(data) {
    return request({
        url: 'xxx/xxx',
        method: 'delete',
        params: data
    })
}

在具体的 vue 单文件组件，编写调用代码：

// 引入定义的 api 接口
import { getXXX, postXXX, putXXX, deleteXXX } from "@/api/xxx"

// 调用示例
getXXX(data).then((response) => {
  ...
})

组件跳转

在 route/index.js ，定义静态路由表：

// 定义路由
const routes = [
  {
    // 匹配路径
    path: "/",
    // 组件名
    name: "index",
    // 组件
    component: () => import("@/views/xxx/index"),
    
    // 嵌套路由，可以认为是二级菜单
    children: [
      {
        path: "/a",
        name: "a",
        component: () => import("@/views/xxx/a"),
      },
      {
        path: "/b",
        name: "b",
        component: () => import("@/views/xxx/b"),
      },
    ]
  }
];

// 创建 router 实例
const router = new VueRouter({
  routes,
});

如果需要手动调用，可如下写法：

// xxx为具体的组件名
this.$router.push({ name: "xxx" });

全局变量

目前全局变量是放在 sessionStorage，具体用法如下：

// 放入
sessionStorage.setItem("xxx", xxx);

// 取出
sessionStorage.getItem("xxx", xxx);

参考资料

Vue官网：https://cn.vuejs.org/
Vue2简易教程：https://www.runoob.com/vue2/vue-tutorial.html
Axios：https://www.axios-http.cn/
ElementUI：https://element.eleme.cn/#/zh-CN

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/188573.html