Vite - 开发初体验，以及按需导入配置

news2024/11/26 11:56:01

 

目录

开始

创建一个 Vite 项目

项目结构

/src/main.js

index.html

package.json

vite.config.js

Vite 项目中使用 vue-router

Vite 组件的“按需引入”

传统的方式引入一个组件

传统方式引入带来的问题

解决办法（配置 按需引入 插件）

示例：elementPlus、naive-ui 按需引入

Vite vue API 的按需引入

传统方式使用 API

解决办法（配置按需引入）

开始

创建一个 Vite 项目

a）在 vscode 中打开终端，输入如下命令：

npm create vite@latest

b）流程如下：

如果是第一次下载，他会询问你下载 vite，输入 y 即可

接着会询问你给项目起什么名字.  默认为 vite-project

接下来我们选择 Vue 即可.

接下来，会询问你选择 js 还是 ts.（本文以 js 为主） 

 

这样，我们的项目就创建好了~

c）另外，以上步骤在 IDEA 中可以直接一步到位...

d）如果执行 npm run dev 的时候出现如下错误：

说明 vue 依赖还有安装

使用 npm i 命令来初始化安装所有依赖即可（i 就是 install 的意思）

之后就可以观察到项目中多出了 node_modules 文件（这个文件中存放的就是下载好的依赖），然后通过 npm run dev 就可以成功了

 

项目结构

/src/main.js

在 Vue.js 项目中，main.js是项目的入口文件.

主要作用是初始化 Vue 应用程序，并设置一些全局配置和选项.

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')
  •  import { createApp } from 'vue'：从 vue 包中导入 cteateApp 方法.  createApp 是 Vue3 中引入的一个新的 API，用于创建一个新的 Vue 应用实例.
  • import './style.css'：导入当前项目下 style.css 文件. 通常是一个包含全局样式的 CSS 文件.
  • import App from './App.vue'：从./App.vue 文件中导入 App 组件.  App.vue 是 Vue 应用程序的跟组件，通常包含了应用程序的初始结构和布局.
  • createApp(App).mount('#app')：
    • 使用 createApp(App) 创建了一个新的 Vue 应用实例，并将 App 组件作为根组件。
    • .mount('#app') 方法将 Vue 应用实例挂载到 HTML 文件中 ID 为 app 的元素上.  这意味着 Vue 将接管这个元素及其所有子元素，并根据 App 组件的定义来渲染他们.

index.html

这个页面为 Vue.js 的入口页面

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
  •  <div id="app"></div>：这个元素通常作为 Vue 实例的挂载点.  Vue 实例会管理整个元素及其子元素（将来我们写的一个个 vue 组件就会根据 main.js 中的定义渲染到这个标签下）.
  • <script type="module" src="/src/main.js"></script>：这里引入了一个 js 脚本，这个脚本中就包含了创建 和 挂载 Vue 实例的代码.

package.json

package.json 文件用于描述项目元信息和依赖关系.

{
  "name": "vite1",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.4.21"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "vite": "^5.2.0"
  }
}

  1. name: "vite1"

    • 这是项目的名称，叫做“vite1”。

  2. private: true

    • 这意味着这个项目是私有的，不应该被发布到 npm 仓库。这是一个安全措施，防止不小心将内部或私有项目发布到公共仓库。

  3. version: "0.0.0"

    • 这是项目的版本号，目前设置为“0.0.0”。在开发过程中，这个版本号会根据项目的更新情况进行递增。

  4. type: "module"

    • 这意味着该项目使用 ES6 模块。在 Node.js 中，如果一个项目被标记为“module”，那么它可以使用 ES6 的 import 和 export 语法。

  5. scripts:

    • 这部分定义了几个 npm 脚本，也就是 npm run xxx 命令，至于 xxx 是什么，可以是以下定义，也可以是自定义.  
      • dev: 运行 vite 命令，这通常用于启动开发服务器。
      • build: 运行 vite build 命令，用于构建生产版本的项目。
      • preview: 运行命令 vite preview，用于预览构建后的项目。
      • 自定义：例如 "foo":  "node index.js" ，当我们使用 npm run foo ，就会通过 node 去执行 index.js 文件.  

  6. dependencies:

    • 这部分列出了项目在生产环境中需要的依赖项。
      • vue: "^3.4.21" 表示项目依赖于Vue.js框架，并且版本是3.4.21

  7. devDependencies:

    • 这部分列出了项目在开发环境中需要的依赖项。
      • @vitejs/plugin-vue: "^5.0.4" 是Vite的一个插件，用于支持Vue.js项目（如果没有这个依赖，浏览器是不认识 .vue 文件的，也就不会去编译）。
      • vite: "^5.2.0" 是构建工具和开发服务器，它使现代Web开发变得更快

