前言

• 我目前还是在用 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项目

2.1 、✅ 方式一（首选）

• 首选这种方式创建vue3项目：

  • 前提环境条件：
    • 已安装 16.0 或 更高版本的 Node.js；
    • 创建一个Vue应用：

      npm init vue@latest
      

      • 这一指令将会安装并执行 create vue；

• 这种方式的 优点：

  • 会安装 最新版本 的 vue3、vueRouter、Pinia 等；
  • 会有 vueRouter 和 Pinia 的创建，不用我们自己手动去创建；
  • 在项目里面我们可以使用 @ 表示 src 文件夹（@转换为src，是在vite.config.js这一文件中进行操作的）；
  • 我们自己可以添加一个配置【输入 @ 自动联想 src 目录】；
    • 在项目的根目录下，新建 jsconfig.json 文件：
      • 此处的配置，只起到 联想 / 提示 的作用，不做路径的转换，真正的路径转换，是在vite.config.js 中做的；

      {
        "compilerOptions": {
          "baseUrl": "./",
          "paths": {
            "@/*": [
              "src/*"
            ]
          }
        }
      }
      

• 

2.2 ❌ 方式二

• 缺点：
  • 不一定能安装最新版本的插件；
  • 不能使用@表示src文件夹，需要自己取配置（这个配置可以参考我的这篇文章）；
• 运行命令创建项目：
  • 查看 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')
  

❗ 注意：

• mount()方法应该始终在整个应用配置和资源注册完成后被调用；
• ❗ 不同于 其他资源注册方法，它的返回值是 根组件实例 而非 应用实例；

3.2 其他文件

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