npm init @vitejs/app

yarn create @vitejs/app

# npm 6.x
npm init @vitejs/app my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init @vitejs/app my-vue-app -- --template vue

# yarn
yarn create @vitejs/app my-vue-app --template vue

具体作用如下图

![1619197401930](assets/1619197401930.png)

- **配置服务器代理**

```ts
 export default defineConfig({

  plugins: [vue()],
  server:{  //代理
    proxy:{
      // 字符串简写写法
      '/foo': 'http://localhost:4567/foo',
      // 选项写法
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      // 正则表达式写法
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, '')
      }
    }
  }
})

 

 npm i @vitejs/plugin-vue-jsx //仅仅在单文件中使用 而不是.jsx
 
  vite.config.js //

import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
  plugins: [vue(),vueJsx()],
  resolve: {
    alias: {
      // 别名
      "@": path.resolve(__dirname, "src"),
      "comps": path.resolve(__dirname, "src/components"),
      "apis": path.resolve(__dirname, "src/apis"),
      "views": path.resolve(__dirname, "src/views"),
      "utils": path.resolve(__dirname, "src/utils"),
      "routes": path.resolve(__dirname, "src/routes"),
      "styles": path.resolve(__dirname, "src/styles"),
      "assets": path.resolve(__dirname, "src/assets"),
    }
  },
})

// comp.vue
<script lang="jsx">
  export default {
    render() {
      return <h1> hello</h1>
    }
  }
</script>

// or
<script lang="jsx">
  import {ref} from 'vue'

  export default {
    setup() {
      const counter = ref(0);
      const onclick = () => {
        counter.value++
      };
      return () => (
        <>
          <h1> hello</h1>
          <p onClick={onclick}>{counter.value}</p>
        </>
      )
    }

  }

yarn add mockjs  vite-plugin-mock -D
 //  vite.config.js 
import { viteMockServe } from 'vite-plugin-mock';
 
plugins: [
    vue(),
    vueJsx(),
    viteMockServe({
      supportTs: false    // 关闭ts
    })
  ],
// 目录结构
  -mock
    -getUser.js
  -src

//getUser.js
export default [
    {
        url: "/api/getUsers",
        method: 'get',
        response: ({ body }) => {
            console.log('body', body);
            return {
                code: 0,
                message: 'ok',
                data: ['tom', 'jerry']
            }
        }
    }
]

// xx.vue

<template>
  <div>
    <button @click="getApi">click</button>
  </div>
</template>

<script setup>
const getApi = () => {
  fetch("/api/getUsers")
    .then((res) => res.json())
    .then((data) => console.log(data));
};
</script>

npm install vue-router@4  vuex@next -S

vue-router4 配置

// router index.js

import {createRouter, createWebHashHistory} from "vue-router";
const routes = [
    {path: '/', component:  () => import('../view/home.vue')},
]
const router = createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: createWebHashHistory(),
    routes, // `routes: routes` 的缩写
})

export default router

//app.vue
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
<!--  <HelloWorld msg="Hello Vue 3 + Vite" />-->
  <router-view></router-view>
</template>


//main.js
import router from "./router";


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



vuex4 配置
 
//store index.js
import {createStore} from "vuex";

export  default createStore({
        state: {
            counter: 0
        },
        mutations:{
            add(state){
                state.counter++
            }
        }
    }
)
//main.js
import store from './store'
createApp(App).use(router).use(store).mount('#app')
//xx.vue
 <h1 @click="$store.commit('add')">{{$store.state.counter}}</h1>

npm  i sass -D

// main.js 
import './styles/index.scss'
// index.scss 可以支持各种变量引入

npm i axios -S

直接封装就可以使用。