vite.config.js

这是 Vite 的配置文件，作用如下：

  • 定义插件：例如支持 Vue、React、CSS 预处理器等.
  • 配置构建选项：可以配置构建时的各种选项，例如输出目录、资源公共路径、别名等.
  • 配置开发服务器：可以自定开发服务器配置，例如端口号、代理配置、CORS 配置等.
  • ......
import { defineConfig } from 'vite' 
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
})
  • import { defineConfig } from 'vite'：defineConfig 函数用于定义 Vite 的配置对象，提供了类型检查和自动补全等好处.
  • import vue from '@vitejs/plugin-vue'：这个插件用于在 Vite 项目中支持 Vue3 组件开发.
  • export default defineConfig({
      plugins: [vue()],
    })：defineConfig 函数用于接收一个配置对象作为参数，这个对象中，设置了 plugins 属性.
    • plugins：是一个数组，用于列出 Vite 项目中使用的所有插件.  这里我们添加了 vue() 插件实例，以支持 Vue3 组件的编译和开发.

Vite 项目中使用 vue-router

a）安装 vue-router：

npm i vue-router -D

i：install 的意思. 

-D：告诉 npm 将 vue-router 作为开发依赖添加到 package.json 文件中，而不是作为普通的依赖（dependency）.

可以观察到 package.json 文件中开发环境依赖就有了 vue-router

 

b）配置 router：

在 src 文件下创建一个 modules/router.js 文件，用来配置路由

import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
    routes: [],
    history: createWebHistory()
})

export default router

接着在 main.js 文件中引入 router

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./modules/router.js";

const app = createApp(App)
app.use(router)  //一定要在挂在前 use
app.mount('#app')

c）使用：

例如创建 src/pages/Home.vue 文件，内容如下：

<template>
  我是首页
</template>

接着在 src/App.vue 中定义这个路由的入口

<template>
  <router-view></router-view>
</template>

最后在  src/modules/router.js 文件中声明这个路由

import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
    routes: [
        {
            name: '首页',
            component: () => import('../pages/Home.vue')
        }
    ],
    history: createWebHistory()
})

export default router

之后启动项目，打开页面就会发现一开始就在首页的位置（如果不配置 path，默认就是根目录 / ）.

d）如果还有 其他 页面：

创建 src/pages/About.vue 组件，内容如下：

<template>
  这里是其他页面
</template>

最后在  src/modules/router.js 文件中声明这个路由

import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
    routes: [
        {
            name: '首页',
            component: () => import('../pages/Home.vue')
        },
        {
            name: '其他',
            path: '/about',
            component: () => import('../pages/About.vue')
        }
    ],
    history: createWebHistory()
})

export default router

效果如下：

Vite 组件的“按需引入”

传统的方式引入一个组件

a）例如创建 /src/components/Foo.vue 组件，内容如下：

<template>
  我是 Foo
</template>

b）当你需要在其他组件中使用到该组件时，例如 在 Home.vue 组件中使用 Foo.vue 组件，那么你需要先 import 引入进来，再使用，如下：

<script setup>
  //1. 先引入
  import foo from "../components/Foo.vue"
</script>

<template>
  <div>我是首页</div>
  <!-- 2. 再使用 -->
  <foo />
</template>

c）页面效果

传统方式引入带来的问题

可以想象这样一个问题，如果将来在 Home.vue 中需要引入 成百上千 个组件呢，难道我们也要一个个手写来引入么？

因此我们就想，有没有什么办法能让他自己按需引入呢，这些 import 将来就不需要手动去写的那种？

实际上是可以的，这里有一个插件可以实现：unplugin-vue-components 

GitHub - unplugin/unplugin-vue-components: 📲 On-demand components auto importing for Vue📲 On-demand components auto importing for Vue. Contribute to unplugin/unplugin-vue-components development by creating an account on GitHub.icon-default.png?t=N7T8https://github.com/antfu/unplugin-vue-components 

解决办法（配置 按需引入 插件）

a）下载按需引入插件

npm i unplugin-vue-components -D

安装完成后，可以在 package.json 文件中如下显示

 

