Vue-CLI 脚手架

介绍

右方是一个vue官方脚手架链接，写了更为详细的介绍官方文档

CLI：全称Command-Line interface，翻译为命令行界面，但俗称脚手架

Vue CLI 是一个基于Vue.js 进行快速开发的完整系统，使用vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

CLI

CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。我们会在接下来的指南中逐章节深入介绍。

CLI 服务

CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。

CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。它包含了：

加载其它 CLI 插件的核心服务；
一个针对绝大部分应用优化过的内部的 webpack 配置；
项目内部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令。

安装

关于旧版本

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

Node 版本要求

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

使用npm 或 yarn 安装

自动安装的是最新版3.0以上，如果需要使用2.0Vue-CLi，那么我们下面将会提到拉取CLI2.0模板

1
2
3

npm install -g @vue/cli
# OR
yarn global add @vue/cli

检查版本

1
2
3

vue --version
# OR
vue -V

拉取Vue2.x模板(旧版本)

Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

1
2
3

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

创建项目

vue create

1
2
3

vue create hello-vue #创建3.0脚手架
# hello-vue 是项目名字
vue init webpack hello-vue #创建2.0脚手架

使用vue create创建vue项目，会弹出默认default和Manually select features(手动选择)。Default Vue 2 是Vue2.x版本、Default Vue 3 是Vue3.x版本

选择[Default]

安装中

输入命令后，直接安装好项目了。使用命名cd vue-cli进入我的项目，npm run serve 运行本地服务器，脚手架是自动配置了本地服务器。

选择Manually select features

自定义选择一些配置，如果你倾向于快速创建，选择默认。可以通过空格选中/取消，选中你需要的功能回车创建项目

使用旧版本方式创建Vue2.x项目

1	vue init webpack project

? Project name (hello-vue-2.x)

确认项目名字，如果你需要修改，直接输入名字，不修改就回车

? Project description (A Vue.js project)

项目描述说明，不更改回车

? Author (alovelyyou<noti163@163.com)

默认是读取C盘Confjg配置文件的名字&&邮箱

?Runtime Compiler && Runtime-only

前者能够解析template模板，因为有Compiler。后者无法解析，但是更小，在项目开发时，会使用这个，使用某种方法可以解决无法解析template的问题。目前我们暂时选择前者

? Install vue-router? (Y/n)

是否下载Vue路由，这是暂时不使用vue路由，因此选择n

? Use ESLint to lint your code? (Y/n)

规范代码的，如果你写代码，经常随意空格，没有去规范书写，那么你可以选择Y。这里我选择n

通过我们会通过ESLint管理我们的代码，但开发的时候，会将它暂时关闭，等上线项目，开启检测一下。通过配置vue.config.js文件，可以开启或关闭。

? Set up unit tests (Y/n)

是否设置单元测试，这里我选择n

? Setup e2e tests with Nightwatch? (Y/n)
e2e就是端到端测试，不需要设置n

？选择 NPM 或 Yarn 管理项目

认识vue-CLI3

vue cli 3 与 2 版本有很大的区别

vue-cli 3 是基于 webpack 4 打招，vue-cli 2 还是webpack 3
vue-cli 3 的设计原则 “0配置”，移除的配置文件根目录下的build 和 config等目录
vue-cli 3 提供了vue ui命令，提供了可视化配置，更加人性化
提出了static，新增了public文件夹，并且index.html移到了public中

内置了vue ui命令，可以修改配置文件

vue ui 进入ui界面，可以通过导入创建的vue-cli3 项目，然后修改配置文件

脚手架文件结构

1.main.js 入口文件

/* 
  该文件是整个项目的入口文件
  引入的vue文件是一个残缺的文件，不携带解析模板内容
*/
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'

//创建Vue实例对象---vm
new Vue({
  el:'#app',
  //render函数完成了这个功能：将App组件放入容器中
  render: h => h(App),
  // template:`<h1>你好啊</h1>`,
  // components:{App},
})

// render函数的还原
new Vue({
  // 接收 createElement 函数，Vue会调用render帮我们渲染App组件
  render(createElement){
    createElement('<h1></h1>','内容'); // => createElement(App)
  }
})

/* 
  关于不同版本的Vue：
    1.vue.js与vue.runtime.xxx.js的区别：
        (1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
        (2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
    2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用
      render函数接收到的createElement函数去指定具体内容。
*/

2.vue.config.js 配置文件

在Vue-CLI3以上版本，对webpack的配置文件进行了隐藏，Vue不再允许你去修改它，但是创建了其它修改的方式

在项目下，创建 vue.config.js 文件，里面的配置内容最终会去合并webpack配置

配置文档

mixin 混入

通过 mixin 混入配置，可以把多个组件共用的配置提取成一个混入对象

/*
  如下两个组件，需要一样的age 和 一样的 getWebName 函数，因此需要 mixin 混入进行配置
  让组件复用配置
*/
// 组件一
new Vue({
 name:'simple1'
 data(){
   return{
     name: 'simplelife1'
     age: 18
   }
 },
 methods:{
   getWebName(){
     console.log(this.name)
   }
 }
})

// 组件二
new Vue({
 name:'simple2'
 data(){
   return{
     name: 'simplelif2'
     age:18
   }
 },
 methods:{
   getWebName(){
     console.log(this.name)
   }
 }
})

1.创建mixin.js

// 局部 mixin
// 将混入的名称，暴露出来
export const mixin = {
  data(){
    return{
      age:18
    }
  },
  methods:{
    getWebName(){
      console.log(this.name)
    }
  }
}

// 可以有多个配置模式
export const mixin2 = {
  
}

2.有混入的配置，组件省略相同的部分

// 导入混入文件
import {mixin,mixin2} from './mixin.js'

new Vue({
 name:'simple1'
 data(){
   return{
     name: 'simplelife1'
   }
 },
 mixins:[mixin,mixin2]
})

// 组件二
new Vue({
 name:'simple2'
 data(){
   return{
     name: 'simplelif2'
   }
 },
 mixins:[mixin,mixin2]
})

3.全局配置混入

// 在 main.js 文件进行混入，所有的组件都进行配置合并
// 导入混入文件
import {mixin,mixin2} from './mixin.js'

Vue.mixin(mixin)
Vue.mixin(mixin2)

4.注意

混入存在优先级，如果组件存在该配置，则不会被替换。

如 data属性存在 age 数据，mixin混入也存在age数据，则以组件的为准

插件

功能：用于增强Vue

本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

1.在项目文件下，创建plugins.js 文件

// 定义了一些全局属性
export default {
  install(Vue,x,y,z){
    console.log(x,y,z)
    //全局过滤器
    Vue.filter('mySlice',function(value){
      return value.slice(0,4)
    })

    //定义全局指令
    Vue.directive('fbind',{
      //指令与元素成功绑定时（一上来）
      bind(element,binding){
        element.value = binding.value
      },
      //指令所在元素被插入页面时
      inserted(element,binding){
        element.focus()
      },
      //指令所在的模板被重新解析时
      update(element,binding){
        element.value = binding.value
      }
    })

    //定义混入
    Vue.mixin({
      data() {
        return {
          x:100,
          y:200
        }
      },
    })

    //给Vue原型上添加一个方法（vm和vc就都能用了）
    Vue.prototype.hello = ()=>{alert('你好啊')}
  }
}

2.在main.js 引用插件

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import plugins from './plugins'

//应用（使用）插件，options 是可选参数
Vue.use(plugins,options……)
//创建vm
new Vue({
  el:'#app',
  render: h => h(App)
})

3.使用插件的方式

1
2
3

// 将来可以引入他人写的插件，来增强Vue
// 使用的方式 类似NodeJS的中间件 use
Vue.use(plugins)

组件的自定义事件

一种组件间通信的方式，适用于：子组件 ===> 父组件
使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。
绑定自定义事件：
1. 第一种方式，在父组件中：<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>
2. 第二种方式，在父组件中：

