php开发网站建设,仿摄影网站,网站地图怎么做html,怎么做神马搜索排名seo单文件组件SFC及Vue CLI脚手架的安装使用
Vue 单文件组件#xff08;又名 *.vue 文件#xff0c;缩写为 SFC#xff09;是一种特殊的文件格式#xff0c;它允许将 Vue 组件的模板、逻辑 与 样式封装在单个文件中。
为什么要使用 SFC
使用 SFC 必须使用构建工具#xff…单文件组件SFC及Vue CLI脚手架的安装使用
Vue 单文件组件又名 *.vue 文件缩写为 SFC是一种特殊的文件格式它允许将 Vue 组件的模板、逻辑 与 样式封装在单个文件中。
为什么要使用 SFC
使用 SFC 必须使用构建工具但作为回报带来了以下优点
使用熟悉的 HTML、CSS 和 JavaScript 语法编写模块化的组件让本来就强相关的关注点自然内聚预编译模板避免运行时的编译开销组件作用域的 CSS在使用组合式 API 时语法更简单通过交叉分析模板和逻辑代码能进行更多编译时优化更好的 IDE 支持提供自动补全和对模板中表达式的类型检查开箱即用的模块热更新 (HMR) 支持
如何支持SFC
可通过项目脚手架来进行支持Vue支持Vite脚手架和Vue CLI脚手架。这里我们先来介绍Vue CLI的基本使用方式。
# 安装
npm install -g vue/cli
# 创建项目
vue create vue-study
# 选择default
default (babel, eslint)
# 启动脚手架
npm run serve通过localhost:8080进行访问。
脚手架文件的组成
src/main.js - 主入口模块src/App.vue - 根组件src/components - 组件集合src/assets - 静态资源
单文件的代码组成
template - 编写结构script - 编写逻辑style - 编写样式 单文件组件 其中style中的scoped属性可以让样式成为局部的不会影响到其他组件只会作用于当前组件生效同时在脚手架下支持常见的文件进行模块化操作例如图片、样式、.vue文件等。