Ps：npm up 可以更新依赖~

b）在  vite.config.js 文件中配置 按需引入，如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//1.引入 "按需引入" 插件
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  //2.配置插件
  plugins: [vue(), Components()],
})

Note：官方文档中也告诉了你如何引入~

c）接下来你会发现，在 Home.vue 组件中使用 Foo.vue 组件，就可以不用写 import 了~

<script setup>
  // import foo from "../components/Foo.vue"
</script>

<template>
  <div>我是首页</div>

  <Foo />
</template>

示例：elementPlus、naive-ui 按需引入

Note：官方文档中也有教你怎么引入（这里我们以 ElementPlus 为例）~

a）这里我们只需要在 vite.config.js 文件中引入 elementPlus 的解析器，然后把她交给 Components 按需引入插件即可.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
//1.引入 ElementPlus 解析器
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
      vue(),
    //2.配置到 "按需引入" 中
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ],
})

b）安装 element-plus

npm i element-plus -D

c）在 Home.vue 中使用 elementPlus 的按钮

<script setup>
</script>

<template>
  <div>我是首页</div>

  <el-button>我是 element-plus 中的按钮</el-button>
</template>

d）效果如下

e）naive-ui 也同理

先通过 npm i naive-ui -D 进行安装

接着在 vite.config.js 文件中配置，如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
//1.引入 NaiveUiResolver 解析器
import { ElementPlusResolver, NaiveUiResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
      vue(),
    //2.配置到 "按需引入" 中
    Components({
      resolvers: [ElementPlusResolver(), NaiveUiResolver()]
    })
  ],
})

最后在 Home.vue 中使用，如下：

<script setup>
</script>

<template>
  <div>我是首页</div>

  <el-button>我是 element-plus 中的按钮</el-button>
  <n-button>我是 naive-ui 中的按钮</n-button>
</template>

效果如下：

Vite vue API 的按需引入

传统方式使用 API

a）例如我们在 Home.vue 文件中使用 ref 写了一个计数器（点击按钮，count++）.

<script setup>
import { ref } from 'vue'
const count = ref(1)
const countInc = () => count.value++

</script>

<template>
  <div>我是首页</div>

  <el-button @click="countInc">{{ count }}</el-button>
</template>

 将来只要用到 vue 中的 API 时就需要 import，也比较麻烦.  因此我们就可以配置按需引入.

解决办法（配置按需引入）

GitHub - unplugin/unplugin-auto-import: Auto import APIs on-demand for Vite, Webpack and RollupAuto import APIs on-demand for Vite, Webpack and Rollup - unplugin/unplugin-auto-importicon-default.png?t=N7T8https://github.com/unplugin/unplugin-auto-import

a）安装插件

npm i -D unplugin-auto-import

b）在 vite.config.js 中配置插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver, NaiveUiResolver } from 'unplugin-vue-components/resolvers'
//1.引入 AutoImport
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
      vue(),
    //2.配置到插件中
      AutoImport({
        //3.配置需要自动导入的 API 库
        imports: ['vue', 'vue-router']
      }),
    Components({
      resolvers: [ElementPlusResolver(), NaiveUiResolver()]
    })
  ],
})

c）这样就可以不用在 import 这些 API 了

<script setup>
// import { ref } from 'vue'
const count = ref(1)
const countInc = () => count.value++

</script>

<template>
  <div>我是首页</div>

  <el-button @click="countInc">{{ count }}</el-button>
</template>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1805634.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

CBoard开源数据可视化工具

CBoard开源数据可视化工具

CBoard开源数据可视化工具 文章目录 CBoard开源数据可视化工具介绍资源列表基础环境一、安装JDK二、安装Maven2.1、安装Maven2.2、配置Maven 三、安装Tomcat8四、安装MySQL5版本4.1、安装相关依赖4.2、二进制安装4.3、设定配置文件4.4、配置systemcatl方式启动4.5、访问MySQL数…
阅读更多...
PVE|中小型虚拟化平台|proxmox-ve的安装部署和初步使用

PVE|中小型虚拟化平台|proxmox-ve的安装部署和初步使用

一、 虚拟化平台简单介绍 市面上虚拟化工具或者说虚拟机平台是非常多的&#xff0c;比如&#xff0c;openshifit&#xff0c;open stack&#xff0c;华为云的魔改open stack 的HCE&#xff0c;VMware workstation&#xff0c;VMware sphere&#xff0c;VMware esix&#xff0…
阅读更多...
2024年11个博客初学者建议

