Vue3 创建一个应用

1、使用vite创建脚手架

登录后复制

npm create vite@latest

• 1.

执行完成后就会生成下面这么一个项目

2、将src目录下的所有文件都删除，换上自己的案例

（1）在src目录下创建main.ts文件

登录后复制

// 引入 createApp 用于创建应用
import { createApp } from "vue";
// 引入 App 根组件
import App from './App.vue'

// 创建一个应用
const app = createApp(App)

// 挂载整个应用到 app 容器中
// .mount() 方法应该始终在整个应用配置和资源注册完成后被调用。同时请注意，不同于其他资源注册方法，它的返回值是根组件实例而非应用实例。
app.mount('#app')

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.

（2）在src目录下创建App.vue文件（可通过npm i vite-plugin-vue-setup-extend -D命令安装插件实现script标签上配置组件名称）

登录后复制

<template>
  <div id="app">
    <h2>hello, world!</h2>
  </div>
</template>

<!-- npm i vite-plugin-vue-setup-extend -D -->
<!-- 然后就可以直接在 script 标签中写组件名称 -->
<script setup lang="ts" name="App">

</script>


<style lang="scss" scoped>
  div {
    width: 100%;
    height: 500px;
    background-color: pink;
  }
</style>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.

3、启动项目

登录后复制

# 第一步安装依赖
npm install
# 第二步启动
npm run dev

• 1.
• 2.
• 3.
• 4.

4、查看效果

5、扩展补充

后端的朋友在安装依赖的时候可能会遇到一些node版本的问题，因为可能电脑上用的跟公司一样的版本，而公司版本又偏低，所以很大可能让一些想学前端的人入门即放弃。

因此在这里给大家推荐 nvm这个工具，用来管理node版本的。安装了nvm之后，就可以同时安装多个node，并且可以随意切换，肥肠好用！效果如下图。

还有一个叫nrm的，就是npm源管理器，允许你快速地在npm源间切换。可通过npm install -g nrm命令安装，也肥肠好用！效果如下图。

原创作者: u_16231213 转载于: https://blog.51cto.com/u_16231213/11593634