Vue cli

vue cli

一、 vue cli是vue提供的一个用于自动化构建和开发项目的工具,也称为脚手架,它是一系列工具的集合
二、主要功能:
 1.根据配置选项自动构建服务项目,并安装所需要的依赖
 2.启动一个本地开发服务器,通过这个服务器可以基于服务器环境访问本地项目,同时提供了跨域代
  理服务
 3.项目的自动编译,打包
 4.项目测试(单元测试,e2e测试)
三、安装
 npm install -g @vue/cli
 查看版本:vue --version或vue -V
 帮助:vue --help或vue -h
四、创建项目
vue提供了两种方式来创建项目:命令行方式和基于浏览器图形界面方式
命令行方式:vue create 项目名称

第一行为默认值
第二行为手动选择要素
创建完成后

运行

运行成功

打开http://localhost:8080/

基于浏览器图形界面方式:vue ui

五、项目目录结构文件说明

1.src 存放项目源码的目录
2.main.js 项目的入口文件
3.App.vue .vue是vue提供的一种单文件组件的文件模式,一个vue文件就是一个独立的组件,这里代表根组件
4.components 存放子组件的目录
5.assets和public都是存放静态资源的文件夹
 assets存放的资源是通过import等方式作为模块引入,最后打包处理的
 public存放的资源是通过script、link、img等方式从浏览器引入的资源,如无法打包的js文件

六、单文件组件

组成
 vue的单文件组件是官方提供的一种用来组织组件代码的形式，该文件以 .vue为后缀，该文件会被 vue-cli 内置的 webpack 解析生成对应的 javascript、html、css 文件
 vue文件由<template></template>、<script></script>、<style></style>三部分组成,必须有template,可以没有script和style
  1.<template></template> 模板,会被解析为html文件
  2.<script></script> 解析为javascript文件
  3.<style></style> 解析为css文件

lang属性
无论是template、script 还是 style，都可以通过 lang 属性来指定它们所使用的语言

src属性
通过 src 属性把文件分离到单独的文件中
这里的 src 同样遵循模块化的导入规则，./ 开头的表示相对路径，/ 开头表示 NPM 包中的资源

有作用域的CSS
当 style 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素

资源路径处理
 在项目开发中，我们经常会碰到要引入外部资源的需求，vue 单文件系统中，对资源引入路径有一定的特殊处理
 1.绝对路径前缀
  就是以 /、https://kaikeba.com/等这样的绝对路径开头的，不做任何处理，直到被浏览器解析
 2.相对路径前缀
  就是以./、../这样的相对路径开头的，将会被看作相对的模块依赖，并按照你的本地文件系统上的目录结构进行解析，如：<img src="../a.png"> 解析后：<img src="require('../a.png')">，类似的还包括 background: url(...) 和 @import
 3.特殊前缀
  如果路径以 @ 开头，也会被看作模块依赖。如果你的 webpack 配置中给 @ 配置了 alias，这就很有用了。所有 vue-cli 创建的项目都默认配置了将 @ 指向 /src

七、组件生命周期
 组件声明周期指的是组件从创建到销毁的过程,在这个过程中的一些不同的阶段,vue会调用指定的一些组件方法
 基本生命周期函数有四个阶段:创建阶段,挂载阶段,更新阶段,卸载阶段

1.创建阶段
 beforeCreate()实例创建之前
   初始化阶段,应用不多


 created()
   在实例创建完成后立即被调用,该阶段完成了对data中的数据的observer,该阶段可以处理一些
 异步任务

2.挂载阶段
 beforeMount()
   在挂载开始之前被调用,应用不多
 mounted()
   该阶段执行完了模板解析,以及挂载.同时组件跟组件元素被赋给了$el属性,该阶段可以通过DOM
 操作来对组件内部元素进行处理了

3.更新阶段
 beforeUpdate()
   数据更新时调用,但是还没有对视图进行重新渲染,这个时候,可以获取视图更新之前的状态
 updated()
   由于数据的变更导致的视图重新渲染,可以通过DOM操作来获取视图的最新状态

4.卸载阶段
 beforeDestroy()
   实例销毁之前调用,移除一些不必要的冗余数据,比如定时器
 destroyed()
   Vue实例销毁后调用
 errorCaptured()
   当捕获一个来自子组件的错误时被调用,此钩子会收到三个参数:
   错误对象,发生错误的组件实例,一个包含错误来源信息的字符串
   此钩子可以返回false以阻止错误继续向上传播

八、ref和$refs
 vue中不提倡直接操作DOM,但没有禁止直接操作,很多需求直接操作比较快捷(尤其一些较简单的)
 作用:1.Vue直接操作Dom
    2.一种另类的父传子方式
 ref
  给元素添加ref属性,该元素或组件实例对象将被添加到当前组件实例对象的$refs属性下面
  添加方式：:ref="自定义名称"
 $refs
  该属性是一个对象,储存了通过ref绑定的元素对象或者组件实例对象
  获取方式this.$refs.自定义名称

 通过$refs可以调用子组件中的方法

九、nextTick
 当数据更新的时候，视图并不会立即渲染，这个时候我们期望获取到视图更新后的数据，可以通过 nextTick 来进行操作
 nextTick 方法将在更新队列循环结束之后立即调用