2024年11个博客初学者建议

博客仍然是在线赚钱的最佳机会之一&#xff0c;因为您可以吸引受众&#xff0c;然后销售产品、服务或赞助。 然而&#xff0c;如果您刚刚开始博客生涯&#xff0c;那么建立一个可以带来数千美元收入的博客的前景可能会让您感到畏惧。 博客领域的竞争比以往更加激烈&#xff0…
阅读更多...
稀疏高效扩散模型：推动扩散模型的部署与应用

稀疏高效扩散模型：推动扩散模型的部署与应用

数据驱动的世界中&#xff0c;生成模型扮演着至关重要的角色&#xff0c;尤其是在需要创建逼真样本的任务中。扩散模型&#xff08;Diffusion Models, DM&#xff09;&#xff0c;以其卓越的样本质量和广泛的模式覆盖能力&#xff0c;已经成为众多数据生成任务的首选。然而&…
阅读更多...
【图论】Leetcode 130. 被围绕的区域【中等】

【图论】Leetcode 130. 被围绕的区域【中等】

被围绕的区域 给你一个 m x n 的矩阵 board &#xff0c;由若干字符 ‘X’ 和 ‘O’ &#xff0c;找到所有被 ‘X’ 围绕的区域&#xff0c;并将这些区域里所有的 ‘O’ 用 ‘X’ 填充。 示例 1&#xff1a; 输入&#xff1a; board [[“X”,“X”,“X”,“X”],[“X”,“O…
阅读更多...
【PL理论】(12) F#：模块 | 命名空间 | 异常处理 | 内置异常 |:? | 相互递归函数

【PL理论】(12) F#：模块 | 命名空间 | 异常处理 | 内置异常 |:? | 相互递归函数

&#x1f4ad; 写在前面&#xff1a;本章我们将介绍 F# 的模块&#xff0c;我们前几章讲的列表、集合和映射都是模块。然后我们将介绍 F# 中的异常&#xff0c;以及内置异常&#xff0c;最后再讲解一下相互递归函数。 目录 0x00 F# 模块&#xff08;Module&#xff09; 0x01…
阅读更多...
UFS协议入门-分层结构

UFS协议入门-分层结构

