Vue单文件组件的使用_IT之一小佬的博客

main.js

// 引入vue和App组件
import Vue from 'vue'
import App from './App.vue'
new Vue({
    el:'#app',
    // 渲染App组件中的内容，返回给index.html文件使用
    render:function(creater){
        return creater(App)
App.vue 
<template>
    <!-- 指定html显示内容 -->
    <div>单文件组件</div>
</template>
<script>
    // 指定js内容
// export default {
</script>
<style>
/* 指定css内容 */
</style>
文件编写完成后并不能直接运行index.html产生效果，需要对项目进行打包生成一个渲染后的index.js文件进行使用 
npm run build
打包后会在当前目录下生成一个index.js 文件，在index.html中引用该文件，运行index.html文件看到效果 
项目调试运行 
每次我们需要看到组件效果需要手动生成一个index.js文件，这是我们可以借助webpack-dev-server自动运行我们的代码   【用下面的服务来调试代码】 
// 在项目目录下，执行下面指令可以开启前端服务，自动运行前端代码
./node_modules/.bin/webpack-dev-server
                    项目搭建完成后需要分别对 main.js , index.html , App.vue 文件进行编写代码index.html&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;    &lt;meta http
				.vue文件，称为单文件组件，是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js
vue-loader
浏览器本身并不认为.vue文件，所以必须对.vue文件进行加载解析，此时需要vue-loader
类似的loader还有许多，如：html-loader、css-loader、style-loader、babel-loader等
需要注意的是vue-loader是基于webpack的webpack是一个前端资源模板化加载器和打包工具
				第四章 - 编译单文件组件
书接上回 【来实现一个简单的 Vite 吧】！第三章 - 加载第三方模块,接下来我们来处理 编译单文件组件的问题。
浏览器无法处理我们在 main.js 中引用的单文件模块和样式模块，浏览器只能够处理js模块，所以单文件模块，需要在我们的服务器中转换成js文件
接下来，我们打开浏览器参考 vite 中怎么处理单文件组件，其他的模块就先按下不表。
从这里我们可以看见，在我们请求单文件组件的时候，服务器会编译单文件组件，并且把编译好的文件返回给浏览器，然后我们会再次请求一次
				全局安装    npm install -g @vue/cli-service-global
然后切到想运行的vue文件目录下，执行cmd
接着输入  vue serve xx.vue
然后就会出现运行地址 照着地址打开就行了
				Vue.extend、Vue.component、new Vue以及Vue.compile1、Vue.extend(options)：2、Vue.component(options)：3、new Vue创建==根实例==
Vue.extend(vue扩展构造器）、Vue.component(vue全局组件注册)、new Vue(创建vue根实例)三者之间的关系傻傻分不清楚。
野路子理解：
1、Vue.extend(options)：
根据官方文档的描述是用来创建继承Vue的子类，也就是创建一个新的构造函数，
					学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
					10-22
vue组件就是把一个大的html文件，拆成了一些小的vue文件
这个vue文件里面，包括了html，js，css
当要去使用者组件的时候，就需要暴露这些组件【export】，然后引入【import】
vue-cil脚手架
由于浏览器不认识.vue文件，就需要我们搭建vue脚手架
vue脚手架给我们配置好了基本上所有东西，我们直接在里面写项目就可以了
单文件组件格式
temlate标签里面的内容，必须有一个根标签
写入的组件必须要暴露【不然等于
				Vue单文件组件通常使用`.vue`文件扩展名，其中包含三个部分：模板、脚本和样式。模板部分使用`template`标签来定义，如下所示：
<template>
    <!-- 组件模板内容 -->
</template>
在其他部分中，通过 script 标签定义组件中的 JavaScript 代码,style标签定义样式
然后通过 Vue.component() 注册组件，或者 vue-loader 和 vue-cli 工具自动注册。
<template>
    {{ message }}
</template>
<script>
export default {
  data () {
    return {
      message: 'Hello, Vue.js!'
</script>
<style>
/* 组件样式 */
</style>
在页面中引用即可
<template>
    <my-component></my-component>
</template>
<script>
import MyComponent from './MyComponent.vue'
export default {
  components: {
    MyComponent
</script>