vue-cli 安装及常用方法(前端小白必备哦）

作用

• 快速创建一个大型功能齐全的Vue项目模板（初始化项目）
• 快速创建一个空的Vue项目

安装

• npm i @vue/cli -g：全局安装vue脚手架

创建

• vue create 项目名称

运行

1. 进入项目目录 cd myvue
2. npm run serve

项目中

• 一个组件可以是一个 .vue
• 一个页面也是一个 .vue 文件

.vue 包含

• template ：存放模板 ：有且只有一个根节点

	<template>
		<div>
			<!-- 一个组件只能有一个根节点 -->
			<h1>首页</h1>
			
			<!-- 组件的使用：第三步使用 可复用-->
			<Counter></Counter>
		</div>
	</template>
	

• script ：业务逻辑
  1. 导出一个组件 ：export default{}
  2. 导入一个组件 ：import Counter from ‘@/components/Counter.vue’
  3. 注册一个组件 ：components：{ Counter }
  4. 使用组件 ：< /Counter>

		<!-- 导出一个组件 -->
			<script>
				
				// Counter 第一步：导入
				import Counter from '@/components/Counter.vue'
				
				// 导出 默认
				export default {
					// 数据必须是一个 函数 + 返回值
					data(){
						return {
							name:"lyk",
							age:22,
						}
					},
					
					// Counetr 第二步：注册
					components:{ Counter }
					
				}
			</script>

• style ： 样式

组件中data必须是一个函数

• 组件有可能会实例化多次，用函数作用域，避免组件实例间的相互影响

组件的传参

• 父传子 props ： props属性应该只读
• 子传父 $emit 事件
• 单向数据流 ：父组件传递数据给子组件，组件的数据修改默认不能影响父组件

组件的生命周期

• 定义：一个 vue 组件从创建到销毁经理 一系列过程，成为组件的生命周期
• 创建前后 ：beforeCreate / created

1. beforeCreate ：:this 还没有初始化完毕
2. created ：this 已经初始完毕，dom还没渲染，通常调用方法，添加事件，添加定时器

• 挂载前后 ：beforeMount / mounted

1. mounted ：dom挂载完毕，通常可以在这个生命周期里面 操作DOM

• 更新前后 ：beforeUpdate / updated

• 销毁前后 ：beforeDestroy/destroyed

1. beforeDestroy ：通常移除事件监听，移除定时器

v-model = “n1”

• 简写：

1. :value = “n1”
2. @input = “n1 = $event”

:visible.sync = “flag”

• 简写：

1. :visible = “flag”
2. @update:visible = “flag = $event”

watch 监听数据的变化

• 模板：

1. watch:{
   dataName:{
   handler(nval,oval){},
   deep:true
   }
   }

css 样式

• 样式隔离< style scoped = “scoped” >

1. 对子组件不会隔离，对兄弟父亲组件隔离
2. 隔离自身组件
3. 对导入的组件不隔离

• css 导入

1. @import url("…/assets/base.css"); 在 style标签 中导入
2. import ‘…/assets/base.css’ 在 script标签 中导入
3. require ‘…/assets/base.css’ 在 script标签 中导入
4. import 文件名 from ‘…/assets/base.css’ 在 main.js 中 全局导入

js

• 普通导出

1. export {rev} ----> 1. import {rev，name，Person} from ‘./xxxx.js’
   export {name} ----> 2. import {rev，name as n ,Person} from ‘./xxxx.js’ （给 name 起别名 n）
   export {Person} ----> 3. import as dev from ‘./xxxx.js’ （ dev.name，dev.rev() ）
   export {rev，name，Person}

• 默认导出

1. export default Person ----> 1. import Person from ‘./xxxx.js’

• 混合导入

1. export {name，rev}
   export default Person ----> 1. import Person，{name，rev} from ‘xxxx.js’

• 导入

1. 如果不带 ./ …/ 就会从 node_modules 获取
2. 在 vue脚手架中，代表 src目录
3. 在 vue脚手架中，.js .vue 后缀名可以省略
4. 文件夹，会自动查找 index.js
5. 模块之间可以相互导入

别名

• alias:[’/home’,’/about’]

重定向

• {path:"",redirect:“member”}

404

• {path:’*’,component:xxx}

子路由配置

1. {
   path:"/admin",
   component:Admin,
   children:[
   {path:“member”,component:“Member”},
   {path:“xxx”,component:“xxx”},
   ]
   }
2. 在 Admin 组件内新增 < router-view > 存放子路由

$route

1. name 名称
2. params 参数 ※
3. fullpath 全路径
4. path 路径
5. hash 哈希值
6. query 查询参数 ※
7. meta 路由元信息
8. 当前路由的信息

$router

1. history ：当前路由 current === $route
2. back() 后退
   forward() 前进
   go() 历史记录跳转
3. push() 跳转页面（会留历史记录）
   replace() 跳转页面（不会留历史记录）
4. 购物车，单击购买，发现用户没有登陆，自动跳转登录页面，登录成功后，跳转到购车页面（跳转到购物应该不留历史记录，用replace这个方法）
   从购物车返回希望返回到登录页面

链接高亮

1. 路径精确高亮 ：router-link-active
2. 路径精确匹配 ：router-link-exact-active

router-link 指令