使用vite搭建vue3.0项目

一、安装vite搭建架子
vite中文文档：https://cn.vitejs.dev/guide/
vue3中文文档：https://vue3js.cn/docs/zh/guide/introduction.html
1、搭建项目： npm init vite-app 项目名称
2、 进入项目： cd 项目名称
3、安装依赖： npm install
4、启动项目： npm run dev
这是安装完依赖后的项目结构

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

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
简单配置一下，具体的还是看文档

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文件

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

module.exports = ({ command,mode }) => {
// 判断是生产环境还是开发环境
 const VITE_APP_IS_SERVE = command === 'serve' ? true : false;

  return {
    plugins: [vue()],
    // 支持别名
    resolve:{
      alias: {
        '/@': path.resolve(__dirname, 'src'),
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          // TODO css变量暂时使用scss，后期会改成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"，项目许可证，让使用者知道是如何被允许使用此项目