1. Vue 单文件组件的优势

把一个组件全部内容汇合到一个文件中，文件名字是以 .vue 结尾的就称作 vue 单文件组件。

模板语法有高亮显示和代码书写提示
组件创建支持样式
有构建步骤，支持使用npm下载第3方库，js 高版转低版本
单文件组件中的data一定要用函数的方式且一定要返回一个对象 [vd]

2. cli 创建 Vue 工程项目

安装 vue-cli

npm i -g @vue/cli
## 安装成功后，检查
vue --version

命令创建项目

# 首先需要进入到对应的目录中(英文目录不要有空格),执行如下命令
vue create 项目名称(创建时会自己以对应的项目名称生成目录)

选择手动配置
选择要安装的项
选择vue库的版本
选择css预处理
在刚刚的配置文件以单个配置文件进行记录
对于刚选择的配置是否记录

3. 单文件组件的创建和调用

子组件（child.vue）：

<template>
<div><div class="title">我是一个显示的内容 -- child</div></div>
</template><script>// js 业务代码export default {};
</script><style lang="scss" scoped>/* lang 指定当前的css的预处理脚本，如果没有，则使用css，如果有一定要安装时，选中对应方案scoped  样式作用域  名称保护  命名空间  在编译的时候，给绑定的css元素添加一个不重复的hash字符串，当前属性名称，然后它在通过css3的属性选择器来完成定义样式*/.title {color: red;}
</style>

父组件（App.vue）：

<template>
<div><h3 class="title">App组件</h3><hr /><child /><child /><child /></div>
</template><script>// 引入对应的组件// @在vue工程中,给进行了webpack别名配置,它指向 src 目录// import child from '@/components/child.vue'import child from "./components/child.vue";export default {components: {child,},};
</script><style lang="scss" scoped></style>

注意：

Vue 工程化中可以使用但标签，因为工程化中的 html 标签会经过 vue-template-compiler@2 的编译。

style 标签中的 scoped 的作用是，给当前文件创建一个独立的命名空间，防止同名导致样式添加错误。例如上述代码中，如果不给子组件添加上 scoped 属性，则当子组件被引入到父组件文件中时，父组件会受到影响，标题也会变成红色。

使用vue-cli创建Vue工程化项目及单文件组件的创建和调用相关推荐

Vue学习笔记(2) 在html文件中创建Vue实例，并使用http-vue-loader注册单文件组件
本篇博客基于Vue2.x 官方文档:https://cn.vuejs.org/v2/guide/instance.html 最近和同学合作一个设备信息管理的小项目,而同学找的模板不是前后端分离的因此 ...
vue教程2 【Vue组件化编程】组件的创建和使用非单文件组件和单文件组件的区别
组件实现局部功能的代码和资源的集合非单文件组件 1.定义组件(创建组件) 2.注册组件 3.使用组件(写组件标签) 定义使用Vue.extend(options)创建,其中options和new ...
Vue多个单文件组件使用
在project目录下创建components文件夹,然后将所有子组件放入components文件夹下 [创建此目录][文件名的首字母大写] 1.多组件嵌套使用 Child1.vue <tem ...
Vue单文件组件的使用
项目搭建完成后需要分别对 main.js , index.html , App.vue 文件进行编写代码 index.html <!DOCTYPE html> <html lang= ...
html引用单文件组件,vue之单文件组件纯网页方式引入
上一节的vue组件开发是把组件内容统一放到了一个js文件里面里面写上模板字符串(引用组件) 这种方式还需要拼接转义写法非常丑陋 vue贴心的帮我们封装了单文件组件可以不用再模板里面拼接字符串下 ...
Vue第七章：项目环境配置及单文件组件 vue脚手
第七章:项目环境配置及单文件组件 vue脚手架回顾: 组件之间的通信父传子:正向传递 vue允许自动触发 props 1.先在子组件中定义期待的属性名和类型 2.在父组件中调用子组件 ...
vue脚手架搭建配置试调地址和端口号_全栈的自我修养: 002使用@vue/cli进行vue环境搭建 (使用Vue,SpringBoot,Flask完成前后端分离)...
全栈的自我修养: 使用@vue/cli进行vue.js环境搭建 Success, real success, is being willing to do the things that other ...
Vue CLI 官方文档（一）@vue/cli、@vue/cli-service、插件和 Preset
Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件和 Preset 文章目录 Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件 ...
3天学会Vue之基本知识（第三天：单文件组件（vue-cli））：结合项目开发经验，总结最关键的内容
前置知识: 1.VUE的基本语法知识: 2.javascript(基本js语法): 3.css(知道语法规则即可,无需全部掌握): 4.html(知道标签规则即可): 5.Vue组件基础知识单文件组 ...

使用vue-cli创建Vue工程化项目及单文件组件的创建和调用

文章目录

1. Vue 单文件组件的优势

2. cli 创建 Vue 工程项目

3. 单文件组件的创建和调用

使用vue-cli创建Vue工程化项目及单文件组件的创建和调用相关推荐

最新文章

热门文章