详解vite2.0配置学习(typescript版本)

介绍

尤于溪的原话。

  • vite与 Vue CLI 类似，vite 也是一个提供基本项目脚手架和开发服务器的构建工具。
  • vite基于浏览器原生ES imports的开发服务器。跳过打包这个概念，服务端按需编译返回。
  • vite速度比webpack快10+倍，支持热跟新， 但是出于处于测试阶段。
  • 配置文件也支持热跟新！！！

创建

执行npm init @vitejs/app ，我这里选择的是vue-ts

版本

"vite": "^2.0.0-beta.48"

alias别名

vite.config.ts

const path = require('path')
 alias: {
  "@": path.resolve(__dirname, "src"),
  "@c": path.resolve(__dirname, "src/components")
 },

环境变量配置

1、在根目录创建

2、只有前缀为的变量VITE_才对Vite处理的代码公开。一以下为.env.production文件，其它类似。
shell     # 开发环境     VITE_APP_ENV = 'development'     # api 地址     VITE_APP_PATH = 'dev/...'

3、启动文件package.json,在命令后面加上--mode test就好了，这个跟vue2一样

"dev:test": "vite --mode test",

4、使用,跟vue2有些区别，在vite.config.ts内读取不到，其它文件可以拿到

import.meta.env

输出为：

添加vue-router（vue3使用4.0+版本）

1、安装

npm i vue-router@4.0.2 --save,安装4.0版本

2、index.ts

import {createRouter, createWebHashHistory, RouteRecordRaw} from 'vue-router'
// @ts-ignore
const test = () => import('../views/test1.vue')
const routes: Array<RouteRecordRaw> = [
  {path: "/", redirect: "/test1"},
  {
    path: "/test1",
    name: 'test1',
    component: test,
  }
]
const router = createRouter({
  history: createWebHashHistory(),
  routes: routes
})

export default router

3、 main.ts

import router from "./router"
createApp(App)
  .use(router)
  .mount('#app')

添加vuex(版本同样要4以上)

1、安装

npm i vuex@index -D

2、store/index.ts

import { createStore } from 'vuex'

export default createStore({
 state: {
 },
 //...
})

3、main.ts

import store from './store'

createApp(App)
  .use(store)
  .mount('#app')

scss环境

1、安装npm i sass -D，可以直接使用sass语法了
2、vite.config.ts,全局引入scss文件

css: {
  preprocessorOptions: {
   scss: {
    additionalData: `@import "./src/assets/scss/global.scss";`//你的scss文件路径
   }
  }
 },