<Demo ref="demo"/>

**......**

mounted(){
  this.$refs.xxx.$on('atguigu',this.test)
}

若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。
触发自定义事件：this.$emit('atguigu',数据)
解绑自定义事件this.$off('atguigu')
组件上也可以绑定原生DOM事件，需要使用native修饰符。
注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

App.vue

<template>
  <div class="app">

    <!-- (1)通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
    <School :getSchoolName="getSchoolName"/>

    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
    <Student @simplelife="getStudentName"/>

    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
    <Student ref="student" @click="show"/>
  </div>
</template>

<script>
  import Student from './components/Student'
  import School from './components/School'

  export default {
    name:'App',
    components:{School,Student},
    data() {
      return {
        msg:'你好啊！',
        studentName:''
      }
    },
    methods: {
      getSchoolName(name){
        console.log('App收到了学校名：',name)
      },
      getStudentName(name,...params){
        console.log('App收到了学生名：',name,params)
        this.studentName = name
      }
    },
    mounted() {
      this.$refs.student.$on('atguigu',this.getStudentName) //绑定自定义事件
      // this.$refs.student.$once('atguigu',this.getStudentName) //绑定自定义事件（一次性）
    },
  }
</script>

School.vue && Student.vue

<template>
    <div class="school">
        <button @click="sendSchoolName">把学校名给App</button>
    </div>
</template>
<script>
    export default {
        name:'School',
        props:['getSchoolName'],
        data() {
            return {
                name:'尚硅谷',
                address:'北京',
            }
        },
        methods: {
            sendSchoolName(){
                this.getSchoolName(this.name)
            }
        },
    }
</script>

<template>
    <div class="student">
        <button @click="sendStudentlName">把学生名给App</button>
    </div>
</template>
<script>
    export default {
        name:'Student',
        data() {
            return {
                name:'张三',
                sex:'男',
            }
        },
        methods: {
            sendStudentlName(){
                //触发Student组件实例身上的simplelife事件
                this.$emit('simplelife',this.name,666,888,900)
            }
        }
    }
</script>

父组件App.vue，给引用的子组件Student.vue 绑定自定义事件 <Student @simplelife="getStudentName"/>，在子组件的实例对象身上可以使用$emit去触发这个事件 this.$emit('simplelife',options)

父组件不仅可以传递参数给子组件，而且可以传递函数。然后子组件可以调用父组件的函数，达到目的

父组件可以通过$children 和 $refs 获取到子组件的实例对象

解绑事件

// 给组件绑定了事件，就在该组件去解绑
// 当事件不使用了，就销毁该事件

// 触发事件
this.$emit('simplelife')

// 解绑单个事件】
this.$off('simplelife')

// 解绑多个事件
this.$off(['simplelife','life'])

// 解绑全部事件
this.$off()

总结

<Student ref="student" @click="show"/> 在组件绑定事件，Vue都认为是自定义事件，需要$emit 去触发

在事件名上加上修饰符，表示原始事件 @click.native="show" ，当Vue处理的时候，会把点击事件给组件的容器

全局事件总线（GlobalEventBus）

一种组件间通信的方式，适用于任意组件间通信。

安装全局事件总线：

new Vue({
 //......
 // 利用钩子函数，在vm未渲染模板之前，安装全局事件总线
 beforeCreate() {
   Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
 },
})

使用事件总线：

接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。
提供数据：this.$bus.$emit('xxxx',数据)

// 组件A
data(){ return {name:'我叫simplelife'}},
methods(){
  // 点击A组件按钮，就会和B进行交互，B得到了A的name数据
  sendName(){
    this.$bus.$emit('simplelife',this.name)
  }
},
  

// 组件B
mounted() {
  // 绑定事件 `simplelife` 调用demo函数
  this.$bus.$on('simplelife',(data)=>{
    // 使用箭头函数是确保this指向是组件实例对象
    console.log(data)
  })
}

