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')