详解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 相关文章推荐
javascript英文日期(有时间)选择器
May 02 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
浅谈vue2 单页面如何设置网页title
Nov 08 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 Javascript
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 07 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
无线电的诞生过程
2021/03/01 无线电
php,ajax实现分页
2008/03/27 PHP
PHP 上传文件的方法(类)
2009/07/30 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
PHP仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
2019/08/02 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
从零学Python之hello world
2014/05/21 Python
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
Python threading的使用方法解析
2019/08/28 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
Python操作Jira库常用方法解析
2020/04/10 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
欧洲最大的婴幼儿服装及内衣公司:Petit Bateau(小帆船)
2016/08/16 全球购物
如何进行Linux分区优化
2013/02/12 面试题
护理学专业推荐信
2013/12/03 职场文书
运动会广播稿100字
2014/09/14 职场文书
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL