vue3_1">创建vue3项目

vue_cli_2">使用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 项目
在这里插入图片描述
选择使用 vue3

选择安装使用 NPM

等待 ing

创建成功，进入项目，并运行：

使用vite创建

使用vite安装官方文档

vite官网

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

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

按照步骤执行以上命令即可：
在这里插入图片描述

分析目录结构

分析 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 开发者工具可以禁用了
在这里插入图片描述

关于 npm 和 yarn

npm 比较慢可以选用 yarn，使用 yarn -v 查看 yarn 版本，如果没有安装，使用 npm i -g yarn 来安装 yarn

或者我们可以修改 npm 的镜像，使用 npm config get registry 可以得到一个链接，这个链接就是我们下载的地址
在这里插入图片描述
我们可以使用 npm config set registry https://registry.npmmirror.com/ 这样就设置成了国内的镜像