文章目录

创建vue3项目

使用vue cli创建

​​使用vue cli创建vue3项目官方文档​​

##查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
或
vue -V
##安装或者升级你的@vue/cli
npm install -g @vue/cli
##创建
vue create vue_test
##启动
cd vue_test
npm run serve

查看版本，创建 vue3_test 项目
Vue Vue3项目创建和学习_开发者工具
选择使用 vue3
Vue Vue3项目创建和学习_vue_02
选择安装使用 NPM
Vue Vue3项目创建和学习_构造函数_03
等待 ing
Vue Vue3项目创建和学习_开发者工具_04
创建成功，进入项目，并运行：
Vue Vue3项目创建和学习_目录结构_05
Vue Vue3项目创建和学习_构造函数_06

使用vite创建

​​使用vite安装官方文档​​

​​vite官网​​

。什么是vite? ——新一代前端构建工具
。优势如下:
------1、开发环境中，无需打包操作，可快速的冷启动
------2、轻量快速的热重载(HMR)
------3、真正的按需编译，不再等待整个应用编译完成

##创建工程
npm init vite-app <project-name>
##进入工程目录
cd <projecl-name>
##安装依赖
npm install
##运行
npm run dev

按照步骤执行以上命令即可：
Vue Vue3项目创建和学习_开发者工具_07

分析目录结构

分析 Vue cli 创建的Vue3项目目录结构

首先看 main.js

//引入的不再是Vue构造函数了
//引入的是一个名为 createApp 的工厂函数
import { createApp } from 'vue'
import App from './App.vue'
//创建应用实例对象--app(类似vue2中的vm,但更“轻”)
createApp(App).mount('#app')

在 vue.config.js 中增加 ​​lintOnSave:false​​ 来关闭语法检查

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>
......
</style>

其他和 vue2 差不多

安装开发者工具

Chrome 网上商店里搜索 vue，安装第一个带 beta 角标的这个，支持 vue3。之前安装的 vue 开发者工具可以禁用了
Vue Vue3项目创建和学习_构造函数_08