单文件组件SFC
介绍
Vue 的单文件组件 (即 *.vue 文件，英文 Single-File Component，简称 SFC) 是一种特殊的文件格式，使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。
SFC示例
<template>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
},
}
</script>
<style>
</style>
三部分组成
每个.vue组件都由3部分构成，分别是:
- teplate — 组件的模板结构
- seript — 组件的JavaScript行为
- style — 组件的样式
其中，每个组件中必须包含template模板结构，而script行为和style样式是可选的组成部分。
template
vue规定：每个组件对应的模板结构，需要定义到<template>节点中。
- template是vue提供的容器标签，只起到包裹性质的作用，不会被渲染为DOM元素；
- template中只能包含唯一的根节点。
script
vue规定：
- 开发者可以在
<script>节点中封装组件的JavaScript业务逻辑； .vue组件中的data必须是一个函数，不能直接指向一个数据对象。
style
vue 规定：组件内的 <style> 节点是可选的，开发者可以在 <style> 节点中编写样式美化当前组件的 UI 结构。
<style>
h1 {
font-weight: normal;
}
</style>
<style lang="sass">
h1 {
font-weight: normal;
span {
color: red;
}
}
</style>
组件之间的样式冲突问题
- style 节点的 scoped 属性
style节点的scoped 属性，用来自动为每个组件分配唯一的"白定文属性"，并自动为当前组件的DOM 标签和style 样式应用这个自定义属性，防止组件的样式冲突问题由
- /deep/ 样式穿透
如果给当前组件的style 节点添加了scoped属性，则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效，可以使用/deep/深度选择器。
为什么要使用 SFC
使用SFC必须使用构建工具，但作为回报带来了以下优点:
- 使用熟悉的HTML、CSS 和JavaScript语法编写模块化的组件
- 让本来就强相关的关注点自然内聚
- 预编译模板, 避免运行时的编译开销
- 组件作用域的CSS
- 在使用组合式API时语法更简单
- 通过交叉分析模板和逻辑代码能进行更多编译时优化
- 更好的IDE支持,提供自动补全和对模板中表达式的类型检查
- 开箱即用的模块热更新(HMR)支持
构建工具
因为浏览器只认识html,css，js，所以需要一个工具自动把tse, react-sompiler, less, bable, babel, uglifyjs进行编译处理（打包），这个工具就叫构造工具。
构建工具优势：构建工具他让我们可以不用每次都关心我们的代码在浏览器如何运行，我们只需要首次给构建工具提供一个配置文件(这个配置文件也不是必须的，如果你不给他他会有默认的帮你去处理)，有了这个集成的配置文件以后，我们就可以在下次需要更新的时候调用一次对应的命令就好了，如果我们再结合热更新，我们就更加不需要管任何东西，这就是构建工具的优势。
常用的构建工具：webpack, vite, gulp, parcel, esbuild, rollup, grunt
webpack构建工具
安装依赖包
webpack.config.js
// nodejs处理路径的内置模块
// __dirname 当前绝对路径
// d://webpackdemo/dist
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
// 入口
entry: './src/js/index.js',a
// 出口
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
// loader
module: {
//定义规则
rules: [
// 处理.vue文件的loader规则
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
],
},
//插件
plugins: [
// 请确保引入这个插件！
new VueLoaderPlugin(),
//其它插件
],
}
项目目录结构
面试问到webpack时
vue2项目用的脚手架vuecli
vue3项目用的vite , webpack自己私下研究过，四大组件成：入口，出口, 几个loader, 插件
Vue Cli脚手架工具
CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速创建一个新项目的脚手架，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目
Vue CLI 是官方提供的基于 Webpack 的 Vue 工具链，它现在处于维护模式
-
Vue CLI 创建新项目
- npm install -g @vue/cli
- vue create hello-world-project
-
Vue CLI 可视化创建
- vue ui
-
启动项目
- cd hello-world-project 进入项目
- npm run serve 启动项目
Vite构建工具与内置 create-vue 脚手架工具
Vite 是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。作者是尤雨溪，同时也是 Vue 的作者！
使用vite创建一个Vue项目:
npm init vue@latest
这个命令会安装和执行create-vue,它是Vue提供的官方脚手架工具。跟随命令行的提示继续操作即可。
npm i
npm run dev
项目目录结构
vite相较于webpack的优势
如果项目越大 webpack 所要处理的js代码就越多，需要很长时间才能启动开发服务器。
vite是基于es modules的，侧重点不一样，webpack更多的关注兼容性，而vite关注浏览器端的开发体验
vite配置 vite.config.js
import { defineConfig } from 'vite'
const path = require('path')
export default defineConfig({
optimizeDeps:{
exclude: [] // 依赖预构建
},
server: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, ''),
},
},
},
resolve:{
alias: {
// 键必须以斜线开始和结束
'@': path.resolve(__dirname, './src'),
'@assets': path.resolve(__dirname, './src/assets'),
},
}
})
vscode常用插件
常用插件
Vue 3 Snippets 用于vue3的智能代码提示，语法高亮、智能感知、Emmet等。替代Vetur插件，Vetur在vue2时期比较流行。
Volar 作用：语法高亮、智能感知、Emmet等
ESlint 作用：检查代码是否符合规范
HTML Snippets html标签提示
Auto Rename Tag 修改 html 标签，自动帮你完成尾部闭合标签的同步修改，和 webstorm 一样
Auto Close Tag 自动闭合HTML标签
Path Intellisense 自动路径补全、默认不带这个功能
Vscode-icons 让 vscode 资源目录加上图标
VueHelper 代码提示
vscode css不提示解决办法
settings.json配置添加
"files.associations": {
"*.vue":"html"
}
