Vite 入门视频图文教程

分类: 视频教程发布时间: 2020-11-23集数: 6浏览数: 34566学习时长: 21min

在我写《Vue3.x+TypeScript基础课程》的时候，因为使用Vue-cli来初始化搭建项目，所以很多小伙伴的留言，让我讲讲Vite这个构建工具。小伙伴的要求那必须要满足，现在就开始我们的学习吧。

Vite这个单词是一个法语单词，意思就是轻快的意思。它和我们一起使用Vue-cli的作用基本相同，都是项目初始化构建工具，相当于Vue项目构建的第二代产品，当然它也包含了项目的编译功能。需要注意一下Vite的生产环境下打包是通过Rollup来完成的，

Vue3.x+TypeScript基础课程链接：https://www.jspang.com/detailed?id=64

01.Vite简介和搭建Vue3开发环境

很高兴你能跟我学习这门新的课程，这门课程不会太长，因为这只是一个项目构建打包工具，学习起来也不会有太大的压力。

Vite简介

Vite这个单词是一个法语单词，意思就是轻快的意思。它和我们以前使用Vue-cli的作用基本相同，都是项目初始化构建工具，相当于Vue项目构建的第二代产品，当然它也包含了项目的编译功能。需要注意一下Vite的生产环境下打包是通过Rollup来完成的，

Rollup是JavaScriptd的模块bundler(打包器)，可以将一小段代码编译为更大或更复杂的内容，例如库或应用程序。

也就是说Vite提供的是开发环境中的编译，打包工作是依靠的Rollup。

Vite特性介绍

Vite主打特点就是轻快冷服务启动。冷服务的意思是，在开发预览中，它是不进行打包的。
开发中可以实现热更新，也就是说在你开发的时候，只要一保存，结果就会更新。
按需进行更新编译，不会刷新全部DOM节点。这功能会加快我们的开发流程度。

当然Vite和Vue-cli还有很多不同的地方，如何理解这种不同那？Vite属于第二代升级产品，这就好比你去红浪漫，有你熟悉的姑娘，这非常好，当然轻车熟路。但是来了年轻漂亮的新菇娘，在我们钱包允许的情况下，都会选择尝试体验的。

说实话，我工作中也没有使用Vite，但是我自己的项目中，我愿意尝试这种新的东西。目前Vite还是属于Beta版本，官网Github虽然说在不久就会升级为正式版，但我对尤雨溪团队的理解，这个不久至少在半年以上。

所以自己学习，自己使用没有问题，工作中尽量不用太新的技术，我是吃过亏的。

开始使用Vite - npm版

在使用Vite前，你需要知道一点，目前它只支持Vue3.x的版本，不支持Vue2.x版本。通俗的理解就是我只服侍高端用户。

下面就来看一下如何搭建Vite的使用环境活着说叫做Vite的使用方法。

先使用npm init vite-app进行初始化，你可以随便起一个项目名字，比如就叫做honglangman。然后进入到项目中。

这时候项目中并没有安装项目所需要的依赖包，所以你要使用npm install进行依赖包的安装。最后直接用npm run dev来看看项目是否可以跑起来

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

如果一切正常，在命令行中，你可以看到如下结果：

vite v1.0.0-rc.9
[vite] Optimizable dependencies detected:
vue

  Dev server running at:
  > Network:  http://192.168.0.118:3000/
  > Local:    http://localhost:3000/

这时候，打开浏览器，在地址栏里输入http://192.168.0.118:3000,就可以看到如下页面。

Vite图片

看到这个就说明我们的项目已经搭建好了。下面再使用yarn的形式来一遍。

用yarn来初始化项目

很多人已经开始使用yarn，所以有必要讲一下yarn的初始化方法。

yarn create vite-app <project-name>
cd <project-name>
yarn
yarn dev

npm和yarn没有什么本质区别，都很好，看自己习惯吧。但个人感觉用yarn的前卫一些。

如果一切正常，你也可以看到对应的页面结果。第一节，我们能看到这个结果就可以了。下节课我们解读一下Vite给我们生成的文件目录都是什么。

02.用Vite生成项目的目录结构

Vite生成的目录结构（项目结构）作一个了解。本文很短，重在理解。

|-node_modules      -- 项目依赖包的目录
|-public            -- 项目公用文件
  |--favicon.ico    -- 网站地址栏前面的小图标
|-src               -- 源文件目录，程序员主要工作的地方
  |-assets          -- 静态文件目录，图片图标，比如网站logo
  |-components      -- Vue3.x的自定义组件目录
  |--App.vue        -- 项目的根组件，单页应用都需要的
  |--index.css      -- 一般项目的通用CSS样式写在这里，main.js引入
  |--main.js        -- 项目入口文件，SPA单页应用都需要入口文件
