Vite对TypeScript、CSS和JSON的支持

其实在Vite中使用TypeScript非常简单，只要在<script>标签中加入lang=ts就可以了。

<script lang="ts">
//....any
</script>

<script lang="ts">
import HelloWorld from './components/HelloWorld.vue'
const xpw:string = 'xpw.com'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  mounted(){
    console.log(xpw)
  }
}
</script>
//结果  console.log(xpw.com)

支持CSS直接引入

Vite是支持CSS直接引入的，也就是说我们在.vue文件中，可以直接使用import进行引入。比如下面这种形式。

assets下创建一个css文件

import './assets/app.css'
//样式为
body{
    background-color: red !important;
}

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
  <Addjsx/>
</template>

<script lang="ts">
import '/@/assets/app.css' //可以直接支持css
export default {
  name: 'App',
  components: {
  },
  data(){
    return{
      
    }
  },
}
</script>

看界面，样式变红了

image.png

JSON文件的引入

在assets里，新建一个xpw.json文件，然后写入一些代码，什么代码都可以，只要符合JSON格式就可以。我写的代码如下。

{
    "name":"小鹏王",
    "websit":"http://www.jspang.com/detailed?id=66#toc29"
}

然后直接使用import进行引入。

import data from './assets/jspang.json'
//....
export default {
  name: 'App',
  //...
  mounted(){
    console.log(data.name)
  }
}

这样就可以在浏览器的console里看到输出小鹏王，也证明你可以直接引入JSON，并当作数据进行使用。