首页手记 Vite课程：新手入门到实战必备

Vite课程：新手入门到实战必备

标签：

前端工具 Vue.js

概述

本文档详细介绍了Vite课程，涵盖从安装到配置、实战案例以及部署技巧，帮助开发者更高效地使用Vite。文章不仅介绍了Vite的主要特点、安装步骤和项目初始化方法，还提供了丰富的配置选项和插件使用示例。

Vite简介与安装

什么是Vite

Vite是一款由尤雨欣（Evan You）等人开发的下一代前端构建工具。它采用了基于原生ES模块的编译方案，极大地提升了开发者的体验。与传统的构建工具相比，Vite在开发环境中的速度更快，因为它不需要在启动时进行完整的编译过程，而是直接将原生ES模块暴露给开发者。这使得项目的启动速度和热更新速度得到了大幅提高。

Vite的主要特点

Vite具有以下几个主要特点：

快速的热更新：Vite的热更新速度非常快，因为它不再需要对整个项目进行重新编译，而是直接修改被改动的模块。
基于原生ES模块：Vite使用原生ES模块化，这意味着它不需要像Webpack那样预编译所有模块，而是直接读取ES模块的源代码。
按需编译：Vite在开发过程中只编译当前需要的模块，而不是整个项目，从而极大地减少了构建时间。
开箱即用的开发服务器：Vite提供了内置的开发服务器，支持各种现代前端技术，如TypeScript、CSS预处理器等。
高效的生产构建：虽然在开发环境中使用原生ES模块，但Vite在生产环境中仍然可以生成高效的静态资源，比如通过ESM转译和Tree Shaking等技术。

如何安装Vite

Vite可以非常方便地通过npm或yarn来安装和使用。以下是安装Vite的详细步骤：

安装npm

npm install -g create-vite

使用Vite命令创建项目

create-vite my-vite-app

安装项目依赖

进入项目目录并安装依赖：

cd my-vite-app
npm install

运行开发服务器

npm run dev

这将启动一个本地开发服务器，默认监听3000端口，你可以通过浏览器访问http://localhost:3000来查看项目。

创建第一个Vite项目

初始化项目

使用Vite创建一个新的项目，可以通过以下命令来完成：

create-vite my-vite-app

这将创建一个名为my-vite-app的新目录，并在其中初始化一个新的Vite项目。

项目目录结构解析

创建项目后，目录结构如下：

my-vite-app/
├── index.html
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── logo.svg
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   └── main.ts
├── package.json
├── vite.config.ts
└── tsconfig.json

index.html

这是项目的主HTML文件，用于引入项目的入口文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/src/main.ts"></script>
  </body>
</html>

public/

存放一些不需要经过构建过程的静态资源，例如图片和字体等。

src/

这是项目的核心代码目录，包含了组件、样式、逻辑等。

assets/：存放静态资源文件，例如图片和图标等。
components/：存放组件文件。
App.vue：项目的根组件。
main.ts：项目的入口文件。

package.json

包含项目的依赖和脚本配置，例如开发和生产脚本。

{
  "name": "my-vite-app",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "vite": "^2.0.0",
    "vue": "^3.0.0",
    "vue-loader": "^16.0.0"
  }
}

vite.config.ts

Vite的配置文件，可以在这里配置一些项目特性的设置。

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

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true
  }
});

tsconfig.json

TypeScript配置文件，用于指定编译选项。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "baseUrl": "src",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

运行与调试

在项目目录下执行以下命令来启动开发服务器：

npm run dev

这将启动一个开发服务器，监听3000端口，并自动打开默认浏览器。你可以在浏览器中访问http://localhost:3000来查看项目。

在开发过程中，Vite会自动监听文件的变化，并在文件保存时进行热更新。如果需要调试，可以使用浏览器自带的开发者工具，或者在main.ts中加入断点进行调试。

基础配置

配置文件介绍

Vite的配置文件位于vite.config.ts，可以在这里进行各种项目的配置。以下是一些常见的配置选项：

插件配置

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

export default defineConfig({
  plugins: [vue()],
});

服务器配置

export default defineConfig({
  server: {
    port: 3000,
    host: 'localhost',
    open: true
  }
});

静态资源配置

export default defineConfig({
  assetsDir: 'assets',
  base: './'
});

其他配置

export default defineConfig({
  resolve: {
    alias: {
      '@': '/src'
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "./src/styles/_variables.scss";'
      }
    }
  }
});

路由配置

Vite本身并不直接支持路由管理，但可以结合Vue Router或其他路由库来实现。以下是一个使用Vue Router的示例：

安装Vue Router

npm install vue-router

在项目中配置Vue Router

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

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

export default router;

在主组件中使用Router

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

常用插件使用

Vue Plugin

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

export default defineConfig({
  plugins: [vue()],
});

ESLint

npm install eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

在`package.json`中配置ESLint

{
  "scripts": {
    "lint": "eslint . --ext .ts,.tsx,.vue"
  }
}

在`.eslintrc.js`中配置

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  plugins: ['vue', '@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  rules: {
    'vue/multi-word-component-names': 'off',
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
};

