vite+vue3+element-plus项目的创建以及路由，vuex，sass预编译器的使用方法

1.执行npm init @vitejs/app创建项目

按照个人需求创建项目，创建完成之后执行以下npm install 。然后会出现下面这些项目结构目录

2.安装依赖

1. npm i @vitejs/plugin-vue 
2. npm install vue-router@4.0  // 路由
3. npm install vuex@4.0   // vuex
4. npm install sass node-sass sass-loader style-loader --save // sass

3.在src目录下创建router/index.vue文件

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

export default createRouter ({
    history: createWebHashHistory(),
    routes: [
        {
            path: '/',
            name: 'Home',
            title: '首页',
            component: () => import('@/views/home/index.vue')
        },
        {
            path: '/about',
            name: 'About',
            title: '关于我们',
            component: () => import('../views/about/index.vue')
        }
    ]
})

4. 在src目录下创建store/index.js文件

	import { createStore } from 'vuex'
	
	export default createStore({
	    state: {
	        name: ''
	    },
	    mutations: {
	        changeName (state, val) {
	            state.name = val
	        }
	    }
	})

5. 在main.js中注册路由以及vuex

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

// 引入路由
import router from './router/index'
// 引入全局状态管理
import store from './store/index'

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

6.修改Vite的配置文件

// 通过引入vue插件来完成对vue的支持,须在plugins中注册
import vue from '@vitejs/plugin-vue'
// 通过引入defineConfig来加入代码提示
import { defineConfig } from 'vite'
const { resolve } = require('path')
export default defineConfig({
  base: '',
  //1.别名配置
  resolve: {
    alias: [
      { find: '@', replacement: resolve(__dirname, 'src') },
    ],
  },
  //2.插件相关配置
  plugins: [vue()],
  //3.服务有关配置
  server: {
    open: true,
    /* 设置为0.0.0.0则所有的地址均能访问 */
    host: '0.0.0.0',
    port: 8080,
    https: false,
    proxy: {
      '/api': {
        /* 目标代理服务器地址 */
        target: 'http://test.rocksea.net.cn:9000/',
        /* 允许跨域 */
        changeOrigin: true,
      },
    },
  }
})

7.引入Element-plus并使用

执行npm install element-plus --save

在main.js中引入

在组件中使用