当你想独立创建一个vue项目的时候，并且无从下手的情况下，那么这么项目可以很好的解决此问题，里面包含了基本的工程目录，按文件夹分类并且提高效率。

那么开始创建我们的项目吧！
我们使用vite来创建，创建项目速度比较快

npm install -g create-vite-app //安装全局create-vite-app
create-vite-app vue3-vite   //使用工具create-vite-app创建项目名为vue3-vite的vue3项目
cd vue3-vite             //进入项目文件夹
npm install                 //初始化项目
npm run dev                 //运行项目

此时只是一个 vue3项目 ，如果需要其他自行下载并配置，此时的项目没有灵魂,我们需要配置一些东西


接下来我们需要下载组件

1. 安装vue-router

yarn add vue-router@4.0.0-beta.6

2. 配置vue-router
   在项目src目录下面新建router目录，然后添加index.js文件，添加以下内容

import { createRouter, createWebHashHistory } from "vue-router";
import Home from '../views/Home.vue'

/* async */
export const constantRouterMap = [
  { path: '/:catchAll(.*)', redirect: '/404' },
  {
    path: '/404', name: 'error404',
    meta: {
      title: 'Error 404'
    },
    component: () => import( /* webpackChunkName: "error404" */ "../views/errorPage/404.vue")
  },
]

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
    children:[
      {
        path: "/Index",
        name: "index",
        component: () => import('../views/Index.vue')
      },
    ]
  },

  ...constantRouterMap
]
const router = createRouter({
  history: createWebHashHistory(),
  routes
});
export default router;
//在main.js中进行引入，并进行挂载注册到全局上

路由的基本使用规则 我们可以测试是否跳转路由，vue路由的教程

接下来我们继续安装vuex

       yarn add vuex@4.0.0-beta.4
       //或者
       yarn add vuex@next

配置vuex
在项目src目录下面新建store目录，并添加index.ts文件，添加以下内容

安装axios

yarn add axios

配置axios

import { createStore } from 'vuex'

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

配置好文件之后，如果你想要学习使用vuex 这里有教程 vuex的使用教程

如果想使用接口的话 我们继续安装 axios

yard add axios

我们需要完整版胚子axios 方面项目以各个界面调用接口很方便，模块化开发的好处，
我们需要在这三个地方配置一下请求和调用接口

首先是 config,js 这个配置为了后期直接写接口，不用为接口切换而烦恼

window.configs={
  'baseApi':"xxx",
}

接下来是 request.js , 全局处理 请求响应和请求拦截问题

import axios from 'axios'

const service = axios.create({
  baseURL: window.configs.baseApi,
  timeout: 5000 * 60
});
service.interceptors.request.use(
  config => {
    config.headers['chainType'] = getChainType();

    config.headers['address'] = localStorage.getItem('connected_account');
    return config;
  },
  error => {
    return Promise.reject();
  }
);

service.interceptors.response.use(
  response => {
    if (response.status === 200) {
      let { data } = response;
      if (data.code === 500) {
       
      }
      return response.data;
    } else {
      Promise.reject();
    }
  },
  error => {
    if (error.code == 4001) {
    
    }
    return Promise.reject();
  }
);

export default service;

最后是api/request.js 前面个两个文件配置好，我们就可以使用接口，每个接口分开调用

import axios from 'axios'
import request from 'utils/request';
axios.defaults.timeout = 20000;

// 自定义方法
const doPost= (data) => {
  return request({
    url:"bbb",
    method:'post',
    data
  })
}
const doGet= (params) => {
  return request({
    url:"bbb",
    method:'get',
    params
  })
}
// 上传文件
const doImg = (data) => {
  return request({
    url: 'file/cccc',
    method: 'post',
    headers: { 'Content-Type': 'multipart/form-data' },
    data
  });
};

export {
  doGet,doPost,doImg
}

此时 我们 aixos 配置结束，
开始配置 sass

npm install sass

创建文件夹

最后是配置我们的vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')


// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            "@": path.join(__dirname, "src"),
            "~": path.join(__dirname, "node_modules")
        }
    },
    css: {
        //css预处理
        preprocessorOptions: {
            scss: {
                /*
                引入var.scss全局预定义变量，
                 */
                additionalData: '@import "@/assets/scss/globalVariable.scss";'
            }
        }
    },
    //用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
    assetsDir: "assets",
    //默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变)
    filenameHashing: false,
    port: 3000,
    // 反向代理
    proxy: {
        '/api': {
            target: 'http://xxx.xxxxx.xxx/',
            changeOrigin: true,
            rewrite: path => path.replace(/^\/api/, '')
        }
    }
})