VUE3的奇妙冒险（一）

最新推荐文章于 2024-10-02 19:42:15 发布

你就宠她吧ღ

最新推荐文章于 2024-10-02 19:42:15 发布

阅读量341

点赞数 9

分类专栏： vue3 文章标签： vue

本文链接：https://blog.csdn.net/kingevileye/article/details/135730755

版权

vue3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用Vue.js从零开始创建项目，包括安装Node.js，设置项目结构，编写`main.ts`和`App.vue`，创建新组件并将其集成到主应用中。

摘要由CSDN通过智能技术生成

快速上手 | Vue.js

安装node.js

下载地址：Node.js

创建项目
npm create vue@latest
项目名字不能出现中文和特殊字符

根据需求进行选择

启动项目

使用VSCode打开项目使用下面指令安装所有依赖
npm install
使用下面命令启动项目
npm run dev

项目结构

index.html

项目入口

main.ts

import './assets/main.css'//导入样式

import { createApp } from 'vue'//创建应用
import App from './App.vue'//组件

createApp(App).mount('#app')//导入组件App，作为根组件，容器为app（使用时的id）

从零新建项目

删除src文件夹的内容

新建main.ts和App.vue

main.ts

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

createApp(App).mount('#app')

App.vue

vue中最基本的三个标签

<template>
    <!-- html -->
</template>

<script lang="ts">
    // JS
</script>

<style>
    /* 样式 */
</style>

添加内容后

<template>
    <div class="app">
        <h1>邪王真眼是最强的</h1>
    </div>
</template>

<script lang="ts">
    // JS
    export default{
        name:'App'
    }
</script>

<style>
    /* 样式 */
    .app{
        background-color: purple;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
</style>

运行结果如下

创建新组件并使用

创建Person.vue

Person.vue

<template>
    <div class="person">
        <h1>person</h1>
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <button @click="showTel">查看联系方式</button>
    </div>

</template>

<script lang="ts">
    export default{
        name:'Person',
        data() {
            return{
                name:"rikka",
                age:18,
                tel:123456
            }
        },
        methods:{
            showTel(){
                alert(this.tel)
            }
        }
    }
</script>

<style scoped>
    .person{
        background-color: rgb(162, 203, 255);
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
</style>

在App.vue中导入，注册，并使用

<template>
    <div class="app">
        <h1>邪王真眼是最强的</h1>
        <Person/>
    </div>
</template>

<script lang="ts">
    // JS
    import  Person  from "./components/Person.vue";//导入
    export default{
        name:'App',
        components:{Person}//注册
    }
</script>

<style>
    /* 样式 */
    .app{
        background-color: purple;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
</style>

运行效果如下：