Vue(八)

最新推荐文章于 2024-10-16 18:35:07 发布

Fantastick

最新推荐文章于 2024-10-16 18:35:07 发布

阅读量182

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44482737/article/details/126050585

版权

vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js中单文件组件的创建过程，包括创建School和Student组件，并在App组件中汇总。同时，讨论了Vue CLI的安装与项目启动，以及脚手架的基本结构。此外，还分析了Vue runtime版本的特点和使用场景，解释了为何在某些情况下需要使用render函数代替template配置。

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

一、单文件组件

直接上例子：
步骤：
创建School组件，文件创建的是.vue文件。想要代码高亮，则下载插件vetur

<template>
	<div class="demo">
		<h2>学校：{{name}}</h2>
		<h2>地址：{{address}}</h2>
		<button @click="showName">点我提示学校名</button>	
	</div>
</template>

<script>
	 export default {
		name:'School',
		data(){
			return {
				name:'iNust',
				address:'江苏'
			}
		},
		methods: {
			showName(){
				alert(this.name)
			}
		},
	}
</script>

<style>
	.demo{
		background-color: orange;
	}
</style>

可能出现的问题：代码在vscode中报错，如果确认代码编写没有错误，则可在这 https://blog.csdn.net/weixin_44482737/article/details/126050355?spm=1001.2014.3001.5502 解决问题

紧接着创建Student组件

<template>
	<div>
		<h2>学生姓名：{{name}}</h2>
		<h2>学生年龄：{{age}}</h2>
	</div>
</template>

<script>
	 export default {
		name:'Student',
		data(){
			return {
				name:'张三',
				age:18
			}
		}
	}
</script>

最后必须创建APP组件进行汇总

<template>
	<div>
		<School></School>
		<Student></Student>
	</div>
</template>

<script>
	//引入组件
	import School from './School.vue'
	import Student from './Student.vue'

	export default {
		name:'App',
		components:{
			School,
			Student
		}
	}
</script>

然后定义一个入口函数 main.js

import App from './App.vue'

new Vue({
	el:'#root',
	template:`<App></App>`,
	components:{App},
})

最后在index.html中应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>document</title>
	</head>
	<body>
		<div id="root"></div>
		<!-- <script type="text/javascript" src="../js/vue.js"></script> -->
		<!-- <script type="text/javascript" src="./main.js"></script> -->
	</body>
</html>

二、脚手架创建

一、全局安装@vue/cli （node.js版本太低会导致安装失败）
npm install -g @vue/cli
二、切换到相应的项目目录，使用命令创建
vue create xxxx
三、启动项目
npm run server

三、脚手架结构分析

结构如图：
在这里插入图片描述
├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件 ES6 变成 ES5
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

public中的index.html分析

在这里插入图片描述

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
		<!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
		<!-- 配置页签图标 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
		<!-- 引入第三方样式 -->
		<link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
		<!-- 配置网页标题 -->
    <title>硅谷系统</title>
  </head>
  <body>
		<!-- 当浏览器不支持js时noscript中的元素就会被渲染 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
		<!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

其中BASE_URL 是public根路径

main.js中 render函数的解释

//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false

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

运行的结果如下：
在这里插入图片描述
他这里的意思要么你使用完整的vue，要么你使用render函数进行渲染。
什么意思呢？
其实就是 import Vue from ‘vue’ 这里出了问题，这里引入的vue是残缺的vue，引用的是vue.runtime.esm.js这个vue，它只包含：核心功能；没有模板解析器。所以使用template这个配置会报错的。
在这里插入图片描述
为什么要设置这种残缺的vue?
是因为在项目完成时进行webpack的时候节省空间！！
因为不需要模板解析器了。
因此如果要进行渲染，那么就使用render函数即可.

render函数：
第一个参数为html标签，第二个参数为内容。由于用不到this指向因此可以直接写箭头函数
render(createElement){
createElement(‘h1’, ‘xxxx’)
}

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