最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

消息订阅与发布

一种组件间通信的方式，适用于任意组件间通信。
使用步骤：
- 安装pubsub：npm i pubsub-js
- 引入: import pubsub from 'pubsub-js'
接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

// 引入
import pubsub from 'pubsub-js'

// 组件A订阅消息，接收数据
methods(){
  demo(data){**......**}
}
**......**
mounted() {
  // 订阅的消息会接收一个id，用于取消订阅的
  this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
  
  // (2) 第二种写法
  pubsub.subscribe('xxx',(msgName,data)=>{
    // 使用箭头函数，可以将this指向Vue实例
    // msgName 消息名、data 传递的数据；当传递数据会将第一个形参作为
    // msgName ，第二次形参才是接收的数据
  }) 
  
},
beforeDestroy(){
  pubsub.unsubscribe(this.pid) // 销毁前取消订阅
}
  
// 组件B发布消息，传递数据
methods:{
  publishMessage(){
    pubsub.publish('xxx',666) // 消息名 xxx , 数据 666
  }
}

提供数据：pubsub.publish('xxx',数据)
最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

总结

使用 pubsub-js能够使用任意组件的通信，和 Vue 的事件总线是一样，但是它能在任意框架中实现组件通信，不过在Vue会比较少用，毕竟Vue实现了任意组件通信的功能

nextTick

语法：this.$nextTick(回调函数)
作用：在下一次 DOM 更新结束后执行其指定的回调。
什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

/*
  Vue 准备了一个API `$nextTick` 让DOM重新编译了才执行的函数
  有一个要求，需要给input框显示的时候就加上焦点，如下
*/
methods:{
  inputShow(){
    // 假设数据改变了，Vue要重新遍历模板了
    
    // 然后给input添加焦点
    input.focus() // 显示焦点
  }
}

/*
  如上的写法，能让input显示的时候，出现焦点吗
  显示是不可能的，Vue在重新解析模板的时候，不是数据一改变就编译
  而是等方法执行结束，才重新编译；那时input还是隐藏的，因此调用
  focus() 方法是没有用的
*/

/* 
  利用$textTick解决这个问题 
  当方法执行到 $nextTick Vue就知道，需要去解析模板后才能调用它
*/
this.$nextTick(function(){
  input.focus()
})

Vue封装的过度与动画

作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。
图示：

写法

动画的形式

<template>
  <div>
    <!--
      Vue对过渡动画准备了一个容器，去包裹；
      使用 transition，且只有一个节点，如果要给多个子节点，用相同的动画

      添加了name="simple"属性值，该容器只调用 simple-enter-active 和 simple-leave-active 类

      添加 apper / :apper='true' 属性，动画会自动执行一次（显示 or 隐藏）
    -->
    
    <transition name="simple">
      <h2>有动画效果的文字</h2>
    </transition>
  </div>
</template>
<style>
/* 
  (1) 第一种方式需要自己写动画 
      在 <transition> 标签包裹的会自动调用 v-enter-active 和 v-leave-active 的类
      默认Vue调用的类名是 v-enter-active，在标签transtion 中有一个属性name 可以更改默认名
*/ 
  @keyframes myfirst
  {
    /*隐藏到显示的动画*/
    form { transform: translateX(-100%)}
    to   { transform: translateX(0)}
  }
  .v-enter-active{
    animation: myfirst 0.5s linear;
  }
  .v-leave-active{
    animation: myfirst 0.5s linear reverse; /* 反转动画 */
  }
</style>

过渡的形式

<!--
  (2) 使用CSS3过渡
      Vue提供过渡完整的类有6个
      进入：v-enter、v-enter-to、v-enter-active
      离开：v-leave、v-leave-to、v-leave-active
-->  
<template>
  <div>
    <transition name="simple">
      <h2>有动画效果的文字</h2>
    </transition>
  </div>
