vue3部分详解1

本人vue3学习的体会，将通过分开的几期文章分享，这次讲第一期脚手架项目的搭建

1.脚手架创建项目

1.1搭建的前置任务：安装node和yarn

1.安装node.js或者nvm版本控制器，node.js下载地址，安装完成 输入 npm -v 检查版本。然后在node.js主文件下新建全局配置node_global和缓存node_cache两个文件夹，并配置环境变量，最后配置npm淘宝镜像。

如果nvm版本控制器安装遇到问题，这里放两个当时帮助到我的教程链接：

http://t.csdnimg.cn/pVkz2

http://t.csdnimg.cn/JpHkY

2.安装yarn，在终端输入以下内容：npm install -g yarn，安装完成 输入yarn -v检查版本。然后在node_global文件夹下创建global和cache两个文件夹存放yarn的相关文件。

1.2使用yarn脚手架搭建vue3项目

命令：yarn create vite 项目名 ，选择使用创建-VUE自定义，在Router路由选项Yes，其他都选择No,一路选下去。

2.项目结构

来看一下，主要创建的项目结果，如下图所示：

其中主要包括文件夹： assets样式 componets组件 router路由 view页面

主要文件：App.vue入口文件（管理路由容器） main.js注册全局组件 package.json库依赖文件

基本vue文件结构，由<script> <template><style>三个标签组成：

<!-- 写逻辑 -->
<script setup>
    import { ref } from "vue";
    const info = ref("hello vue");

</script>



<!-- 模板 写html 显示用 -->
<template>
    <h1>{{ info }}</h1>

</template>



<!-- 样式 scoped 表示局部样式 只对当前页面有效 -->
<style scoped>
    
</style>

<script>内写页面的逻辑，包括引入的依赖文件和声明的常量与方法

<template>内写页面的展示部分，包括所有要渲染展示的部分

<style>内写标签对应的样式

这样的操作实现原理：MVVM思想（Model-View-ViewModel思想）

Model负责 用JavaScript的方式存储所有数据，Model负责 渲染所有用户可见页面，ViewModel负责 将Model中的所有数据映射到View中，并且将View监听收集到的所有输入更新给Model中的对应数据。 这一切操作都在Vue框架内部执行无需人为控制，很好的分离了数据部分和渲染部分。

3.功能实现

3.1组件

组件分为全局组件和局部组件

先来解释全局组件，这里举了一个例子：GlobalComponentA.vue

该组件实现了一个 常量展示一个a标签链接跳转和按钮绑定事件

<!-- 写逻辑 -->
<script setup>
    import { ref } from "vue";
    const info = ref("我是全局组件A");
    const modifyInfo = () => {
        info.value = "我是修改后的全局组件A";
    }
</script>



<!-- 模板 写html 显示用 -->
<template>
    <h1>{{ info }}</h1>
    <a href="https://www.baidu.com">百度</a>
    <br>
    <input type="button" value="修改值" @click="modifyInfo">

</template>



<!-- 样式 scoped 表示局部样式 只对当前页面有效 -->
<style scoped>

</style>

全局组件需要全局注册，要在main.js中引入该全局依赖

// 挂载全局组件
import GlobalComponentA from '@/components/GlobalComponentA.vue'
const app = createApp(App)

app.use(router)
// 注册全局组件 参数1组件名称 参数2组件对象
/**
 * 组件命名规则是驼峰时候 标签可以驼峰和短中线
 * 组件命名规则是短中线时候 标签只能短中线
 */
app.component('GlobalComponentA', GlobalComponentA)

在对应vue中的<template>直接引用该标签即可

<script setup>
import TheWelcome from '../components/TheWelcome.vue'
// 非全局组件 要在 script setup 中导入
import ComponentB from '@/components/ComponentB.vue';
import ComponentA from '@/components/ComponentA.vue';
import {ref} from 'vue'
const postTitle = ref('hello world')
const otherInfo = ref({
  name: 'zhangsan',
  age: 18
})
const callback = (data)=>{
  console.log('out->data',data)
}
</script>

<template>
  <main>
    <!-- <TheWelcome /> -->
    <!-- 使用组件 类似html标签<标签名></> -->
    <GlobalComponentA></GlobalComponentA>
    <ComponentA @itemClick="callback"></ComponentA>
    
    <ComponentB :postTitle="postTitle" :otherInfo="otherInfo"></ComponentB>
  </main>
</template>

效果：

本期先讲到这里，下期讲父子组件传值及其相关操作。