vite的搭建与使用的详细步骤

 更新时间:2022年06月26日 10:59:59   作者:小付-小付  
本文主要介绍了vite的搭建与使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

实际开发中编写的代码往往是不能被浏览器直接识别的,比如ES6,TypeScript,Vue文件等。所以此时我们必须通过构建工具来对代码进行转换,编译,类似的工具有webpack,rollup,parcel.但是随着项目越来越大,需要处理的javascript呈指数级增长,模块越来越多。构建工具需要很长时间才能开启服务器,HMR也需要几秒钟才能在浏览器反应过来。所以出现了vite。

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

1.安装:

npm init vite-app     //项目名字
cd 项目名字           //进入项目
npm i                //安装依赖
npm run dev         //打开项目

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

5.下面就来创建一个标准的项目

安装路由: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",
    
})

到此这篇关于vite的搭建与使用的详细步骤的文章就介绍到这了,更多相关vite搭建与使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 在vue3中安装使用bootstrap过程

    在vue3中安装使用bootstrap过程

    这篇文章主要介绍了在vue3中安装使用bootstrap过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue实现单点登录控件的完整代码

    Vue实现单点登录控件的完整代码

    这里提供一个Vue单点登录的demo给大家参考,对Vue实现单点登录控件的完整代码感兴趣的朋友跟随小编一起看看吧
    2021-11-11
  • <el-button>点击后如何跳转指定url链接

    <el-button>点击后如何跳转指定url链接

    这篇文章主要介绍了<el-button>点击后如何跳转指定url链接问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue element-UI el-select循环选中的问题

    Vue element-UI el-select循环选中的问题

    这篇文章主要介绍了Vue element-UI el-select循环选中的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue获取当前日期时间(使用moment和new Date())

    vue获取当前日期时间(使用moment和new Date())

    在项目开发中我遇到了日期范围选择器,两种获取当前日期并做处理的写法,这里记录一下,下面这篇文章主要给大家介绍了关于vue获取当前日期时间(使用moment和new Date())的相关资料,需要的朋友可以参考下
    2023-06-06
  • Vue利用draggable实现多选拖拽效果

    Vue利用draggable实现多选拖拽效果

    这篇文章主要为大家详细介绍了如何利用vue中的draggable插件实现多选拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • vue中跨域以及sessionId不一致问题及解决

    vue中跨域以及sessionId不一致问题及解决

    这篇文章主要介绍了vue中跨域以及sessionId不一致问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • Vue-Element-Admin前端接入SSO的方法步骤

    Vue-Element-Admin前端接入SSO的方法步骤

    本文主要介绍了Vue-Element-Admin前端接入SSO的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • 浅析webpack-bundle-analyzer在vue-cli3中的使用

    浅析webpack-bundle-analyzer在vue-cli3中的使用

    这篇文章主要介绍了webpack-bundle-analyzer在vue-cli3中的使用,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • vue-admin-box第一步npm install时报错的处理

    vue-admin-box第一步npm install时报错的处理

    这篇文章主要介绍了vue-admin-box第一步npm install时报错的处理方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10

最新评论