Web前端开发之VUE07——vue3新脚手架vite的使用、全局组件、组件命名

目录

创建SPA单页面项目：

vite的基本使用：

vite项目的结构：

 vite项目的运行流程：

 vue组件组成结构：

 全局组件和局部组件：

组件注册命名法：

 name属性作为组件名：

 组件样式冲突：

/deep/样式穿透：

 在使用deep穿透时失效的情况：

---

创建SPA单页面项目：

vite的基本使用：

vite其实和vue-cli都是脚手架工具，不同点见上。

上面给出了npm的安装方式，下面我是用yarn的代码创建一个新的SPA项目：

$ yarn create vite <project-name> --template vue
$ cd <project-name>
$ yarn
$ yarn dev

vite项目的结构：

 vite项目的运行流程：

 当我们把模板结构创建好后，进行main.js的操作

示例代码：

 

 vue组件组成结构：

在之前的学习中我们知道每一个vue组件都包含template、script、style三个组成部分。下面我们详细讲一讲这三个组成部分。

 template:

 

script:

 

 

 style:

 

 全局组件和局部组件：

 局部注册在前面的章节讲过，下面看看全局注册：

import { createApp } from 'vue'
import App from './App.vue'
import cp1 from './components/cp1.vue'

const app=createApp(App)
//全局组件的使用
app.component('h3cp',cp1)
app.mount('#app')

组件注册命名法：

 name属性作为组件名：

 组件样式冲突：

 vue解决冲突的方法就是样式上使用scoped，这样样式就不会作用到子组件上。但是有时我们希望子组件的元素可以让父组件修改样式，此时就要用到/deep/样式穿透。

/deep/样式穿透：

 在使用deep穿透时失效的情况：

由于deep的特殊原理，即将原先的标签[属性选择器]转变为属性选择器下对相应的标签，所以一定让父组件是一个跟标签作用域，否做会出现不起作用的情况：

示例：

<template>
<!--  <div>-->//当我注释掉根标签后就会出现deep失效的情况
    <div class="title">123<i>456</i></div>
    <hr>
    <MyH3></MyH3>
    <hr>
    <MyH4></MyH4>
<!--  </div>-->
</template>
<script>
import cp2 from "./components/cp2.vue";
export default {
  components:{
    MyH4:cp2
  }
}
</script>
<style lang="less" scoped>
.title {
  color: aqua;

  & > i {
    color: #a16e6e;
  }

}
:deep(.textPart){
  color: chartreuse;
}

</style>