文章目录

创建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项目创建和学习_vue
选择使用 vue3
Vue Vue3项目创建和学习_开发者工具_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