Vue3开发环境搭建全攻略：Vite的详细介绍

Vite简介

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

Vite特性介绍

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

开始使用Vite(npm版)

先使用npm init vite-app进行初始化，你可以随便起一个项目名字，然后进入到项目中。这时候项目中并没有安装项目所需要的依赖包，所以你要使用npm install进行依赖包的安装。 最后直接用npm run dev来看看项目是否可以跑起来。

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

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    -- 项目配置文件，包管理、项目名称、版本和命令

Vite对TypeScript、Css和JSON的支持

在Vite中使用TypeScript非常简单，只要在<script>标签中加入lang=ts就可以了。

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

支持CSS直接引入

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

import './assets/app.css'

支持JSON文件直接引入

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

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

{
    "name": "test",
    "url": "https://www.baidu.com"
}

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

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

Vite中SASS使用和JSX支持

安装SASS支持

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

npm install 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>

JSX的支持

直接在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')

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

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

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

Vite 配置文件设置别名

Vite的配置文件叫做vite.config.js,需要建在项目的根目录下。这里边的配置项还是非常多的，配置文件这东西，你看文档就应该能明白。

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

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

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

import HelloWorld from '/@/components/HelloWorld.vue'

修改了配置文件，需要重新启动项目，配置文件不支持热更新。