到此这篇关于详解vite2.0配置学习(typescript版本)的文章就介绍到这了,更多相关vite2.0配置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解Vite的新体验

    详解Vite的新体验

    什么是Vite?(是前端新玩具) Vite是一个web开发构建工具,它通过本机 ES 模块导入在开发过程中更新代码,达到快速更新的目的. 特点 超快的冷服务器启动 即时的模块更新 真正的按需编译 更小的打包体积 开始使用 Vue用户注意:Vite当前仅适用于Vue3.x.这也意味着您不能使用尚未与Vue 3兼容的库. 安装 npm init vite-app <项目名称> cd <项目名称> npm install npm run dev ## 执行完以上命令,就意味着你的vue3

  • 用vite搭建vue3应用的实现方法

    一,安装 提示: VUE3.0目前还没有官方的翻译文档.但是已经有人翻译了.得到了尤雨溪大佬的点赞,这里附上网址https://v3.cn.vuejs.org/ 1.安装 cli 因为要使用 vue3 必须要求 cli 的版本比较高,必须要高于 4.5.X 所以没有安装的 cli 的就直接安装最新版就行了,已有的可以升级或者卸载后重新安装 最好是全局安装 //全局安装 npm install -g @vue/cli # OR yarn global add @vue/cli //全局卸载 npm

  • 详解Vue3.0 + TypeScript + Vite初体验

    详解Vue3.0 + TypeScript + Vite初体验

    项目创建 npm: $ npm init vite-app <project-name> $ cd <project-name> $ npm install $ npm run dev or yarn: $ yarn create vite-app <project-name> $ cd <project-name> $ yarn $ yarn dev 项目结构 main.js 在个人想法上,我觉得createApp()是vue应用的实例,createApp

  • 详解vite+ts快速搭建vue3项目以及介绍相关特性

    vite 尤大在 Vue 3.0 beta 直播中推荐了 vite 的工具,强调:针对Vue单页面组件的无打包开发服务器,可以直接在浏览器运行请求的 vue 文件 很新颖,这篇博客用它来搭建一个 vue3 的项目试试 Vite 是面向现代浏览器,基于原生模块系统 ESModule 实现了按需编译的 Web 开发构建工具.在生产环境下基于 Rollup 打包 快速冷启动服务器 即时热模块更换(HMR) 真正的按需编译 node >= 10.16.0 搭建 使用 vite 搭建项目 npm init

  • Vite和Vue CLI的优劣

    Vue 生态系统中有一个名为 Vite 的新构建工具,它的开发服务器比 Vue CLI 快 10-100 倍. 这是否意味着 Vue CLI 已经过时了?在本文中,我将比较这两种构建工具,并说明它们的优缺点,以便你可以决定哪一种适合你的下一个项目. Vue CLI 概述 大多数 Vue 开发人员都知道,Vue CLI 是使用标准构建工具和最佳实践配置快速建立基于 Vue 的项目的不可或缺的工具. 其主要功能包括: 工程脚手架 带热模块重载的开发服务器 插件系统 用户界面 在本讨论中需要注意的是,

  • 详解vite2.0配置学习(typescript版本)

    详解vite2.0配置学习(typescript版本)

    介绍 尤于溪的原话. vite与 Vue CLI 类似,vite 也是一个提供基本项目脚手架和开发服务器的构建工具. vite基于浏览器原生ES imports的开发服务器.跳过打包这个概念,服务端按需编译返回. vite速度比webpack快10+倍,支持热跟新, 但是出于处于测试阶段. 配置文件也支持热跟新!!! 创建 执行npm init @vitejs/app ,我这里选择的是vue-ts 版本 "vite": "^2.0.0-beta.48" alias别

  • 详解Vue2.0配置mint-ui踩过的那些坑

    最近开发项目的时候逐渐采用vue.js+mint-ui的技术栈,但是昨天开始配置开发环境的时候,遇到了各种报错,即使是按照两家的官方文档配置,也还是会报错,晚上下班后回去配置了一晚上,才终于把它配置好,所以就记录下来,以防后面再次踩坑.. vue.js介绍 Vue.js 是一个用于创建 web 交互界面的.其特点是 简洁 HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单. 数据驱动 自动追踪依赖的模板表达式和计算属性. 组件化 用解耦.可复用的组件来构造界面. 轻量 ~2

  • 详解Vue3.0 前的 TypeScript 最佳入门实践

    详解Vue3.0 前的 TypeScript 最佳入门实践

    前言 我个人对更严格类型限制没有积极的看法,毕竟各类转类型的骚写法写习惯了. 然鹅最近的一个项目中,是 TypeScript + Vue ,毛计喇,学之...-真香! 注意此篇标题的"前",本文旨在讲Ts混入框架的使用,不讲Class API 1. 使用官方脚手架构建 npm install -g @vue/cli # OR yarn global add @vue/cli 新的 Vue CLI 工具允许开发者 使用 TypeScript 集成环境 创建新项目. 只需运行 vue cr

  • 详解springboot-修改内置tomcat版本

    详解springboot-修改内置tomcat版本 1.解析Spring Boot父级依赖 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.5.6.RELEASE</version> </parent> 这块配置就是Spring

  • 详解vue3.0 diff算法的使用(超详细)

    前言:随之vue3.0beta版本的发布,vue3.0正式版本相信不久就会与我们相遇.尤玉溪在直播中也说了vue3.0的新特性typescript强烈支持,proxy响应式原理,重新虚拟dom,优化diff算法性能提升等等.小编在这里仔细研究了vue3.0beta版本diff算法的源码,并希望把其中的细节和奥妙和大家一起分享. 首先我们来思考一些大中厂面试中,很容易问到的问题: 1 什么时候用到diff算法,diff算法作用域在哪里? 2 diff算法是怎么运作的,到底有什么作用? 3 在v-f

  • 详解SpringBoot简化配置分析总结

    在SpringBoot启动类中,该主类被@SpringBootApplication所修饰,跟踪该注解类,除元注解外,该注解类被如下自定注解修饰. @SpringBootConfiguration @EnableAutoConfiguration @ComponentScan 让我们简单叙述下它们各自的功能: @ComponentScan:扫描需要被IoC容器管理下需要管理的Bean,默认当前根目录下的 @EnableAutoConfiguration:装载所有第三方的Bean @SpringB

  • 详解Ubuntu18.04配置VSCode+CMake的C++开发环境

    详解Ubuntu18.04配置VSCode+CMake的C++开发环境

    首先,介绍自己电脑:Ubuntu18.04.VS Code 1.46版 本文目的:为VS Code配置好C++ 开发环境,以及VS Code +CMake的配置 对于C++ 工程,有四个必要的json配置文件,先ctrl+shift+p打开输入指令分别是: c_cpp_properties.json :配置项目结构,自动生成和更新,输入C/C++:Edit configuration task.json: 构建和编译运行项目,输入Task:Configure Task,模板,Others lau

  • Java详解swagger2如何配置使用

    目录 1.引入jar包 2.启用swagger application.properties 3.配置文件 swagger可能会遇到的问题: 当我们的接口返回的数据太大的时候,swagger会崩溃 1.引入jar包 <!--接口文档--> <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger2</artifactId> <versio

  • 详解git中配置的.gitignore不生效的解决办法

    详解git中配置的.gitignore不生效的解决办法 前言: 通常我们希望放进仓库的代码保持纯净,即不要包含项目开发工具生成的文件,或者项目编译后的临时文件.但是,当我们使用git status查看工作区状态的时候,总会提示一些文件未被track.于是,我们想让git帮助我们忽略这些文件,不再提醒. 庆幸的是,git已经考虑到这点了.我们可以在项目的根目录下建立一个.gitignore的文件,该文件用来配置哪些文件或者目录不被track的.规则很简单,就在该文件中,写下你不想被track的文件

随机推荐