目录
一、创建Vue3.0工程
1.1 使用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创建
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>