写在前面：本文参考UFS jedec3.1，本文思维导图如下 1. 分层概述 UFS协议分为3层，从上至下分别是：应用层(UAP)，传输层(UTP)，互联层(UIC)，具体结构如下图所示。 2.1 应用层 在应用层(UAP)中，包括：UFS指令集(UCS)，设备管理器(Device Manager)，任务管理器(Task Manager…
阅读更多...
植物大战僵尸杂交版最新2.0.88手机+电脑+苹果+修改器

植物大战僵尸杂交版最新2.0.88手机+电脑+苹果+修改器

在这个充满奇妙的平行宇宙中&#xff0c;植物和僵尸竟然能够和谐共存&#xff01;是的&#xff0c;你没听错&#xff01;一次意外的实验&#xff0c;让这两个看似对立的生物种类发生了基因杂交&#xff0c;创造出了全新的生物种类——它们既能够进行光合作用&#xff0c;也具备…
阅读更多...
《C++ Primer Plus》第十三章复习题和编程练习

《C++ Primer Plus》第十三章复习题和编程练习

目录 一、复习题**二、编程练习 一、复习题** 1. 派生类从基类那里继承了什么&#xff1f; 答&#xff1a;在类的继承和派生中&#xff0c;C中的派生类能够继承基类的所有数据成员和大部分成员函数。但是基类中不同访问控制权限的成员在派生中的访问权限也不相同。公有成员直…
阅读更多...
c++|unordered系列关联式容器(unordered_set、unordered_map介绍使用+哈希结构)

c++|unordered系列关联式容器(unordered_set、unordered_map介绍使用+哈希结构)

目录 一、unordered_set的介绍与使用 1.1unordered_set介绍 1.2unordered_set使用 2.2.1构造 2.2.2容量 2.2.3修改 二、unordered_map的介绍与使用 2.1unordered_map介绍 2.2unordered_map使用 2.2.1构造 2.2.2容量 2.2.3修改 三、底层结构(哈希) 3.1哈希概念 3.2哈…
阅读更多...
函数的概念及图像

函数的概念及图像

注&#xff1a; 判断两函数是否相同&#xff0c;只看定义域和对应法则。 1. 函数的定义 一般的&#xff0c;在一个变化过程中有两个变量 x&#xff0c;y。如果对于x在某个变化范围内的每一个确定值&#xff0c;按照某个对应法则&#xff0c;都有唯一确定的值y和他对应。那么y就…
阅读更多...
ChatGPT为啥不用Websocket而是EventSource？

ChatGPT为啥不用Websocket而是EventSource？

点击下方“JavaEdge”&#xff0c;选择“设为星标” 第一时间关注技术干货&#xff01; 免责声明~ 任何文章不要过度深思&#xff01; 万事万物都经不起审视&#xff0c;因为世上没有同样的成长环境&#xff0c;也没有同样的认知水平&#xff0c;更「没有适用于所有人的解决方案…
阅读更多...
统计信号处理基础 习题解答10-10

统计信号处理基础 习题解答10-10

题目 在本题中&#xff0c;我们讨论再生PDF。回顾前面 其中分母与无关。如果选择一个&#xff0c;使得它与相乘时&#xff0c;我们得到与相同形式的PDF&#xff0c;那么后验PDF 将有和相同的形式。例10.1的高斯PDF正是这样的一种情况。现在假设在条件下的的PDF是指数形式&…
阅读更多...
Codeforces Round 949 (Div. 2) A~D

Codeforces Round 949 (Div. 2) A~D

A. Turtle and Piggy Are Playing a Game &#xff08;思维&#xff09; 题意&#xff1a; 给出一个整数 x x x &#xff0c;使得 l ≤ x ≤ r l \le x \le r l≤x≤r &#xff0c;其中 l , r l, r l,r 为给定值。同时保证 2 l ≤ r 2l \le r 2l≤r 。 执行以下操作&…
阅读更多...
python如何输入回车

python如何输入回车

Python默认遇到回车的时候&#xff0c;输入结束。所以我们需要更改这个提示符&#xff0c;在遇到空行的时候&#xff0c;输入才结束。 raw_input就是从标注输入读取输入&#xff0c;输入的是什么就是什么。 文档解释&#xff1a; The function then reads a line from input,…
阅读更多...
quick4 - hackmyvm

quick4 - hackmyvm

简介 靶机名称&#xff1a;quick4 难度&#xff1a;简单 靶场地址&#xff1a;https://hackmyvm.eu/machines/machine.php?vmQuick4 本地环境 虚拟机&#xff1a;vitual box 靶场IP&#xff08;quick4&#xff09;&#xff1a;192.168.56.104 跳板机IP(windows 11)&…
阅读更多...
leetcode:不同的二叉树

leetcode:不同的二叉树

class Solution { public:int numTrees(int n) {vector<int> dp(n1);dp[0] 1;dp[1] 1;for(int i 2;i < n;i){for(int j 1;j < i;j) // 当根节点为j时{dp[i] dp[j-1] * dp[i-j];}}return dp[n];} }; /* dp[i] i个不同的数组成的二叉搜索数的个数假设 i 5当根…
阅读更多...
零基础非科班也能掌握的C语言知识19 动态内存管理

零基础非科班也能掌握的C语言知识19 动态内存管理

动态内存管理 1.为什么要有动态内存分配2.malloc和free2.1 malloc2.2 free 3.calloc和realloc3.1 calloc3.2realloc 4.常见的动态内存的错误4.1对NULL指针的解引用操作4.2对动态开辟空间的越界访问4.3对非动态内存开辟的空间free4.4使用free释放⼀块动态开辟内存的⼀部分4.5对同…
阅读更多...
kNN算法-概述

kNN算法-概述

所谓kNN算法就是K-nearest neigbor algorithm。这是似乎是最简单的监督机器学习算法。在训练阶段&#xff0c;kNN算法存储了标签训练样本数据。简单地说&#xff0c;就是调用训练方法时传递给它的标签训练样本会被它存储起来。 kNN算法也叫lazy learning algorithm懒惰学习算法…
阅读更多...
分享不用会员免费听歌的软件，可听付费，支持随听随下！

分享不用会员免费听歌的软件，可听付费，支持随听随下！

今天来点特别的&#xff0c;给你们带来几款全网免费听歌的神器&#xff0c;让你们的音乐之旅不再有障碍&#xff01; 现在&#xff0c;找好听的歌越来越像寻宝一样&#xff0c;动不动就得掏腰包。不过别担心&#xff0c;阿星今天就来分享几款好用的免费听歌app&#xff0c;电脑…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023