Vite创建项目流程

1、创建项目
    npm init vite
2、安装资源
     "axios": "^0.26.1",
    "echarts": "^5.3.1",
    "element-plus": "^2.1.7",
    "nprogress": "^0.2.0",
    "sass": "^1.49.9",
    "vue": "^3.2.25",
    "vue-router": "^4.0.14"
3、创建request.js文件，编写request.js
    /*-----------------引入资源----------------*/
    import axios from 'axios'
    import NProgress from 'nprogerss'
    /*------------------获得token--------------*/
    let getToken = () => {
        return 'token'
    }
    /*----------------axios的配置-----------------*/
    axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
    axios.interceptors.request.use((req) => {
        NProgress.start()
        req.headers['Authorization'] = getToken()
        return req
    })
    axios.interceptors.response.use((res) => {
        NProgress.done()
        return res
    })
    let get = (opt) => {
        return axios.get(opt.url, { params: opt.data })
    }
    let post = (opt) => {
        return axios.post(opt.url, opt.data)
    }
    let del = (opt) => {
        return axios.delete(opt.url, { params: opt.data })
    }
    let put = (opt) => {
        return axios.put(opt.url, opt.data)
    }
    let map = new Map([
        ['get', get],
        ['delete', del],
        ['post', post],
        ['put', put],
    ])
    /*-------------------导出请求方法------------------*/
    export default (opt) => {
        let mt = map.get(opt.type)
        if (!mt) {
            return new Promise((v) => {
                v({ data: null, meta: { status: 404, msg: '没有此' + opt.type + '类型的方法' } })
            })
        }
        return mt(opt)
    }
4、main.js中全局引入element-plus组件
    import { createApp } from 'vue'
    import App from './App.vue'
    // 引入公共的样式
    import './assets/common.css'
    // 引入 element-plus组件
    import ElementPlus from 'element-plus'
    import 'element-plus/dist/index.css'
    // 引入nprogerss的样式
    import 'nprogress/nprogress.css'
    // 引入路由模块
    import router from './router/index.js'
    let app = createApp(App)
    app.use(ElementPlus)
    app.use(router)
    app.mount('#app')

5、编写路由文件 router/index.js,在main.js中配置路由见步骤4
    import { createRouter, createWebHashHistory } from 'vue-router'
    const Login = () => import('../components/Login.vue')
    const Home = () => import('../components/Home.vue')
    let routes = [
        { path: '/', component: Login },
        { path: '/home', component: Home },
    ]
    let router = createRouter({ history: createWebHashHistory(), routes })
    router.beforeEach((to, from, next) => {
        next()
    })
    export default router

6、创建组件Home.vue
    <template>
        <div class="home">
            <div class="title">{{ msg }}</div>
        </div>
    </template>
    <script setup>
    import { ref } from 'vue'
    let msg = ref('home page')
    defineProps({})
    </script>
    <style scoped lang="scss">
    .home {
        .title {
            color: red;
        }
    }
    </style>
    
7、创建组件Login.vue
    <template>
        <div class="login">
            <div>
                <img :src="src" alt="" />
            </div>
            <div class="title">{{ msg }}</div>
        </div>
    </template>
    <script setup>
    import { ref } from 'vue'
    import src from '../assets/logo.png'
    let msg = ref('home page')
    defineProps({})
    </script>
    <style scoped lang="scss">
    .home {
        .title {
            color: red;
        }
    }
    </style>
    
8、修改App.veu
    <script setup></script>
    <template>
        <div class="app">
            <router-view></router-view>
        </div>
    </template>

9、修改项目启动的ip和端口，package.json中修改内容：
    "scripts": {
    "dev": "vite --host 127.0.0.1 --port 7777",
    "start": "vite --host 127.0.0.1 --port 7777",
    "build": "vite build",
    "preview": "vite preview"
  },

10、启动项目
    npm start 或者 npm run dev
    
11、访问项目
    在浏览器中输入
    http://127.0.0.1:7777/ ---->login页面
    http://127.0.0.1:7777/home ---->home页面