|--.gitignore       -- git的管理配置文件，设置那些目录或文件不管理
|-- index.html      -- 项目的默认首页，Vue的组件需要挂载到这个文件上
|-- package-lock.json --项目包的锁定文件，用于防止包版本不一样导致的错误
|-- package.json    -- 项目配置文件，包管理、项目名称、版本和命令

文章看起来特别短，我还是建议你看一下视频，因为视频中有更详细的介绍。可以更好的帮助你学习。

03.Vite搭建React开发环境

Vite开发的初中虽然是为了搭配Vue3.x的，但是它也是可以支持其他框架的。比如工作中经常使用的react。这节就简单说说如何使用vite初始化React项目。

根据群里很多小伙伴们的反馈，很多小伙伴们用官方提供的API文档，并没有操作成。有人会认为这个命令不好使，其实这只是你的目录不对罢了。

搭建React项目

这里有个小坑，就是你要自己手动先建立好目录，比如在D:/Code/目录下，新创建一个文件夹，比如叫做React-vite。

我们这里使用VSCode打开项目目录，然后打开VSCode的终端，输出下面的命令。

npm init vite-app --template react
npm install

等待项目的依赖包安装完成后，就可以使用npm run dev来预览项目了。其实也非常简单。小伙伴遇到的坑就是要先建立目录，然后进入目录再执行npm init命令。

这节课的内容也不多，就是说一下如何用Vite来搭建React环境。目录的详细结构，我就不再讲解了。

04.Vite对TypeScript、CSS和JSON的支持

这节课主要讲一下使用Vite的时候如何支持TypeScrip、CSS和JSON文件。在开发中，对这三个文件的支持，也是最常见的问题，Vite也非常好的支持这三种文件的直接使用。开始学习吧。

Vite中如何使用TypeScript

这个是小伙伴问我的一个问题，所以先回答一下。其实在Vite中使用TypeScript非常简单，只要在<script>标签中加入lang=ts就可以了。

<script lang="ts">
//....any
</script>

打开根目录下/src文件夹的App.vue文件，在<script>标签中加入TypeScript的支持。然后声明一个TypeScript中显示声明的变量jspang,在mounted()声明周期钩子函数中进行输出变量，如果能输出，说明现在已经可以支持TypeScript了

<script lang="ts">
import HelloWorld from './components/HelloWorld.vue'
const jspang:string = 'jspang.com'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  mounted(){
    console.log(jspang)
  }
}
</script>

写完后，打开终端ctrl+~打开终端，输入yarn dev或npm run dev进行查看。打开网页浏览器的console(控制台)，看输出结果，能正常输出，证明现在已经可以使用TypeScript了。

支持CSS直接引入

Vite是支持CSS直接引入的，也就是说我们在.vue文件中，可以直接使用import进行引入。比如下面这种形式。

import './assets/app.css'

我们在这里作一个小例子，把页面背景色编程红色。在assets文件夹中新建一个app.css的文件，然后写入代码。

body{
    background-color: red !important;
}

要记得加入!important，为了防止css冲突。写完后打开App.vue直接使用import引入CSS，就可以生效的。

import './assets/app.css'

如果一切正常，浏览器会直接热更新，把页面的背景颜色变成红色。

支持JSON文件直接引入

Vite不仅支持样式文件（css）,还支持JSON文件的引入。方法和引入CSS一样。

在assets里，新建一个jspang.json文件，然后写入一些代码，什么代码都可以，只要符合JSON格式就可以。我写的代码如下。

{
    "name": "技术胖",
    "website": "jspang.com"
}

然后直接使用import进行引入。

import data from './assets/jspang.json'
//....
export default {
  name: 'App',
  //...
  mounted(){
    console.log(data.name)
  }
}

这样就可以在浏览器的console里看到输出技术胖了，也证明你可以直接引入JSON，并当作数据进行使用。

这节就先到这里，小伙伴们可以自己动手试一下这些操作。

05.Vite中SASS使用和JSX支持

工作中使用SASS编写样式也是常见的。SCSS算是一种预处理器(per-Processors),Vite对这种预处理器支持只是在最新的浏览器中（比如Chrome）,所以它推荐你使用原生的CSS。但有的小伙伴就是想使用SASS,那就来看看这篇文章吧。

安装SASS支持

想使用SASS需要安装对应的处理，可以使用npm或yarn进行安装。我这里使用yarn进行安装。

yarn add -D sass

安装需要等待一会，才会安装完成。你完全可以去冲一杯咖啡。

在App.vue里边写sass样式

