1.Vue3 - 创建Vue3工程

目录

• [一、 基于vue-cli 脚手架](#一、 基于vue-cli 脚手架)
• [二、基于vite 推荐](#二、基于vite 推荐)
• • [2.1 介绍](#2.1 介绍)
  • [2.2 创建项目](#2.2 创建项目)
  • [2.3 文件介绍](#2.3 文件介绍)
  • • [2.3.1 extensions.json](#2.3.1 extensions.json)
    • [2.3.2 脚手架的根目录](#2.3.2 脚手架的根目录)
    • [2.3.3 主要文件 src](#2.3.3 主要文件 src)
    • • [2.3.3.1 main.js](#2.3.3.1 main.js)
      • [2.3.3.2 App.vue 组件](#2.3.3.2 App.vue 组件)
      • [2.3.3.3 conponents](#2.3.3.3 conponents)
    • [2.3.4 env.d.ts](#2.3.4 env.d.ts)
    • [2.3.5 index.html 入口文件](#2.3.5 index.html 入口文件)
    • [2.3.6 package](#2.3.6 package)
    • [2.3.7 tsconfig](#2.3.7 tsconfig)
    • [2.3.8 vite.config.js](#2.3.8 vite.config.js)

一、 基于vue-cli 脚手架

目前vue-cli已处于维护模式，官方推荐基于Vite创建项目

r## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version

## 安装或者升级你的@vue/cli 
npm install -g @vue/cli

## 执行创建命令
vue create vue_test

##  随后选择3.x
##  Choose a version of Vue.js that you want to start the project with (Use arrow keys)
##  > 3.x
##    2.x

## 启动
cd vue_test
npm run serve

二、基于vite 推荐

2.1 介绍

vite 是新一代前端构建工具，官网地址：https://vitejs.cn，vite的优势如下：

• 轻量快速的热重载（HMR），能实现极速的服务启动。
• 对 TypeScript、JSX、CSS 等支持开箱即用。
• 真正的按需编译，不再等待整个应用编译完成。
• webpack构建 与 vite构建对比图如下：

webpack构建如下所示

从entry入口文件进来，先route路由对module每一个都分析，分析完成后进行一个Bundle处理，吃力完成之后Server ready 工程启动了

从route到module的过程是很耗时的

如果用webpack架构的时候，当路由和模块特别多的时候，启动项目就会非常的慢

vite构建如下图所示

一上来就Server ready项目就启动，那什么就没准备好就启动么？ 其实是我们看哪个，它就会准备哪个

我们不看的路由和模块，就不会进行处理

有点懒加载的意思

2.2 创建项目

官方文档：https://cn.vuejs.org/guide/quick-start#creating-a-vue-application

## 1.创建命令
npm create vue@latest

## 2.具体配置
## 配置项目名称
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript?  Yes
## 是否添加JSX支持
√ Add JSX Support?  No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development?  No
## 是否添加pinia环境
√ Add Pinia for state management?  No
## 是否添加单元测试
√ Add Vitest for Unit Testing?  No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? >> No
## 是否添加ESLint语法检查
√ Add ESLint for code quality?  Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting?  No

2.3 文件介绍

2.3.1 extensions.json

在这个文件中配置着各种各样的插件

2.3.2 脚手架的根目录

2.3.3 主要文件 src

2.3.3.1 main.js

// 样式内容
import './assets/main.css'

// 下面这三行的内容比较重要
// 创建应用 相当于种花时候的花盆
import { createApp } from 'vue'

// App组件 相当于花的根
import App from './App.vue'

// App组件是所有组件的根 组件 将花插在花盆里
// mount是挂载的意思，挂载到app的容器里面，app容器在index.html文件里<div id="app"></div>
createApp(App).mount('#app')

此文件在入口文件index.html中通过如下代码被引入

 <script type="module" src="/src/main.js"></script>

2.3.3.2 App.vue 组件

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

2.3.3.3 conponents

里面会存放很多的组件，这里其实就是树枝，App.vue是根

2.3.4 env.d.ts

不要把这个文件删除，如果没有node_modules文件夹的话，意味着没有依赖，这个文件就会飘红

飘红的我们是我们直接执行 "npm i"，安装所有的依赖

如果我们直接向文件引入".jpg"、".txt"文件，ts会不认识的

env.d.ts文件的作用就是让ts认识这些文件，当我们加上图片中的代码后，我们的引用就不会飘红

2.3.5 index.html 入口文件

如果我们目前新项目的src目录中的内容都不动的话，我们的页面仅仅会呈现index.html文件中的内容

在这个文件中做了一个非常重要的事情，将"/src/main.js"引入了

 <script type="module" src="/src/main.js"></script>

2.3.6 package

包的管理文件，依赖声明文件

2.3.7 tsconfig

ts的配置文件，不能删除

2.3.8 vite.config.js

这是整个工程的配置文件

可以安装插件、配置代理