Vue单文件组件的使用

项目搭建完成后需要分别对 main.js , index.html , App.vue 文件进行编写代码

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><div id='app'><App></App></div><!-- 引入打包后的index.js文件。该文件的名字不是固定名字，可以在webpack.config.js的出口文件中指定 --><script src="./index.js"></script>
</body>
</html>

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

Vue单文件组件的使用相关推荐

Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
Vue单文件组件与vue-loader
单文件组件 Vue.js是一个渐进式的js框架,在使用wewbpack构建Vue项目时,可以使用一种新的构建模式: .vue单文件组件. 就是一个后缀名为.vue的文件,在webpack中使用vue- ...
vue单文件props写法_详解Vue 单文件组件的三种写法
详解Vue 单文件组件的三种写法 JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default c ...
Vue单文件组件环境配置
单文件组件不能直接运行使用,需要依赖node项目对其进行解析打包,在使用之前需要先进行环境配置安装node版本管理工具nvm curl -o- https://raw.githubuserconte ...
Vue单文件组件基础模板
背景相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中我暂时就想到这两点, ...
vue单文件组件导入导出
目录分析打开项目,依次分析下目录结构,项目目录结构如下项目目录结构如下单文件组件.vue 目完成后,我们看到src 目录下有一个componets 目录,里面有一个 HelloWorld.vue ...
在Vue单文件组件的template标签上使用v-if不生效的原因
今天晚上,我在某个组件里看到了这样一段代码,简化来讲,大概长这样: // Child.vue <template v-if="false"><div>Foo ...
什么Vue单文件组件（SFC）?
介绍# Vue 的单文件组件 (即 *.vue 文件,英文 Single-File Component,简称 SFC) 是一种特殊的文件格式,使我们能够将一个 Vue 组件的模板.逻辑与样式封装在单个 ...
【视频】vue单文件组件vue-cli
P13vue单文件组件vue-cli https://www.bilibili.com/video/av91679349?p=13