一、安裝vite搭建架子
vite中文文檔：https://cn.vitejs.dev/guide/
vue3中文文檔：https://vue3js.cn/docs/zh/guide/introduction.html
1、搭建項(xiàng)目： npm init vite-app 項(xiàng)目名稱
2、 進(jìn)入項(xiàng)目： cd 項(xiàng)目名稱
3、安裝依賴： npm install
4、啟動(dòng)項(xiàng)目： npm run dev
這是安裝完依賴后的項(xiàng)目結(jié)構(gòu)

image.png

二、安裝vue全家桶
1、安裝router
npm install vue-router@4
（1）在src目錄下新建router文件夾，然后在里面新建index.js文件

image.png

index.js

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
      {
          path: '/',
          redirect: '/index'
      },
      {
          path: '/index',
          name: 'index',
          component: () => import('../views/index.vue')
      },
    ]
})

export default router

（2）在src目錄下新建views文件夾，然后在里面新建index.vue文件

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

<script>
import HelloWorld from '../components/HelloWorld.vue'

export default {
  name: 'Index',
  components: {
    HelloWorld
  }
}

（3）修改App.vue

<template>
  <a-config-provider>
    <router-view />
  </a-config-provider>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

（4）將router引入到main.js

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router'

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

2、安裝vuex
npm install vuex@next --save
（1）在src文件下新建store文件夾，然后分別新建index.js，state.js，getters.js，actions.js，mutations.js文件夾

state.js

export default {
  user: ''
}

mutations.js

export default {
  CHANGE_USER(state,user) {
    state.user = user;
  }
}

getters.js

export const user = state => state.user

actions.js

export default {
  changeUser(store) {
    store.commit('CHANGE_USER','')
  }
}

index.js

import { createStore } from 'vuex'
import state from './state'
import actions from './actions'
import mutations from './mutations'

export default createStore({
  state,
  mutations,
  actions,
  modules: {}
})

（2）將vuex引入到main.js
簡(jiǎn)單配置一下，具體的還是看文檔

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router'
import store from './store'

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

三、配置vite.config.js
1、在根目錄下新建vite.config.js文件

image.png

const path = require('path');
const fs = require('fs')
const vue = require('@vitejs/plugin-vue')

module.exports = ({ command,mode }) => {
// 判斷是生產(chǎn)環(huán)境還是開發(fā)環(huán)境
 const VITE_APP_IS_SERVE = command === 'serve' ? true : false;

  return {
    plugins: [vue()],
    // 支持別名
    resolve:{
      alias: {
        '/@': path.resolve(__dirname, 'src'),
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          // TODO css變量暫時(shí)使用scss，后期會(huì)改成css3變量
          additionalData: content => {
            // content = content.replace(/\/@\/assets/g,'/src/assets')
            return `
            $--color-blue: #1890ff;
            $--color-red: #FF4D4F;
            $--vab-margin: 24px;
            $--vab-padding: 24px;
            $--vab-header-height: 48px;
          ${content}`
          },
        },
      },
    },
    define: {
      VITE_APP_IS_SERVE,
    },
    server: {
      open: false, // https://vitejs.dev/config/#server-open
      proxy: {
        // https://vitejs.dev/config/#server-proxy
        [VITE_APP_BASE_API]: {
          target: VITE_APP_BUILD_BASE_API,
          changeOrigin: true,
          rewrite: path => path.replace(new RegExp(`^${VITE_APP_BASE_API}`), ''),
        },
        [VITE_APP_FILE_SERVICE_API]: {
          target: VITE_APP_BUILD_FILE_SERVICE_API,
          changeOrigin: true,
          rewrite: path => path.replace(new RegExp(`^${VITE_APP_FILE_SERVICE_API}`), ''),
        },
      },
    },
    build:{
      terserOptions:{
        compress:{
          drop_console: true
        }
      },
    }
  }
}

四、踩坑
1、package.json: No license field
在package.json中添加 "license": "MIT"，項(xiàng)目許可證，讓使用者知道是如何被允許使用此項(xiàng)目