动态导入与代码分割

代码分割的好处

代码分割可以使你的应用更轻量，避免一次性加载所有代码，只在需要时加载。这有助于减少初始加载时间，优化用户体验。

如何动态导入模块

在Vite中，你可以使用import()语法来动态导入模块。例如，假设你有一个组件文件ComponentA.vue，你可以在需要的时候动态导入它：

const ComponentA = () => import('./ComponentA.vue');

这种方式可以让Vite只在实际使用到模块时才进行编译和加载，从而实现代码分割。

实例演示与优化

动态导入组件

假设你的应用中有多个页面，每个页面是一个独立的组件。你可以使用import()来动态加载这些组件：

const Home = () => import('./views/Home.vue');
const About = () => import('./views/About.vue');

在路由配置中使用动态导入

const routes = [
  { path: '/', component: () => import('./views/Home.vue') },
  { path: '/about', component: () => import('./views/About.vue') },
];

优化代码分割

为了进一步优化代码分割，你还可以使用import.meta.env环境变量来控制动态导入的逻辑。例如，只有在特定环境下才导入某个模块：

const ComponentB = import.meta.env.DEV ? () => import('./ComponentB.vue') : () => import('./ComponentBProd.vue');

静态资源处理

如何处理CSS与样式

在Vite项目中，你可以直接使用CSS文件，也可以使用预处理器如Sass或Less。以下是一个使用Sass的例子：

安装Sass：
```
npm install sass
```

在项目中使用Sass：

/* src/styles/main.scss */
@import './variables.scss';

body {
 background-color: $primary-bg-color;
}

在Vue组件中导入CSS：

<template>
 <div>
   <h1>App</h1>
 </div>
</template>

<script>
import './main.scss';
export default {
 name: 'App'
};
</script>

处理图片和字体资源

在Vite中，你可以直接使用静态资源，例如图片和字体。以下是如何处理这些资源的一些建议：

处理图片资源

<!-- src/components/Logo.vue -->
<template>
  <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@/assets/logo.png" alt="Logo">
</template>

<script>
export default {
  name: 'Logo'
};
</script>

处理字体资源

<!-- src/styles/fonts.css -->
@font-face {
  font-family: 'MyFont';
  src: url('./fonts/myfont.woff2') format('woff2'),
       url('./fonts/myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'MyFont', sans-serif;
}

<!-- src/App.vue -->
<template>
  <div>
    <h1>Hello World</h1>
  </div>
</template>

<script>
import './styles/fonts.css';
export default {
  name: 'App'
};
</script>

使用Vite进行API接口请求

在Vite项目中，你可以使用各种库来处理API请求，例如axios。以下是一个简单的示例：

安装axios

npm install axios

在Vue组件中使用axios

<script>
import axios from 'axios';

export default {
  name: 'App',
  async mounted() {
    const res = await axios.get('https://api.example.com/data');
    console.log(res.data);
  }
};
</script>

Vite实战案例

实战项目选择与规划

选择一个合适的小型项目，可以帮助你更好地理解Vite的实际应用。例如，你可以选择一个简单的博客系统，包含文章列表、文章详情、用户注册和登录等功能。

项目结构规划

src/components/：存放各个页面和功能组件。
src/views/：存放各个路由对应的视图组件。
src/api/：存放API请求相关的代码。
src/store/：存放状态管理相关的代码。
src/utils/：存放工具函数和通用代码。

功能规划

用户注册和登录。
文章列表展示。
文章详情展示。
用户评论和点赞功能。

实际开发中遇到的问题及解决方案

问题1：热更新不生效

描述：在开发过程中，修改代码后，浏览器中没有自动更新。
解决方案：

确保vite.config.ts中开启了热更新：

export default defineConfig({
 server: {
   hot: true
 }
});

确保代码中没有语法错误，特别是ES模块语法错误。

问题2：依赖注入失败

描述：使用Vue的依赖注入时，组件间无法正确传递数据。
解决方案：

确保使用provide和inject时，父组件提供了正确的数据。
在子组件中正确使用inject获取数据。

问题3：路由不生效

描述：配置了路由，但页面切换时没有生效。
解决方案：

确保路由配置正确，且路由文件路径正确。

在主组件中正确使用router：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

项目部署与上线技巧

部署到服务器

构建项目：
```
npm run build
```
将生成的静态文件（位于dist/目录下）上传到服务器。
配置Nginx或Apache等Web服务器，使其指向dist/目录。

使用CDN

将静态资源（如CSS、JS、图片等）部署到CDN，可以提高资源加载速度。

定期部署与维护

定期对项目进行部署和维护，确保其稳定运行。

监控与日志

使用监控工具（如Prometheus、Grafana）监控应用运行状态，并配置日志记录，便于排查问题。

// package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  }
}

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true
  }
});

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

Qyouu

手记
篇

粉丝

88

获赞与收藏

414

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30936 346

网络编程入门教程

20个小节 12729 240

Pandas 入门教程

25个小节 18626 342

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空