1. Vue CLI脚手架

1.1 介绍

Vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板，是Vue官方提供的标准化开发工具
全局安装@vue/cli npm install -g @vue/cli
切换到创建项目的目录，使用命令创建项目vue create xxx项目名

如果选择Default则会直接创建项目，创建项目包括babel\eslin这些工具，比如Router/Vuex等其他依赖需要自己手动安装。
如果选择Manually select features(手动安装)则会进入下一步选项：（这里推荐大家进行手动配置）
1. 根据你的项目需要来选择配置,空格键是选中与取消，A键是全选。
2. 一般项目开发只需要选择Babel、Router、Vuex就足够了。

选择vue版本

进入项目 cd xxx项目名
启动项目 yarn serve // npm run serve
打包项目 yarn build // npm run build

1.2 脚手架文件结构

.文件目录
├── node_modules: 依赖包
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
|   |—— store: 状态管理
|   |—— views: 路由页面组件
│   │── App.vue: 汇总所有组件
│   └── main.js: 入口文件
|—— .eslintrc.js eslint配置文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
└── package-lock.json: 包版本控制文件

主要文件简介

主页：index.html
1. 主页就是一个简单的html页面，这里id='app'，是为后面的设置vue作用域有关的。index.html如其他html一样，但一般只定义一个空的根节点，在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件来填充。

文件：Home.vue

1. 一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)：【template】其中模板只能包含一个父节点，也就是说顶层的div只能有一个，【script】vue通常用es6来写，用export default导出，其下面可以包含数据data，生命周期(mounted等)，方法(methods)等，【style】样式通过style标签<style></style>包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加scoped，<style scoped></style>如要引入外部css文件，首先需给项目安装css-loader依赖包，打开cmd，进入项目目录，输入npm install css-loader，回车。安装完成后，就可以在style标签下import所需的css文件。

文件：App.vue——[根组件]

1. app.vue可以当做是网站首页，是一个vue项目的主组件，页面入口文件，所有页面都是在App.vue下进行切换的。是整个项目的关键，app.vue负责构建定义及页面组件归集。

文件：main.js——[入口文件]

1. 这个js文件是主页面配置的主入口。主要是利用ES6的模块化引入模板main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例，下面代码中的components:{App}就是引入的根组件App.vue。后期还可以引入插件，当然首先得安装插件。

router——[路由配置]

1. router文件夹下，有一个index.js，即为路由配置文件。

1.3 ref属性

被用来给元素或子组件注册引用信息(id的替代者)
应用在html标签上获取的是真实Dmo元素，应用在组件标签上的是组件实例对象(vc)
使用方式

a. 打标识：<h1 ref="xxx"></h1>或 <组件 ref="xxx></组价>

b. 获取：this.$refs.xxx

1.4 props配置项

让组件接收外部传递过来的数据,从而达到组件复用的目的

a. 传递数据 <Demo name="xxx" :age="18"> 在传递的属性上面加 : 或者 v-bind ，他就会将表达式中的值真正的传递过去而不是以字符串的形式。

b. 接收数据

i . 第一种方式（只接收） props:['name','age']

ii . 第二种方式（限制类型）props:{name:String,age:Nmuber}

iii . 第三种方式（限制类型、限制必要性、指定默认值）

props: {name: {type: String,  // 类型required: true,// 必要性default: 'cess'// 默认值}
}

1.5 mixin混入

功能：可以把多个组件公用的配置提取成一个混入对象（将不同组件使用的相同的方法抽取出来，然后再各组件中分别导入使用）
使用方式

1. 定义混入

const mixin = {data() {....},methods: {....}....
}

1. 使用混入

1. 1. 全局混入 Vue.mixin(xxx)
  2. 局部混入mixins:['xxx']

1.6 plugin插件

功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数就是Vue，第二个以后的参数是插件使用者传递的数据。
定义插件

export default {install(Vue,x,y,z){console.log(x,y,z)//全局过滤器Vue.filter('mySlice', function(value){return value.slice(0,4)})//定义混入Vue.mixin({data() {return {x:100,y:200}},})//给Vue原型上添加一个方法（vm和vc就都能用了）Vue.prototype.hello = ()=>{alert('你好啊')}}
}

使用插件

import Vue from 'vue'
import App from './App.vue'
import plugins from './plugins'   // 引入插件Vue.config.productionTip = falseVue.use(plugins,1,2,3)  // 应用（使用）插件new Vue({el:'#app',render: h => h(App)
})

1.7 scoped 样式

作用：让样式在局部生效，防止冲突
写法：<style scoped>

1.8 props 传递方法

props 适用于

1. 父组件 ===>子组件通信
2. 子组件 ===> 父组件通信（要求父组件先给子组件一个函数）

父组件

<template><div class="app"><h1>{{msg}}</h1><Student  :getName="getName" /></div>
</template>
<script>
import Student from './components/Student.vue'
export default {name: "App",components: {Student},data() {return {msg: "你好"};},methods:{getName(name){console.log('App接收到的名字:'+name)}}}
</script>
<style>
</style>

子组件

