Vite+Vue3项目组件(SFC入门)

1 Vite+Vue3项目组件(SFC入门)

1.1 什么是VUE的组件?

• 一个页面作为整体,是由多个部分组成的,每个部分在这里就可以理解为一个组件
• 每个.vue文件就可以理解为一个组件,多个.vue文件可以构成一个整体页面
• 组件化给我们带来的另一个好处就是组件的复用和维护非常的方便
  

1.2 什么是.vue文件?

• 传统的页面有.html文件.css文件和.js文件三个文件组成(多文件组件)

• vue将这文件合并成一个.vue文件(Single-File Component，简称 SFC,单文件组件)

• .vue文件对js/css/html统一封装,这是VUE中的概念 该文件由三个部分组成 <script> <template> <style>

  • template标签 代表组件的html部分代码 代替传统的.html文件
  • script标签 代表组件的js代码 代替传统的.js文件
  • style标签 代表组件的css样式代码 代替传统的.css文件

1.3 工程化vue项目如何组织这些组件?

• index.html是项目的入口,其中 <div id ='app'></div>是用于挂载所有组建的元素
• index.html中的script标签引入了一个main.js文件,具体的挂载过程在main.js中执行
• main.js是vue工程中非常重要的文件,他决定这项目使用哪些依赖,导入的第一个组件
• App.vue是vue中的核心组件,所有的其他组件都要通过该组件进行导入,该组件通过路由可以控制页面的切换
  

2 Vite+Vue3响应式入门和setup函数

2.1 使用vite创建一个 vue+JavaScript项目

npm create vite
npm install 
npm run dev

• App.vue

<script>
    //存储vue页面逻辑js代码
</script>

<template>
    <!-- 页面的样式的是html代码-->
</template>

<style scoped>
    /** 存储的是css代码! <style scoped> 是 Vue.js 单文件组件中用于设置组件样式的一种方式。
    它的含义是将样式局限在当前组件中，不对全局样式造成影响。 */
</style>

2.2 vue3响应式数据入门

<script type="module">
    //存储vue页面逻辑js代码
    import {ref} from 'vue'
    export default{
        setup(){
            //非响应式数据: 修改后VUE不会更新DOM
            //响应式数据:   修改后VUE会更新DOM
            //VUE2中数据默认是响应式的
            //VUE3中数据要经过ref或者reactive处理后才是响应式的
            //ref是VUE3框架提供的一个函数,需要导入
            //let counter = 1
            //ref处理的响应式数据在js编码修改的时候需要通过.value操作
            //ref响应式数据在绑定到html上时不需要.value

            let counter = ref(1)
            function increase(){
                // 通过.value修改响应式数据
                counter.value++
            }
            function decrease(){
                counter.value--
            }
            return {
                counter,
                increase,
                decrease
            }
        }
    }
</script>
<template>
    <div>
      <button @click="decrease()">-</button>
      {{ counter }}
      <button @click="increase()">+</button>
    </div>
    
</template>

<style scoped>
    button{
        border: 1px solid red;
    }
</style>

2.3 vue3 setup函数和语法糖

• 位置：src/App.vue

<script type="module" setup>
   
/* <script type="module" setup> 通过setup关键字
可以省略 export default {setup(){   return{}}}这些冗余的语法结构 */
    import {ref} from 'vue'
    // 定义响应式数据
    let counter = ref(1)
    // 定义函数
    function increase(){
        counter.value++
    }
    function decrease(){
        counter.value--
    }
    
</script>
<template>
    <div>
      <button @click="decrease()">-</button>
      {{ counter }}
      <button @click="increase()">+</button>
    </div>
    
</template>

<style scoped>
    button{
        border: 1px solid red;
    }
</style>

3 Vite+Vue3关于样式的导入方式

1. 全局引入main.js

   import './style/reset.css' //书写引入的资源的相对路径即可！
   

2. vue文件script代码引入

   import './style/reset.css'
   

3. Vue文件style代码引入

   @import './style/reset.css'