vue3之hello world_vue3 helloworld

一、前期准备

vue环境搭建https://mp.csdn.net/mp_blog/creation/editor/135712083

书接上回我们学习了搭建环境和创建vue项目，在桌面上创建了hello_vue3项目。然后我们用Vscode打开项目。

env.d.ts文件会标红，这个文件需要在vscode终端中运行命令：

npm i

运行后它会根据env.d.ts文件去安装相关模块依赖，生成node_modules文件。

关于tsconfig.json文件报红：Option ‘importsNotUsedAsValues‘ is deprecated...https://blog.csdn.net/m0_55734628/article/details/132299863

 tsconfig.json中"extends": "@vue/tsconfig/tsconfig.web.json"标红

        缺少 @vue/tsconfig 相关的依赖，运行下面命令安装

npm install @vue/tsconfig

vue项目文件介绍https://blog.csdn.net/xm1037782843/article/details/98469489

 APP.vue：唯一的根组件

main.js：程序入口文件，整个程序中最先执行的文件

  在vscode终端运行npm run dev 启动nodejs服务器。

npm run dev

会出现一个这样的界面，ctrl+鼠标左键点击蓝色网址

这是默认的nodejs服务器启动后的界面

二、代码和实现

现在我们删除它的默认src，自己写

App.vue文件：看上去就是把html、css、javascript前端的这三个部分放在一起用一个vue组件文件实现前端。（我的浅层理解）

<template><!--html-->
    <div class="app">
        <h1>hello world</h1>
        <h2>你好！世界</h2>
    </div>
</template>
<script lang="ts">//javascript
    export default{
        name:'App' //组件名
    }
</script>
 
<style>/*css样式*/ 
     .app{
        background-color: #fff;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
     }
</style>

main.ts文件：

在 main.ts 中，我们需要先引入相关的模块

//引入createApp用于创建应用
import { createApp } from 'vue'
//引入App根组件
import App from './App.vue'
 
createApp(App).mount('#app') 

然后运行npm run dev可以得到一个简单的hello world网页