详解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 相关文章推荐
Jquery post传递数组方法实现思路及代码
Apr 28 Javascript
JavaScript实现GriwView单列全选(自写代码)
May 13 Javascript
Javascript动画效果(2)
Oct 11 Javascript
Bootstrap源码解读表单(2)
Dec 22 Javascript
使用Vue写一个datepicker的示例
Jan 27 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
vue删除html内容的标签样式实例
Sep 13 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
JS浏览器BOM常见操作实例详解
Apr 27 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 09 Javascript
canvas多重阴影发光效果实现
Apr 20 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
ThinkPHP 404页面的设置方法
2015/01/14 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
Jquery常用技巧收集整理篇
2010/11/14 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
python使用udp实现聊天器功能
2018/12/10 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
Python如何调用外部系统命令
2019/08/07 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
Python命名空间namespace及作用域原理解析
2020/06/05 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
Python try except else使用详解
2021/01/12 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
大一新生军训时的自我评价分享
2013/12/05 职场文书
保安自我鉴定范文
2013/12/08 职场文书
优质服务口号
2014/06/11 职场文书
医院员工辞职信范文
2015/05/12 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书