安装完sass之后，我们打开/src目录下的App.vue文件，先在<template>部分加入下面的代码。

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <!--加入的代码...start-->
  <h1 class="name">jspang.com</h1>
  <!--加入的代码...end-->
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>

然后在<script>标签下加入<style>标签，便签属性加lang="scss"。具体代码如下：

<style lang="scss">
  .name{
    color:green;
  }
</style>

写完后，打开控制台，输入yarn dev,来测试一下结果。如果一切正常，应该在页面显示出绿色字体jspang.com.

对JSX的支持

Vite对JSX也是可以支持的，JSX最早应该是学React时候接触到的，这里我们看看如何在Vue3里进行使用。

直接在src目录中，新建一个App.jsx文件，写一段支持JSX的代码。

function App() {
    return (
        <h1>JSPang.com</h1>
    )
}
export default App;

再修改main.js中的import代码，去掉原来对App.vue的引用，加入对App.jsx的引用就可以了。

import { createApp } from 'vue'
import App from './App.jsx'
import './index.css'

createApp(App).mount('#app')

再看一下浏览器，你会发现JSX代码也是可以使用的。

你也可以再编写一个子组件，然后进行使用，比如在App.jsx中，再加入下面的代码。

function Child() {
    return (<p>我是技术胖</p>);
}

然后再修改上面的代码，引入子组件(<Child/>),注意需要在外边加一层标签。这里给出App.jsx全部代码，方便你学习。

function App() {
    return (
        <>
            <h1>JSPang.com</h1>
            <Child />
        </>
    )
}
function Child() {
    return (<p>我是技术胖</p>);
}
export default App;

写完后，就可以到浏览器中查看结果了。

关于Vite生成模板VSCode中报错的问题

这个是小伙伴问我的一个问题，Vite生成的App.vue这个代码，在VSCode标签中，会有红色波浪线的报错，这个如何解决?错误入下图。

Vite错误

这个问题虽然不影响开发，但是对于强迫症，是不允许VSCode上有红波浪线出现的，看到就心烦，看到就不爽。其实这个问题很好解决。只要加一个最外层的标签就可以解决。我这里最外层加了<div>标签。

<template>
  <div>
    <img alt="Vue logo" src="./assets/logo.png" />
    <h1 class="name">jspang.com</h1>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

这篇文章就先到这里了。下篇文章见了。

06.Vite配置文件设置别名

这篇文章主要讲Vite配置文件中别名设置的坑。

Vite的配置文件叫做vite.config.js,需要建在项目的根目录下。这里边的配置项还是非常多的，配置文件这东西，你看文档就应该能明白，没有什么算法，类似key-value值的形式，没什么好讲的。

需要特别说明的就是别名的设置，有点小坑，需要根大家说明白。所以我们单独拿出来讲。

先来演示一下文档中的说法，也就是错误的做法。在vite.config.js中写入下面的别名配置。

export default {
    alias: {
        '@': './src'
    }
}

然后在App.vue文件中，把引用目录修改一下。

import HelloWorld from '@/components/HelloWorld.vue'
import '@/assets/app.css'

这个在Github上也有很多人提出了这个错误。尤大神已经表态这是一个Bug，但是他提出了解决方案。方案如下。

现在vite.config.js中的别名前后都加一个/线，还需要对resolve进行结构，具体代码如下。

const { resolve } = require('path')
export default {
    alias: {
        '/@/': resolve(__dirname, 'src')
    }
}

这样写应该可以了吧？其实还是不行的，我们可以用yarn dev来测试一下。直接报下面的错误。

[vite] Failed to resolve module import "@/components/HelloWorld.vue". (imported by /@/App.vue)
[vite] Failed to resolve module import "@/assets/app.css". (imported by /@/App.vue)

你还需要修改引入方式，在App.vue中也需要用配置的别名，即/@/,所以引入的代码如下。

import HelloWorld from '/@/components/HelloWorld.vue'
import '/@/assets/app.css'

这样就可以了。你也许会觉的很麻烦，这个算是一个Bug，我也是掉进坑里一段时间，才爬出来。前途的关于配置文件就很简单了，有些你也不会使用，就不讲解了。

这节课算是Vite这个小系列的最后一节，Vite很轻量级，它就是帮助我们构建和打包项目的一个工具。目前还是测试版本，你可以提前学习和用在个人项目中，但是公司的项目还是要谨慎的。

小伙伴们下套视频见了。

评论/留言

文章目录

01.Vite简介和搭建Vue3开发环境 02.用Vite生成项目的目录结构 03.Vite搭建React开发环境 04.Vite对TypeScript、CSS和JSON的支持 05.Vite中SASS使用和JSX支持 06.Vite配置文件设置别名

GoTop