Vue 学习总结

我不是女神ヾ 2023-10-04 20:57 19阅读 0赞

## 环境搭建 ##

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

![在这里插入图片描述][86d2a8b911bc43eb97d07a67d19dfab4.png_pic_center]

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：

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 属性定义组件模版用来渲染页面：

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 的官方路由器，功能有很多，最基础的功能就是实现和管理页面的跳转。

// 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
    })

### 深入学习 ###

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

1.  通读官方教程 (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/][https_cn.vuejs.org]
 *  Vue2简易教程：[https://www.runoob.com/vue2/vue-tutorial.html][https_www.runoob.com_vue2_vue-tutorial.html]
 *  Axios：[https://www.axios-http.cn/][https_www.axios-http.cn]
 *  ElementUI：[https://element.eleme.cn/\#/zh-CN][https_element.eleme.cn_zh-CN]

[Link 1]: https://nodejs.org/en/
[86d2a8b911bc43eb97d07a67d19dfab4.png_pic_center]: https://img-blog.csdnimg.cn/86d2a8b911bc43eb97d07a67d19dfab4.png#pic_center
[Vue Devtools]: https://github.com/vuejs/vue-devtools#vue-devtools
[https_cn.vuejs.org]: https://cn.vuejs.org/
[https_www.runoob.com_vue2_vue-tutorial.html]: https://www.runoob.com/vue2/vue-tutorial.html
[https_www.axios-http.cn]: https://www.axios-http.cn/
[https_element.eleme.cn_zh-CN]: https://element.eleme.cn/#/zh-CN