前言

• 我目前还是在用 JavaScripr开发项目，后面会学习 TypeScript ，也会专门写一篇《从 0~1 创建Vue3 + TS 项目》。
• 求关注😭
  

一、创建项目前的准备工作

1.1 安装Node

• 创建项目需要使用 npm 或 yarn
  • 可以去看我的另一篇文章：《从 0~1 创建Vue2项目》
    • 里面包含 Node 的安装、 npm 和 yarn 的使用

1.2 安装Vite

• 全局安装Vite：

  // 二选一
  npm install vite -g
  yarn global add vite 
  

二、创建Vue3项目

• 运行命令创建项目：
  • 查看 npm 版本号： npm -v
  • npm 6.x

    npm create vite@latest 项目名称 --template vue
    

    • 
  • npm 7.x 以上版本

    npm create vite@latest 项目名称 -- --template vue
    

  • yarn：（我自己是比较偏向于yarn的）

    yarn create vite 项目名称 --template vue
    

    • 

三、项目主要文件介绍

3.1 main.js

• main.js：项目的主入口文件，把 App.vue 渲染到 index.html 中

  /**
   * 创建一个Vue3应用
   * 1. 导入 createApp 函数
   * 2. 编写一个跟组件 App.vue ，导入进来
   * 3. 基于根组件创建应用实例
   * 4. 挂载到 index.html 的 #app 容器
   * **/
  
  // NOTE 从 vue 中导入 createApp 函数
  import { createApp } from 'vue'
  
  import './style.css'
  
  // NOTE 导入根组件 App.vue
  import App from './App.vue'
  
  // NOTE 通过 createApp 函数创建应用实例
  // NOTE mount 函数，将应用实例渲染在容器元素里面
  createApp(App).mount('#app')
  

3.2 其他文件

• App.vue：用来编写待渲染的模板结构，也称为 根组件
• index.html：单页面程序唯一的界面文件。