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

目录
  • 1.安装：
  • 2.在vite项目中使用TypeScript
  • 3.vite项目使用less sass scss
  • 4.vite打包
  • 5.下面就来创建一个标准的项目

实际开发中编写的代码往往是不能被浏览器直接识别的，比如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搭建与使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 基于Vite2.x的Vue 3.x项目的搭建实现

    创建 Vue 3.x 项目 npm init @vitejs/app my-vue-app --template 引入 Router 4.x npm install vue-router@4 --save 配置路由 在更目录中添加一个 router 的文件夹,新建 index.js Router 4.x 为我们提供了 createRouter 代替了 Router 3.x 中的 new VueRouter,用于创建路由. // Router 4.x import { createRouter,

  • vite+vue3.0+ts+element-plus快速搭建项目的实现

    vite+vue3.0+ts+element-plus快速搭建项目的实现

    vite 出了 2.x 版本,抱着学一学的心态决定出个简单的项目,结合 element-plus,以及将会成为每位前端必会的 typescript,实现了如下内容. vite是一个由原生 ESM 驱动的 Web 开发构建工具.在开发环境下基于浏览器原生 ES imports 开发,在生产环境下基于 Rollup 打包. vite 作用 快速的冷启动:不需要等待打包操作: 即时的热模块更新:替换性能和模块数量的解耦让更新飞起: 真正的按需编译:不再等待整个应用编译完成,这是一个巨大的改变. 使用的

  • 一个基于vue3+ts+vite项目搭建初探

    一个基于vue3+ts+vite项目搭建初探

    目录 前言 环境准备 使用Vite快捷搭建 使用npm 使用yarn 安装依赖 启动项目 修改vite配置文件 找到根目录vite.config.ts文件打开 集成路由 集成Vuex 添加element ui 集成axios 集成Sass Vue3 使用 总结 前言 基于Vue3已经成为默认版本,目前的项目暂时还没有使用过vue3开发和最近有一个全新的新项目的基础下,使用vue3开发项目,必然是未来的一个趋势 下面记录一下怎么使用Vue3 + ts + vite 从0开始搭建一个项目 环境准备

  • Vite + React从零开始搭建一个开源组件库

    目录 前言 目标 搭建开发环境

  • 使用vue3.x+vite+element-ui+vue-router+vuex+axios搭建项目

    使用vue3.x+vite+element-ui+vue-router+vuex+axios搭建项目

    目录 一. 参考文档 二. vite搭建项目 三. 配置element-ui 四. 配置vue-router 五. 配置vuex 安装 六. 配置axios 七. 总结 一. 参考文档 vite官方文档 vue3.x官方文档 vue-router4.x官方文档 vuex4.x官方文档 element-ui3.x官方文档 Ant Design Vue2.x官方文档 axios文档 二. vite搭建项目 安装 # npm 安装 npm init vite@latest # yarn 安装 yarn

  • Vite搭建React项目的方法步骤

    Vite搭建React项目的方法步骤

    前言 日常放鸽,火钳刘明 这是一个基于 vite 搭建的 React 的项目,开发体验非常棒. 创建一个 Vite 项目 yarn create @vitejs/app 如上图,选择了 react-ts 预设模板,如果出现下图一样的工程 yarn // 安装依赖 yarn dev // 启动开发环境 打开浏览器输入http://localhost:3000/#/,如上图所示的话.那么恭喜你,你可以正常开发 React 项目了.完结撒花 如果不行的话,直接看 vite 官网,它比我写的详细 改造工

  • 从零搭建一个vite+vue3+ts规范基础项目(搭建过程问题小结)

    从零搭建一个vite+vue3+ts规范基础项目(搭建过程问题小结)

    目录 项目初始化 安装router和pinia 安装ESlint eslint的vue规则需要切换 安装prettier 安装stylelint 安装husky 安装commitlint 总结 参考: 最近时间总算是闲了下来,准备着手搭建一个基础模板,为后面新项目准备的,搭建过程中遇到不少问题,现在总结下来给大家使用. 项目初始化 本项目已vite开始,所以按照vite官方的命令开始.这里使用的命令行的方式来搭建基础项目: yarn create vite my-vue-app --templa

  • Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现

    Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现

    目录 写在前面 创建Vue3项目 开发规范 Vite配置 别名配置 环境变量 .env文件 定义环境变量 在vite.config.ts中获取环境变量 自动导入 NaiveUI的安装 写在最后 写在前面 现在已经有很多项目团队使用Vue3+TS进行开发,同时也就意味着Vue3的生态越来越完善,如果还是停留在Vue2的阶段已经out了,这篇文章将会使用Vue3+TS+NaivaUI搭建一个简单的项目骨架. 创建Vue3项目 首先我们通过Vite来创建一个Vue3+TS的一个项目,打开终端,找到我们

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

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

    目录 1.安装: 2.在vite项目中使用TypeScript 3.vite项目使用less sass scss 4.vite打包 5.下面就来创建一个标准的项目 实际开发中编写的代码往往是不能被浏览器直接识别的,比如ES6,TypeScript,Vue文件等.所以此时我们必须通过构建工具来对代码进行转换,编译,类似的工具有webpack,rollup,parcel.但是随着项目越来越大,需要处理的javascript呈指数级增长,模块越来越多.构建工具需要很长时间才能开启服务器,HMR也需要几

  • Windows下搭建python开发环境详细步骤

    Windows下搭建python开发环境详细步骤

    本文为大家分享了Windows下搭建python开发环境详细步骤,供大家参考,具体内容如下 1.搭建Java环境 (1)直接从官网下载相应版本的JDK或者JRE并点击安装就可以 (2)JDK与JRE的区别: 1)JDK就是Java Development Kit.简单的说JDK是面向开发人员使用的SDK,它提供了Java的开发环境和运行环境.SDK是Software Development Kit 一般指软件开发包,可以包括函数库.编译程序等 2)JRE是Java Runtime Envirom

  • 标准版Eclipse搭建PHP环境的详细步骤

    标准版Eclipse搭建PHP环境的详细步骤

    一.下载Eclipse的PHP插件 百度搜索phpeclipse,看到某条结果是带有SourceForge.net字样的,点进去,找到Download按钮,点击之后,等待5秒就会开始下载了. 二.安装Eclipse的PHP插件 插件下载完成之后,解压,然后把site.xml删掉(大部分插件不用删这个文件,但是PHPEclipse必须删),最后把整个文件夹复制到Eclipse的dropins文件夹里面,重启Eclipse即可. 三.在Eclipse新建PHP工程和新建PHP文件 在插件安装成功的前

  • Centos7.9搭建自主邮件服务器详细步骤

    Centos7.9搭建自主邮件服务器详细步骤

    目录 前言 一 配置内网dns A记录和MX记录 二 mail服务器初始化配置 1. 修改主机名 2. 关闭防火墙与selinux 3. 开启时间同步 4. 安装软件 三 修改配置文件 1 配置postfix 2 配置dovecot 2.1 配置监听协议: 2.2 配置登录方式: 2.3 配置邮件存储位置: 2.4 配置ssl(关闭): 3 配置sasl2 3.1 配置系统认证: 3.2 配置登录方式: 4 启动服务: 5 创建用户并设置pass 6 配置mailx: 四 发送邮件测试 1 命令

  • 最新window server 2012搭建FTP服务的详细步骤

    最新window server 2012搭建FTP服务的详细步骤

    目录 基本概念介绍 FTP文件传输协议 一.安装FTP服务 1.打开服务器管理器 2.默认配置 3.弹出的窗口点击“添加功能”,继续下一步. 4.功能列表中选择“ISS可承载web核心”.下一步. 5.角色服务中勾选FTP服务,如果管理工具中IIS项也最好勾选上,如图. 6.点击安装,等待安装完成. 二.配置ftp服务 7.回到“服务器管理器”,从工具栏选择IIS管理器. 8.在IIS管理器中,右击“网站”,选择“添加FTP站点”. 9.站名随便写,并选择一个物理地址. 10.按图配置,选择无S

  • eclipse搭建android开发环境详细步骤

    eclipse搭建android开发环境详细步骤

    搭建android应用的开发环境,一套程序下来也是相当繁琐的,这里我整理下一整套详细流程: 1,下载JDK 去oracle官网下载最新版本的jdk,官网地址 http://www.oracle.com,附下载链接:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html. 根据自己的操作系统选择对应jdk下载,选第一个不带demo的,比如64位window系统选择Windows x64:

  • 最新Windows Server 2012 搭建DNS服务器的详细步骤

    最新Windows Server 2012 搭建DNS服务器的详细步骤

    目录 一.添加DNS服务 二.配置DNS服务 三.测试 为了实现负载均衡,扩展服务器带宽,需要自己配置DNS服务器解析对应域名. 本文记录Windows Server 2012配置DNS服务的方法. 假设域名www.mydomain.com 已在阿里云作了解析,现在需要新增一个二级域名 stream.mydomain.com 做推流服务,需要使用自己配置的DNS服务做请求解析分发. Windows Server 配置 DNS服务器的步骤如下 一.添加DNS服务 打开服务器管理器,选择“添加角色和

  • 使用vue3搭建后台系统的详细步骤

    使用vue3搭建后台系统的详细步骤

    目录 一.配置vite 二.router路由 1.安装router路由 2.配置router路由 3.注册router路由 4.使用router路由 三.安装element plus等其他依赖 1.注册element plus并配置图标 四.pinia使用 1.安装pinia 2.注册pinia 3.配置pinia 4.测试pinia 五.layout布局 六.菜单栏logo 七.路由和页面联动 1.路由和页面联动的注意细节 首先使用npm 或者yarn创建一个vue项目 // 使用npm创建一

  • 在CentOS搭建Git服务器的详细步骤

    前言 我们可以GitHub发布一些开源代码的公共仓库,但对于私密仓库就需要收费了.公司内部通常会搭建自己的Git服务器,我也通过在自己的服务器上搭建练习一下. 开始前先说一下服务器信息,这里是阿里云的CentOS 6.5 64位操作系统. 一 确认服务器是否安装Git [root@iZ25r8k6ifuZ git]# rpm -qa git git-1.7.1-3.el6_4.1.x86_64 这里也已经安装过了,如果没有安装可以用yum install git 安装. 二 创建git用户 这里

  • IDEA基于支付宝小程序搭建springboot项目的详细步骤

    IDEA基于支付宝小程序搭建springboot项目的详细步骤

    服务端 在平台上创建springboot小程序应用 创建小程序 登录蚂蚁金服开放平台,扫码登录填写信息后,点击支付宝小程序,选择立即接入 > 同意个人公测 > 开始创建 . 填写好小程序基本信息后,点击创建按钮,创建名为xxx小程序. PS:一个账号下最多可以创建10个小程序:未提交过审核的小程序可以删除,删除的小程序不在计数范围. 创建云应用后端服务 在小程序页面选择刚创建的小程序,点击查看,进入开发者页面. 在左侧导航栏选择云服务(免费),点击创建云服务,选择创建云应用,技术栈选Sprin

随机推荐