vue（2）脚手架cli

邱秋Elena

已于 2023-07-12 15:22:35 修改

阅读量107

点赞数

文章标签： vue

于 2023-06-09 15:48:05 首次发布

本文链接：https://blog.csdn.net/weixin_38380811/article/details/131129210

版权

本文详细介绍了Vue的组件化编程，包括非单文件组件的基本使用和注意事项，重点讲解了单文件组件的创建、模板页面、JS模块对象和样式。此外，还涵盖了Vue环境的安装，如Node.js和npm的安装，Vue CLI的全局安装和项目创建。文章还讨论了Vue的语法特性，如ref属性、props、mixin、插件和scoped样式。除此之外，列举了Vue的列表案例，包括数据传递、勾选框处理和删除功能。最后，探讨了浏览器本地存储、组件自定义事件、全局事件总线、消息订阅与发布以及Vue的过渡与动画、脚手架配置代理等内容。

摘要由CSDN通过智能技术生成

文章目录

一、组件化编程——非单文件组件
- （一）基本使用
- （二）几个注意点
- （三）组件的嵌套
- （四）VueComponent
- （五）一个重要的内置关系
二、组件化编程——单文件组件
- （一）安装插件
- （二）三个组成部分
- （二）基本使用
三、vue环境安装
- （一）安装Node.js和npm
- （二）全局安装Vue CLI
- （三）通过脚手架创建vue工程
- （四）模板项目的结构
- - 1、vue.config.js
四、Vue语法
- 1、ref属性
- 2、props配置项
- - 2.1 案例：
- 3、mixin(混入)
- - 1）局部引入混入案例：
  - 2）全局引入混入案例
- 4、插件
- - 4.1、定义插件案例：
- 5、scoped样式
五、列表案例
- （一）定义Header组件
- （二）定义list组件
- （三）定义item组件
- （四）定义App组件
- （五）添加数据的值传递
- - 1、（子组件向父组件传递数据）Header组件向App组件传值
  - 2、（父组件向子组件传递数据）App组件向List组件传值
- （六）勾选框处理
- （七）删除功能处理
- （八）删除勾选条目
六、浏览器本地存储webStorage
- （一）LocalStorage
- （二）SessionStorage
七、组件自定义事件
八、全局事件总线（GlobalEventBus）
九、消息订阅与发布（pubsub）
十、Vue封装的过度与动画
十一、vue脚手架配置代理
- （一）方法一
- （二）方法二
- （三）发送请求
- （四）案例
- （五）vue项目中常用的2个Ajax库
- - 1、axios(推荐)
  - 2、vue-resource
十二、插槽
- 默认插槽案例：
- 具名插槽案例：
- 作用域插槽案例：

一、组件化编程——非单文件组件

模板编写没有提示
没有构建过程, 无法将 ES6 转换成 ES5
不支持组件的 CSS
真正开发中几乎不用

（一）基本使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>基本使用</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			Vue中使用组件的三大步骤：
					一、定义组件(创建组件)
					二、注册组件
					三、使用组件(写组件标签)

			一、如何定义一个组件？
						使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
						区别如下：
								1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
								2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
						备注：使用template可以配置组件结构。

			二、如何注册组件？
							1.局部注册：靠new Vue的时候传入components选项
							2.全局注册：靠Vue.component('组件名',组件)

			三、编写组件标签：
							<school></school>
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<hello></hello>
			<hr>
			<h1>{
  {msg}}</h1>
			<hr>
			<!-- 第三步：编写组件标签 -->
			<school></school>
			<hr>
			<!-- 第三步：编写组件标签 -->
			<student></student>
		</div>

		<div id="root2">
			<hello></hello>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		//第一步：创建school组件
		const school = Vue.extend({
     
			template:`
				<div class="demo">
					<h2>学校名称：{
      {schoolName}}</h2>
					<h2>学校地址：{
      {address}}</h2>
					<button @click="showName">点我提示学校名</button>	
				</div>
			`,
			// el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
			data(){
     
				return {
     
					schoolName:'BUBA',
					address:'北京昌平'
				}
			},
			methods: {
     
				showName(){
     
					alert(this.schoolName)
				}
			},
		})

		//第一步：创建student组件
		const student = Vue.extend({
     
			template:`
				<div>
					<h2>学生姓名：{
      {studentName}}</h2>
					<h2>学生年龄：{
      {age}}</h2>
				</div>
			`,
			data(){
     
				return {
     
					studentName:'张三',
					age:18
				}
			}
		})
		
		//第一步：创建hello组件
		const hello = Vue.extend({
     
			template:`
				<div>	
					<h2>你好啊！{
      {name}}</h2>
				</div>
			`,
			data(){
     
				return {
     
					name:'Tom'
				}
			}
		})
		
		//第二步：全局注册组件
		Vue.component('hello',hello)

		//创建vm
		new Vue({
     
			el:'#root',
			data:{
     
				msg:'你好啊！'
			},
			//第二步：注册组件（局部注册）
			components:{
     
				school,
				student
			}
		})

		new Vue({
     
			el:'#root2',
		})
	</script>
</html>

（二）几个注意点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>几个注意点</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			几个注意点：
					1.关于组件名:
								一个单词组成：
											第一种写法(首字母小写)：school
											第二种写法(首字母大写)：School
								多个单词组成：
											第一种写法(kebab-case命名)：my-school
											第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
								备注：
										(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
										(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

					2.关于组件标签:
								第一种写法：<school></school>
								第二种写法：<school/>
								备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

					3.一个简写方式：
								const school = Vue.extend(options) 可简写为：const school = options
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>{
  {msg}}</h1>
			<school></school>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		//定义组件
		const s = Vue.extend({
     
			name:'atguigu',
			template:`
				<div>
					<h2>学校名称：{
      {name}}</h2>	
					<h2>学校地址：{
      {address}}</h2>	
				</div>
			`,
			data(){
     
				return {
     
					name:'BUBA',
					address:'北京'
				}
			}
		})

		new Vue({
     
			el:'#root',
			data:{
     
				msg:'欢迎学习Vue!'
			},
			components:{
     
				school:s
			}
		})
	</script>
</html>

（三）组件的嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>组件的嵌套</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		//定义student组件
		const student = Vue.extend({
     
			name:'student',
			template:`
				<div>
					<h2>学生姓名：{
      {name}}</h2>	
					<h2>学生年龄：{
      {age}}</h2>	
				</div>
			`,
			data(){
     
				return {
     
					name:'BUBA',
					age:18
				}
			}
		})
		
		//定义school组件
		const school = Vue.extend({
     
			name:'school',
			template:`
				<div>
					<h2>学校名称：{
      {name}}</h2>	
					<h2>学校地址：{
      {address}}</h2>	
					<student></student>
				</div>
			`,
			data(){
     
				return {
     
					name:'BUBA',
					address:'北京'
				}
			},
			//注册组件（局部）
			components:{
     
				student
			}
		})

		//定义hello组件
		const hello = Vue.extend({
     
			template:`<h1>{
      {msg}}</h1>`,
			data(){
     
				return {
     
					msg:'欢迎来到BUBA学习！'
				}
			}
		})
		
		//定义app组件
		const app = Vue.extend({
     
			template:`
				<div>	
					<hello></hello>
					<school></school>
				</div>
			`,
			components:{
     
				school,
				hello
			}
		})

		//创建vm
		new Vue({
     
			template:'<app></app>',
			el:'#root',
			//注册组件（局部）
			components:{
     app}
		})
	</script>
</html>