一篇搞定vue3基础（持续更新）

vue3基础

创建vue3工程

# vue2基于CLI脚手架创建项目，vue3基于vite创建，更加高效
npm create vue@latest
# 选择需要的功能
# 输入项目名[project_name]
cd [project_name]
# 尽量使用npm命令，迫不得以再使用cnpm等国内源
npm install
npm run dev
# 复制Local链接打开即可

项目结构分析

1…vscode文件夹->开发工具配置文件夹

2.node_modules文件夹->项目依赖包

3.public文件夹->公共资源文件夹

4.src文件夹->项目源码文件夹

5…gitignore文件->git忽略文件

6.index.html文件->项目入口文件

7.package.json文件->项目配置(信息描述)文件（其中的vite是与webpack类似的脚手架，可以快速搭建项目）

vite.config.js文件->Vue配置文件

缺少node_modules报红

执行npm i安装项目需要的依赖解决

编写基础代码

index.html入口

main.js

// 容器
import {createApp} from 'vue'
// 根组件
import App from "./App.vue"
// 创建实例
const app = createApp(App)
// 挂载对象
app.mount("#app")

App.vue

<template>
	<div class="hello">
        hello world!
        <Component/>
    </div>
</template>
<script>
    import Component from "./components/component.vue"
	exports default{
    // 注意此处为vue2选项式写法
        name:"App",
        data(){
            
        },
        methods:{
            
        }
    }
</script>
<style>
    .hello {
        
    }
</style>

文件夹components→Component.vue

<template>
	<div class="intro">
        my name is lucy
    </div>
</template>
<script>
	exports default{
    // 注意此处为vue2选项式写法
        name:"Component",
        data(){
            
        },
        methods:{
            
        }
    }
</script>
<style>
    .intro {
        
    }
</style>

vue3组合式写法

<!-- vue2 -->
<template>
    <div class="hello">
        {{ msg }}
        <button @click="sayHello">打招呼</button>
        <intro/>
    </div>
</template>
<script>
    import intro from './components/intro.vue';
    export default {
        name: 'App',
        // components注册组件
        components: {
            intro
        },
        setup(){
            // 当前变量为非响应式
            let msg = 'hello vue3';
            function sayHello(){
                alert('hello vue3');
            }
            /**
             * 相当于
            return {
                msg:msg,
                sayHello:sayHello
            }
             */
            return {
                msg,
                sayHello
            }
        }
    }
</script>
<!-- scoped单文件生效 -->
<style scoped>
    .hello {
        width: 100%;
        height: 500px;
        background-color: #f9f;
        border-radius: 10px;
        box-shadow: 3px 5px 2px 2px rgba(0, 0, 0, .6);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
</style>

注意点

1. vue2写法和vue3写法可以共存

2. vue3的setup()不能使用this获得当前vue对象

3. vue3的setup()函数比生命钩子函数beforeCreate()先执行

4. vue2的选项式可以使用setup()函数中的成员，直接使用this调用

   想来应该是执行完返回值交给了vue对象，并不是说能和data中的数据、methods中的函数并列

​ 5.vue3的setup()不能使用选项式中的对象

setup()语法糖

<script>
    import intro from './components/intro.vue';
    export default {
        name: 'App',
        // components注册组件
        components: {
            intro
        }
    }
</script>
<!-- 多加一个script但省去了setup()函数的声明和繁琐的值返回 -->
<script setup>
	// 当前变量为非响应式
    let msg = 'hello vue3';
    function sayHello(){
        alert('hello vue3');
    }
</script>

借助插件还可以合并为一个script

步骤如下

终端执行npm i vite-plugin-vue-setup-extend -D

找到vite.config.js先引入插件，再在plugins中调用即可

import vueSetupExtend from 'vite-plugin-vue-setup-extend

plugins: [

vue(),

vueSetupExtend()

]

<script setup name="App030">
    import intro from './components/intro.vue';
    components: {
        intro
    }
	// 当前变量为非响应式
    let msg = 'hello vue3';
    function sayHello(){
        alert('hello vue3');
    }
</script>