</template>
<style scoped>
    h1{
        background-color: orange;
    }
    /* 进入的起点、离开的终点 */
    .simple-enter,.simple-leave-to{
        transform: translateX(-100%);
    }
    .simple-enter-active,.simple-leave-active{
        transition: 0.5s linear;
    }
    /* 进入的终点、离开的起点 */
    .simple-enter-to,.simple-leave{
        transform: translateX(0);
    }

</style>

引入动画库 animate.css ，官网地址

// 安装
$ npm install animate.css --save

// 引入
import 'animate.css';

// 外部样式
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>

<!-- 
  在Vue组件中使用
  transtion标签的name值必须是 name="animate__animated animate__bounce" 
  enter-active-class="animate__swing" 指定动画进入类名
  leave-active-class="animate__backOutUp" 指定动画离开类名
-->
<template>
    <transition-group 
      appear
      name="animate__animated animate__bounce" 
      enter-active-class="animate__swing"
      leave-active-class="animate__backOutUp"
    >
      <h1 v-show="!isShow" key="1">你好啊！</h1>
      <h1 v-show="isShow" key="2">尚硅谷！</h1>
    </transition-group>
</template>
<script>
  import 'animate.css' // 引入
  
</script>
<style>
  /*  样式只需要写元素的基本样式 */
  h1{
    background-color: orange;
  }
</style>

使用<transition>包裹要过度的元素，并配置name属性：

1
2
3

<transition name="hello">
<h1 v-show="isShow">你好啊！</h1>
</transition>

备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值。

Vue脚手架配置代理

前端在请求数据，因为同源策略，会导致跨域CROS。Vue通过axios请求数据，同样也出现了CROS问题，因此VUE-CLI给我们提供看配置代理，来解决这个问题

Vue脚手架给我们提供了代理服务器，我们向代理服务器发送请求，然后代理服务器和目标服务器发送请求，因为服务器之间是不存在跨域的，因此代理服务可以接收到数据。前端和代理服务器都是同样的地址，同端口，不发送跨域

方法一

在vue.config.js中添加如下配置：https://cli.vuejs.org/zh/config/#devserver-proxy

devServer:{
  proxy:"http://localhost:5000" // 发送请求的目标地址
}

// 前端请求模拟 ，假设自己的地址 localhost:8080
// 请求地址和本机地址一样，才不会发送跨域，当请求 http://locahost:8080 会到代理服务器中
// 代理服务器 再向目标服务器发送请求
axios.get('http://locahost:8080').then(res=>{
  console.log(res)
})

说明：

优点：配置简单，请求资源时直接发给前端（8080）即可。
缺点：不能配置多个代理，不能灵活的控制请求是否走代理。当前端有该请求地址的文件，则不会走代理，会导致请求的是错误数据
工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

方法二

编写vue.config.js配置具体代理规则：

可以配置多个代理，还能去控制是否走代理。在请求的地址会加上前缀，让代理服务器知道本地没有，一定要去目标服务器请求

axios.get('http://localhost:8080/api1').then(res=>{
  console.log(res)
})
/*
  http://localhost:8080/api1 请求的代理服务器 前缀是 'api1' 
  pathRewrite: {'^/api1': ''} 作用用于将前缀取消掉
 */

module.exports = {
  devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api1': ''}
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

说明：

优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
缺点：配置略微繁琐，请求资源时必须加前缀。

Ajax请求

发送Ajax请求，有很多种如xhr、JQuery、axios、vue-resource

Vue在1.0使用vue-resource 发送Ajax请求非常频繁，目前已经不再有Vue团队维护，Vue土推荐使用 axios 发送Ajax请求

了解 vue-resource 的使用

// 安装
$ npm i vue-resource

// 安装的是插件，需要通过use使用
// 引入
import vueResource from 'vue-resource'
Vue.use(vueResource) // 使用
// 给所有组件Vue实例对象下，添加了 $http 属性。用于Ajax请求，使用方式和axios一样

// 使用请求，this是组件实例对象
this.$http.get('url').then(res=>{
  console.log(res) // 返回的数据
})