详解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 相关文章推荐
js Form.elements[i]的使用实例
Nov 13 Javascript
javascript实现获取服务器时间
May 19 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
javascript封装简单实现方法
Aug 11 Javascript
jquery实现删除一个元素后面的所有元素功能
Dec 21 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
vue ajax 拦截原理与实现方法示例
Nov 29 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 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时间不正确的解决方法
2008/04/09 PHP
zend framework配置操作数据库实例分析
2012/12/06 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
python 批量修改/替换数据的实例
2018/07/25 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
CSS3 @media的基本用法总结
2019/09/10 HTML / CSS
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
剪彩仪式主持词
2014/03/19 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
2015年校长新年寄语
2014/12/08 职场文书
大学教师个人总结
2015/02/10 职场文书
给朋友的赠语
2015/06/23 职场文书