vue进阶

1、vue-cli 使用

在开发中，需要打包的东西不止是js、css、html。还有更多的东西要处理，这些插件和加载器如果我们一一去添加就会比较麻烦，vue官方提供了一个快速搭建vue项目的脚手架，使用它能快速的构建一个web工程模板。

官网： Vue CLI

• 安装vue-cli3命令：

npm install -g @vue/cli@3.x

• 创建项目：

vue create my-project

• 运行项目

npm run serve

2、vue组件化及其通信

• 单文件组件

• 什么是组件？

所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。

方便重复使用,提高开发效率。

• 组件通信

常见使用场景可以分为三类：

• • 父子通信：一般通过props 和 $emit 实现

• • • 什么是props? 例如el-button，我们使用它时，传递了不同的type，而el-button组件就会根据不同的type属性值，渲染不一样的按钮。

• • • 什么是$emit

如el-select下拉框组件，当选中值发生变化时，它会执行 this.$emit('change','目前选中值')。

我们在页面中引用el-select 的地方使用事件监听 @change，接收子组件传来的change事件并进行处 理。

• • 兄弟通信：

Bus 或者 Vuex

• • 跨级通信：

Bus；Vuex；provide / inject API、$attrs/$listeners

3、 vue-router使用

Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。地址：https://router.vuejs.org/zh/

4、 vuex使用

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex 是什么？ | Vuex

5、 Axios使用

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

官网：使用说明 · Axios 中文说明 · 看云

6、 UI框架-后台管理系统端

iview: iView - A high quality UI Toolkit based on Vue.js

element-ui: Element - The world's most popular Vue UI framework

7、 项目目录

• vue-cli3下的目录结构

• 与vue-cli2工程目录的区别

• • vue-cli3移除了配置文件目录：config 和 build 文件夹，增加了vue.config.js文件
  • vue-cli3移除了static 静态文件夹
  • vue-cli3新增了public文件夹，将index.html移动到了 public 中。

常用单页面模版 xxx.vue

<template>
 
</template>

<script>
export default {
  name: '',

  mixins: [],

  components: {},

  props: {},

  data () {
    return {

    }
  },

  computed: {},

  watch: {},

  created () {},

  mounted () {},

  destroyed () {},

  methods: {
  }
}
</script>

<style scoped  lang="less">
 
</style>