<template><div class="school"><h2>学生姓名{{name}}</h2><button @click="sendName">点击显示姓名</button></div>
</template>
<script>
export default {// eslint-disable-next-line vue/multi-word-component-namesname: 'School',props:['getName'],data(){return{name:'张三'}},methods:{sendName(){this.getName(this.name)}}
}
</script><style></style>

1.9 组件自定义事件

一种组件间的通信方式，适用于：子组件 ===> 父组件
使用场景：子组件想给父组件传递数据，那么就要在父组件中给子组件绑定自定义事件
绑定自定义事件

1. 第一种方式：在父组件中<Demo @事件名="方法"/>或<Demo v-on:事件名="方法"/>
2. 第二种方法：在父组件中this.$refs.demo.$on('事件名',方法)

<Demo ref="demo"/>
......
mounted(){this.$refs.demo.$on('atguigu',this.test)
}

c. 若想让自定义事件只能触发一次，可以使用once修饰符，或者$once方法

触发自定义事件 this.$emit('事件名',数据)
解绑自定义事件 this.#off('事件名')
组件上也可以绑定原生DOM事件，需要使用native修饰符 @click.native="show"上面绑定的自定义事件，即使绑定的是原生事件也会被认为是自定义的，需要加native，加了后就将此事件给组件根元素
注意：通过this.$refs.xxx.$on('事件名',回调函数)绑定自定义事件时，回调函数要么配置在methods中，要么用箭头函数，否则this指向会出问题。

1.10 全局事件总线

一种可以在任意组件间通信的方式，本质上就是一个对象，他必须满足以下条件

1. 所有组件对象必须能看见他
2. 这个对象必须能够使用$on $emit $off 方法去绑定、触发和解绑事件

使用步骤

1. 定义全局事件总线

new Vue({...beforeCreate() {Vue.prototype.$bus = this // 安装全局事件总线，$bus 就是当前应用的 vm},...
})

1. 使用事件总线

1. 1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身

export default {methods(){demo(data){...}}...mounted() {this.$bus.$on('xxx',this.demo)}
}

1. 1. 提供数据：this.$bus.$emit('xxx',data)

1. 最好在beforeDestory钩子中，用$off()去解绑当前组件使用到的事件

1.11 消息的订阅与发布

任意组件间通信

使用步骤
安装pubsub: npm i pubsub-js
在组件中引入: import pubsub from 'pubsub-js'
接收数据：A组件中想要接收数据，则先在A组件中订阅消息，订阅的回调函数留在A组件自身

methods(){demo(msgName,参数1,参数2){......}
},
......
mounted(){this.pid=pubsub.subscribe('xxx',this.demo)//订阅消息
},
beforeDestroy(){pubsub.unsubscribe(this.pid);
}

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

1. Vue CLI脚手架相关推荐

Vue2.x 核心基础（Vue概述，Vue基本使用，@vue/cli脚手架，Element-UI 的基本使用，Vue模板语法）
1. Vue概述尤雨溪:Vue.js的创建者 2014年2月,Vue.js正式发布 2015年10月27日,正式发布1.0.0 2016年4月27日,发布2.0的预览版本 Vue:渐进式JavaSc ...
猿创征文｜【Vue五分钟】 Vue Cli脚手架创建一个项目
目录前言一.创建项目的操作步骤选择路由模式选择CSS预编译器选择如何存放配置自动下载项目所需的包文件二.启动vue项目 1.项目目录 2.启动项目 3.浏览器打开项目首页界面三.项目的 ...
如何查看vue版本号以及vue/cli脚手架版本号
查看vue版本号方法一:直接在项目的package.json文件,找到dependencies就能看到了方法二:输入命令npm ls vue (或者npm list vue) 查看vue/cli脚 ...
Windows PowerShell安装指定版本vue/cli脚手架失效解决办法；vue : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue
mac搭建vue项目看这篇打开shift--鼠标右键,就可以打开Windows PowerShell 1.安装vue/cli npm install -g @vue/cli@3.12.0 @后面是版 ...
前端框架vue04~~vue.cli脚手架的基本使用
文章目录 [1. Vue-CLI脚手架](https://cli.vuejs.org/zh/guide/) [2. 安装](https://cli.vuejs.org/zh/guide/install ...
Vue学习（十一）Vue CLI脚手架
文章目录初始化脚手架说明步骤 Vue 脚手架创建项目文件说明 render函数脚手架中不同版本的Vue 脚手架启动注意 vue.config.js配置文件初始化脚手架说明 Vue脚手架是V ...
Vue 全家桶之 vue cli (脚手架)
一.Vue cli 简介 cli --------------------- c : command (命令) l : line ( 行 ) i : interface ( 接口 ) 命令行接口命令 ...
vue CLI脚手架搭项目
1.安装 node.js环境官网下载:https://nodejs.org/en/download/ 一直默认就行,路径可以改变但要记得到安装完成后cmd打开终端,输入node -v ,npm - ...
Vue CLI 脚手架详解：快速构建 Vue.js 项目的利器
目录一.安装和创建项目二.项目结构三.开发和构建四.插件和配置 Vue CLI 是 Vue.js 官方提供的脚手架工具,它可以帮助开发者快速搭建 Vue.js 项目的基础结构,并提供了丰富的功 ...