[JavaScript知识库]webpack 基础 - 16 （使用Vite搭建vue开发项目）

仅支持vue3.x，与Vue3不兼容的库也不能与Vite一起使用

创建项目：npm ?init ?vite-app ?xxx项目名称

安装包：npm??install ????

启动开发服务器：npm??run ?dev ??

1、使用ts

??????????<script lang="ts"></script>

????????可以直接使用json文件，自动转为js对象?

????????import xx from ‘xxx.json’

<script lang='ts'>
import data from "./assets/data.json";
const name: string = "薇薇";

export default {
  name: "App",
  mounted(){
    console.log(name);
    console.log(data);
  }
};
</script>

2、使用scss

? ? ? ? 安装sass包???npm ?install ?sass ?--save-dev

<style lang="scss" scoped>
    $color:red;
    h1{
       color:$color
    }
</style>

3、使用jsx

??????????建立jsx文件，在main.js中导入

function App(){
  return (
    <div>web前端o_o</div>
  )
}
export default App;

import { createApp } from 'vue'
import App from './App.jsx'


createApp(App).mount('#app')