使用vue-cli创建

 官方文档

## 查看vue-cli版本，需要在4.5.0以上
vue -V
## 如果版本不符合要求，需要执行安装或者升级
npm install -g @vue/cli
## 跳转到需要创建Vue工程的目录，这里我跳转到桌面
cd Desktop
## 创建Vue3项目，工程名是：vue3_test
vue create vue3_test
## 选择Vue3版本，继续等待
## 进入vue3_test
cd vue3_test
## 启动项目
npm run serve
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.

访问：http://localhost:8080/查看项目。

使用Vite创建

 官方文档 vite官网

## 跳转到需要创建Vue工程的目录，这里我跳转到桌面
cd Desktop
## 创建工程，工程名：vue3_test_vite
npm init vite-app vue3_test_vite
## 进入工程目录
cd vue3_test_vite
## 安装依赖
npm install
## 运行
npm run dev
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.

访问：http://localhost:4000/查看项目。

分析工程结构

main.js

// 引入的不再是Vue构造函数，引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'
// 创建应用实例对象app（类似于之前Vue2中的vm，但app比vm轻量化），并挂载
createApp(App).mount('#app')
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

App.vue

<template>
  <!--Vue3组件中的模板结构可以没有根标签-->
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.