使用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
访问:http://localhost:8080/查看项目。
使用Vite创建
## 跳转到需要创建Vue工程的目录,这里我跳转到桌面
cd Desktop
## 创建工程,工程名:vue3_test_vite
npm init vite-app vue3_test_vite
## 进入工程目录
cd vue3_test_vite
## 安装依赖
npm install
## 运行
npm run dev
访问: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')
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>