vue学习

官网：https://cn.vuejs.org/

创建项目

npm create vue@latest

下载项目依赖

npm i

启动服务

npm run dev

文件目录

.  
├─ public  静态文件目录，里面的文件不会被 webpack 处理，最终会原样复制到打包目录下。  
│  └─ favicon.ico  网站的图标。  
├─ src  源代码目录，存放应用的主要代码。  
│  ├─ assets  存放静态资源，如图片、字体等。  
│  │  ├─ base  
│  │  │  └─ main.css  默认生成的样式文件。  
│  │  └─ logo.svg  示例图像文件。  
│  ├─ components  用于存放我们的公共组件，比如 header、footer 等  
│  │  └─ icons  图标文件。  
│  │     └─ HelloWorld.vue  默认生成的示例组件。  
│  ├─ router  存放路由配置文件。  
│  │  └─ index.js  路由的配置文件，定义了应用的路由规则。  
│  ├─ views  存放视图组件，通常对应路由，每个视图组件是一个独立的 .vue 文件。  
│  │  └─ HomeView.vue  默认生成的页面组件。  
│  ├─ App.vue  根组件，整个应用的入口组件。  
│  └─ main.js  应用的入口文件，负责创建 Vue 实例并挂载到 DOM 上。  
├─ .gitignore  Git 忽略文件规则，指定哪些文件和目录不被包含在版本控制中。  
├─ index.html  应用的主 HTML 文件，Vue CLI 会在构建时自动注入生成的静态资源链接。
├─ jsconfig.json  项目的配置、脚本和其他元数据。  
├─ package.json  锁定安装的依赖版本，确保项目依赖的一致性。  
├─ package-lock.json  锁定安装的依赖版本，确保项目依赖的一致性。  
└─ vite.config.js  配置 vite 的各种选项，包括开发服务器、构建配置、插件等。

main.js 文件

// 导入 createApp
import { createApp } from 'vue'

// 导入App.vue 根组件
import App from './App.vue'

// 导入路由规则，完整为./router/index.js
import router from './router'


// 创建 vue 应用实例对象，将App.vue组件作为根组件
const app = createApp(App)

// 将 vue.Router 挂载到vue应用上
app.use(router)

// 调用
app.mount('#app')

API风格

data函数：自己需要的数据

methods：组件需要的函数

computed：计算属性

watch：监听

mounted：生命周期函数，页面挂载完毕执行

选项式 API

<script>
    export default {
        data(){
            return {
                num: 0
            }
        },
        methods:{
            ufo(){
                this.num++
            }

        }
    }
</script>



<template>
    <button type="button" @click="ufo">num的值{{ num }}</button>
</template>

组合式API

• <script setup>
• 引入需要的vue函数
• ref、reactive用来声明组件需要的数据
• 没有 this

<script setup>
    import {ref} from 'vue'
    const num = ref(0)

    const ufo = ()=>{num.value++}
</script>

<template>
    <button type="button" @click="ufo">num的值{{ num }}</button>
</template>

<style scoped>

</style>