创建vue3工程

fishmemory7sec

墨衍会员 · AI 创作全网分发码龄5年

关注

原创 2024-08-17 17:23:05 598 阅读 AI 写同款· GEO 优化 ›

【大前端】Vue3 工程化项目使用详解 VUE3 工程化项目使用详解阅读详情

创建方式

基于 vite 创建（vue3官方推荐）
基于 vue-cli 创建

基于 vite 创建

vite 官方文档

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

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

具体操作如下（点击查看vue3官方文档-创建一个vue应用）
- 注意：node.js的版本必须大于v18.3.0

## 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

项目目录结构：

my-vue3-project/
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   │   ├── base.css
│   │   ├── logo.svg
│   │   └── main.css
│   ├── components/
│   │   ├── icons/
│   │   ├── HelloWorld.vue
│   │   └── TheWelcome.vue
│   ├── router/
│   │   └── index.ts
│   ├── store/
│   │   └── counter.ts
│   ├── views/
│   │   ├── HomeView.vue
│   │   └── AboutView.vue
│   ├── App.vue
│   └── main.ts
│
├── .gitignore
├── env.d.ts
├── index.html
├── package-lock.json
├── package.json
├── README.md
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

顶级目录的文件说明

.gitignore：用于指定哪些文件和目录不应被 Git 版本控制系统跟踪。
env.d.ts：用于定义环境变量的 TypeScript 类型声明文件。
- 在 TypeScript 中，默认情况下确实不会识别 .jpg、.txt 等非 TypeScript 或 JavaScript 相关的文件后缀名。
- env.d.ts只有一条语句：/// <reference types="vite/client" />。这是一个三斜杠指令。 env.d.ts配置文件，让TypeScript 能识别非 TypeScript 或 JavaScript 相关的文件后缀名。
- vue官方，把所有可能要写的文件都做好声明了。CTRL+鼠标左键点击vite/client就可以跳转到client.d.ts，前端常用的文件都已经在这个文件里声明了。
index.html：入口文件。通常包含对 JavaScript 包的引用和基本的页面结构。
- 注意，项目的入口文件不是main.js、main.ts，是 index.html。
package-lock.json（如果使用 npm）：记录了项目确切的依赖版本信息。
package.json：包含项目的元数据、依赖列表、脚本命令等。
README.md：项目的说明文档，通常包括项目的介绍、安装说明、使用方法等。
tsconfig.app.json、tsconfig.json、tsconfig.node.json：不同场景下的 TypeScript 配置文件，可能用于特定的编译选项或模块解析规则。
vite.config.ts：Vite 的配置文件，用于自定义 Vite 的构建行为，如设置别名、配置插件等。

main.ts

// 导入项目中的全局样式文件，通常包含一些通用的样式规则，用于为整个应用提供一致的外观。
import './assets/main.css'

// 引入 createApp 用于创建实例
import { createApp } from 'vue'
// 引入 createPinia 函数，Pinia 是 Vue 的状态管理库，用于集中管理应用的状态
import { createPinia } from 'pinia'

// 引入 App.vue 根组件
import App from './App.vue'
// 引入路由模块，用于定义应用的不同路由和页面之间的导航
import router from './router'

// 使用 createApp 函数创建一个 Vue 应用实例，并将根组件 App 传递给它
const app = createApp(App)

// 使用 app.use 方法安装 Pinia 状态管理库，使应用能够使用 Pinia 来管理状态
app.use(createPinia())

// 使用 app.use 方法安装路由模块，使应用能够使用定义好的路由进行页面导航
app.use(router)

// 将 Vue 应用实例挂载到页面中具有 id 为 app 的 DOM 元素上，使应用在浏览器中显示出来
app.mount('#app')

每个 Vue 应用都是通过 createApp 函数创建一个新的应用实例：

import { createApp } from 'vue'
const app = createApp({
  /* 根组件选项 */
})

应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串：

<div id="app"></div>

app.mount('#app')

应用根组件的内容将会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分。

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

注意：将 Vue 应用实例挂载到一个 DOM 元素上，通常是在index.html文件中指定的一个元素。

比如app.mount('#app')，id 为 app 的元素是在index.html中：
在这里插入图片描述

App.vue

这是应用的根组件，通常包含应用的全局布局和导航结构，以及通过<router-view>来展示不同路由对应的页面。

当根组件没有设置 template 选项时，Vue 将自动使用容器的 innerHTML 作为模板。

总结

Vite 项目中，index.html 是项目的入口文件，在项目最外层。
加载index.html后，Vite 解析 <script type="module" src="xxx"> 指向的JavaScript。
Vue3中是通过 createApp 函数创建一个应用实例。

插件

安装官方推荐的vscode插件：
在这里插入图片描述

基于vue-cli创建

vue-cli 官方文档

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

步骤如下：

## 查看@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