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


Posted in Javascript onFebruary 25, 2021

介绍

尤于溪的原话。

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

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

创建

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

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

版本

"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、在根目录创建

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

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

输出为:

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

添加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配置内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
Javascript 加载和执行-性能提高篇
Dec 28 Javascript
javascript数组遍历for与for in区别详解
Dec 04 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
Jul 04 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
vue项目中mock.js的使用及基本用法
May 22 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 #Vue.js
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
Feb 24 #Javascript
Nest.js散列与加密实例详解
Feb 24 #Javascript
JS canvas实现画板和签字板功能
Feb 23 #Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 #Vue.js
js实现验证码干扰(动态)
Feb 23 #Javascript
js实现验证码干扰(静态)
Feb 22 #Javascript
You might like
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
页面版文本框智能提示JS代码
2009/11/20 Javascript
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
基于vue展开收起动画的示例代码
2018/07/05 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
python写的一个文本编辑器
2014/01/23 Python
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
python定时器(Timer)用法简单实例
2015/06/04 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
FILA斐乐中国官方商城:意大利运动品牌
2017/01/25 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
学校十一活动方案
2014/02/01 职场文书
工程管理英文求职信
2014/03/18 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
售后客服工作职责
2014/06/16 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
开业典礼致辞
2015/07/29 职场文书
mysql联合索引的使用规则
2021/06/23 MySQL
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技