thai-hotel-h5

Thai-Hotel-H5

1.创建项目 vite+vue

npm init vite@latest thai-hotel-h5 -- --template vue

cd thai-hotel-h5

npm install

npm run dev

2.在src目录下创建相关文件夹和文件

• api router store views utils

3.安装移动端UI库

npm i vant

3.1 按需导入

npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import

如果是基于 Vite 的项目，在 vite.config.js 文件中配置插件：

import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';

export default {
  plugins: [
    vue(),
    AutoImport({
      resolvers: [VantResolver()],
    }),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

4.引入Vue-Router

npm install vue-router@4

4.1 在router下面创建index.js/ts文件

index.js 文件内容

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

4.2 在main.js/ts中注册路由

main.js 中注册

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

const app = createApp(App)

app.use(router)

app.mount('#app')

4.3 在app.vue中使用添加

app.vue 主要是添加<RouterView />

<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <RouterView />
</template>

<style scoped>

</style>

5.引入vue axios

npm install axios

5.1 封装axios

在utils下面创建request.js/ts文件.在api文件中创建对应接口方法

utils下面创建request.js/ts文件

import Axios from 'axios'

const axios = Axios.create({
    baseURL: "http://localhost:5173/",
    timeout: 30000
})

//请求拦截
axios.interceptors.request.use(function(config){
    return config
}),function(error){
    return Promise.reject(error)
}

//相应拦截
axios.interceptors.response.use(function(config){
    return response
}),function(error){
    return Promise.reject(error)
}

export default axios

6. vue pinia

6.1 安装pinia

npm install pinia

6.2 注册 在main.js/ts中

main.js/ts 文件

import { createApp } from 'vue'
import './style.css'
import { createPinia } from 'pinia'  //这里
import App from './App.vue'
import router from './router'

// createApp(App).mount('#app')
const app = createApp(App)
const pinia = createPinia() //这里

app.use(pinia)   //这里
app.use(router)

app.mount('#app')

7,封装localstore (跟第六条二选一即可,都是存储数据)

问题记录

1. @ 无法识别 找不到目录

创建jsconfig.json文件

jsconfig.json文件

{
    "compilerOptions": {
      "baseUrl": "./",
      "paths": {
        "@/*": ["src/*"],
      }
    },
    "exclude": ["node_modules", "dist"],
    "include": ["src/**/*"]
  }

对于使用 Vite 的项目，需要在vite.config.ts文件中配置路径别名。确保你已经正确导入了path模块，并设置了alias：

vite.config.ts文件

import path from 'path';

export default {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
};