专注前端开发,每年100集免费视频。
首页/视频教程/ Vite 入门视频图文教程/
Vite 入门视频图文教程
2020-11-23 视频教程 107906

在我写《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特性介绍

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

当然ViteVue-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的时候如何支持TypeScripCSSJSON文件。在开发中,对这三个文件的支持,也是最常见的问题,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 devnpm 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需要安装对应的处理,可以使用npmyarn进行安装。我这里使用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很轻量级,它就是帮助我们构建和打包项目的一个工具。目前还是测试版本,你可以提前学习和用在个人项目中,但是公司的项目还是要谨慎的。

小伙伴们下套视频见了。

真诚感谢您的留言,我会亲自查收每一条留言并进行回复,审核后显示在文章底部。
您的昵称
电子邮件
最新留言

No Data

技术胖
光头Coder12年经验业余讲师免费视频被访问
只要50元/年 得3项福利

视频离线高清版下载-400集

每周至少两篇文章分享

每天回答所提问题(选择性回答)

关注公众号
扫码关注公众号
每周二,推送最新程序员软件技能视频
让技术和能力双成长