使用 Vite 构建 Vue 3项目

Vite是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。

• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

Vite 天然支持引入 .ts 文件

提示：vite仅支持vue3.0+的项目，也即是说我们无法在其中使用vue2.x

1.构建 Vue 3项目：

​

2.在vite项目中使用TypeScript

vite完全可以支持Typescript,不需要任何配置，只需要直接引入ts即可。

<script lang = "ts">
   const abc: number = 123456789;   //定义一个abc类型是数字，为什么这么定义可以去看一下Typescript的数据类型
   console.log(abc, "abc");
</script>

​

3.vite项目使用less sass scss

安装   less：npm install less less-loader -D

安装  sass：npm install sass node-sass sass-loader -D

 安装好之后在<style lang="less" scoped></style>标签上面直接就可以用

​

 4.vite打包

npm run build

​

4.通过vue-router来管理页面

​

​

安装路由：npm install vue-router@4（这里我是指定安装的版本）

在src文件夹下面建一个router的文件夹 里面放一个index.ts的路由文件，内容如下：

import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
    {
        path: '/',
        name: 'Home',
        //如果没有在.d.ts文件中定义，在这里引入路径时加后缀名.vue是会报错的
        component: () => import("../pages/home/index.vue"), 
        children: [
            {
                path: '/news',
                name: 'Hews',
                component: () => import("../pages/news/index.vue")
            }
        ]
    },

]
const router = createRouter({
    history: createWebHashHistory(),
    routes,
})
export default router;

App.vue文件内容如下:

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

<script>
import { defineComponent, onMounted } from "vue";
export default defineComponent({
  name: "App",
});
</script>

在src文件夹下面建一个后缀名为.d.ts的文件夹，内容如下：

declare module "*.vue" {
  import { ComponentOptions } from "vue";
  const componentOptions: ComponentOptions;
  export default componentOptions;
}
declare module "*.svg";
declare module "*.png";
declare module "*.jpg";
declare module "*.jpeg";
declare module "*.gif";
declare module "*.bmp";
declare module "*.tiff";
declare module "lodash";
declare module "@/api/*";

​

两个文件夹内容大致一样，在这里就只说一个home，

home文件夹下面的index.vue里的内容如下：

<template>
 <div>
     <h1>我是home页面</h1>
 </div>
</template>

<script lang="tsx"></script>
<style lang="less" src="./index.less" scoped></style>

 home文件夹下面的index.tsx里的内容如下：

import { defineComponent } from "vue";
export default defineComponent({
    name: "Home",
    
})