Vue3知识点整理（1）- 创建Vue3.0工程、分析工程结构

目录

一、创建Vue3.0工程

1.1 使用vue-cli创建

1.1.1 确认版本

1.1.2 创建工程

1.1.3 启动工程

1.2 使用vite创建

1.2.1 创建工程

1.2.2 安装依赖

1.2.3 启动工程

1.2.4 启动速度对比

二、分析工程结构

2.1 main.js

2.2 app.vue

---

一、创建Vue3.0工程

1.1 使用vue-cli创建

相关内容也可查看：

Vue知识点整理（三）- Vue脚手架（1）- 初始化Vue脚手架

Vue CLI官方文档

1.1.1 确认版本

查看@vue/cli版本，确保@vue/cli版本在4.5.0以上

vue -V
或
vue --version

若版本为4.5.0以下，需安装或者升级@vue/cli

npm install -g @vue/cli

1.1.2 创建工程

## 创建工程
vue create <project-name>

1.1.3 启动工程

## 进入工程目录
cd vue_test
## 运行
npm run serve

1.2 使用vite创建

Vue官方文档 - vite

vite官方文档

vite：新一代前端构建工具

优势：

• 开发环境中，无需打包操作，可快速的冷启动
• 轻量快速的热重载
• 真正的按需编译，不再等待整个应用编译完成

传统构建工具 - webpack工作模式

vite构建工具

1.2.1 创建工程

## 创建工程
npm init vite-app <project-name>

1.2.2 安装依赖

## 进入工程目录
cd <project-name>
## 安装依赖
npm install

1.2.3 启动工程

## 运行
npm run dev

1.2.4 启动速度对比

由图示可以明显看出，使用vite创建的项目启动得要更快

二、分析工程结构

Vue2项目工程结构分析：Vue知识点整理（三）- Vue脚手架（1）- 简单分析Vue脚手架结构

主要分析：使用vue-cli创建的Vue3.0工程项目与  Vue2 工程项目区别

2.1 main.js

// 引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数
import { createApp } from "vue";
import App from "./App.vue";

// 创建应用实例对象--app（类似与之前Vue2中的vm，但app比vm更“轻”，即app身上的属性和方法更少）
createApp(App).mount("#app");

// const app = create(App);
// app.mount("#app");

/* ## Vue2
const vm = new Vue({
    return:h => h(App)
})
vm.$mount('#app') 
*/

2.2 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>