使用vite创建vue3项目、vue-cli创建vue3项目结构分析

1. 使用vite创建vue3项目

介绍：vite是新一代前端构建工具。优势如下：

• 开发环境中，无需打包操作，可快速的冷启动
• 轻量快速的热重载（HMR）
• 真正的按需编译，不再等待整个应用编译完成

传统构建与vite构建对比图。传统构建先将所有的都打包好，再启动服务。vite构建先启动服务，需要访问什么再去动态导入进行加载

创建vue3项目

也可以使用pnpm create vite创建项目，输入项目名称、前端框架、语言类型就可以了

C:\Users\hehuan\Desktop>npm init vite-app vue3-vite-project
C:\Users\hehuan\Desktop>cd vue3-vite-project
C:\Users\hehuan\Desktop\vue3-vite-project>npm install
C:\Users\hehuan\Desktop\vue3-vite-project>npm run dev

> vue3-vite-project@0.0.0 dev
> vite

[vite] Optimizable dependencies detected:
vue

  Dev server running at:
  > Network:  http://192.168.163.1:3000/
  > Network:  http://192.168.28.1:3000/
  > Network:  http://192.168.101.103:3000/
  > Local:    http://localhost:3000/
  

运行后自动打开浏览器
修改package.json配置文件，给dev命令的vite添加--open参数，让项目运行后自动打开浏览器。如下所示：

  "scripts": {
    "dev": "vite --open",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  }

配置src目录的别名
修改vite.config.ts。修改内容如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 引入node内置模块path，用来获取绝对路径
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],

  // 配置src的别名为@
  resolve: {
    alias: {
      "@": path.resolve(__dirname, 'src')
    }
  }

})

上面的vite.config.ts配置文件会有红色的语法提示，需要安装@types/node，这是TypeScript的一个声明文件包，用于描述Node.js核心模块和常用的第三方库的类型信息。安装命令pnpm i @types/node --save-dev

修改tsconfig.json配置文件, 找到配置项compilerOptions，添加配置如下, 让IDE可以对路径进行智能提示

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

然后就可以直接使用@来表示src目录了。示例: import App from '@/App.vue'

reset.scss初始化
在npmjs搜索reset.scss，将Code -> reset.scss的内容全部拷贝到src/reset.scss文件中，再在main.ts中使用import './reset.scss'引用reset.scss。最后使用pnpm i sass安装sass

2. vue-cli创建vue3项目结构分析

1. main.js
   1. 引入的是一个名为createApp的工厂函数
   2. 用createApp创建应用实例对象app
   3. 用app挂载App组件

// 引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'

// 创建应用实例对象app。类似于之前Vue2中的vm，但app比vm更轻
const app = createApp(App)

// 挂载
app.mount('#app')
// app.unmount()

2. App.vue。可以没有组件模板根标签

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>