从零开始一个h5聊天室--前端（一）

前端：vite+vue3+ts
后端：nodejs+mysql

前端（一）

一、创建项目

1. 创建： yarn create vite client --vue-ts
2. 初始化依赖： yarn
3. 安装其他依赖：
   • yarn add vue-router@4
   • yarn add -D sass
   • yarn add axios
   • yarn add -D @types/node 这个是后面 使用 路径符号 @ 所需依赖
4. 找到 src 下的 vite-env.d.ts 文件，加入下列代码，解决 ts 引入 .vue 文件报错

declare module "*.vue" {
  import { DefineComponent } from "vue"
  const component: DefineComponent<{}, {}, any>
  export default component
}

5. 配置路径别名 @

• 在 vite.config.ts 里新增

  import path from "path"
  export default defineConfig({
  	  ......
	  resolve: {
	    // 配置路径别名
	    alias: {
	      '@': path.resolve(__dirname, './src'),
	    },
	  }
  })

• 在 tsconfig.json 中 的 compilerOptions 里加入，解决path模块的引用报错

	"types": [
      "node"
    ],
    // 路径别名
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },

6. 全局scss变量配置，新建一个全局变量 gloabal.scss，然后在 vite.config.ts 中配置注入

export default defineConfig({
  ......
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/theme/global.scss";'
      }
    }
  }
})

// gloabal.css
$font-color-gray: rgb(147,147,147);

// 组件里使用
<style lang="scss">
.loginPage {
  color: $font-color-gray;
}
</style>

二、路由配置

1. src下新建一个路由目录 router，然后再新建一个路由列表 routes.ts

// routes.ts
import type { RouteRecordRaw } from "vue-router";

export const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: () => import("@/views/login/index.vue")
  }
]

2. router目录下创建一个文件 index.ts ，然后在main.ts引入

// index.ts
import { createRouter, createWebHashHistory } from "vue-router";
import { routes } from "./routes";

const router = createRouter({
  history: createWebHashHistory(),
  routes
});

export default router;

// main.ts
import router from './router'

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

三、环境变量配置

1. 根目录下新建 env 文件夹 用来存放环境变量文件，建好后在 vite.config.ts 文件里声明下这个目录

envDir: "env", // 环境变量目录

2. env下新建三个文件：.env.dev、.env.prod、.env.test
   里面内容差不多，这里用来存放当前环境和接口地址

VITE_NODE = "development"
VITE_BASE_URL = "http://www.baidu.com"

3. package.json里面修改启动命令，然后重启项目，打印 console.log(import.meta.env)
   
   

四、请求配置（axios）

1. src下新建 request 目录，request下新建四个文件 config.ts、api.ts、http.ts、types.ts
2. 此处省略 N 个字，直接看效果：
   
   

五、引入UI库 Vant4

1. 这里用的组件不多，就照着官网文档按需引入了

• yarn add vant
• yarn add unplugin-vue-components -D

2. 配置插件 vite.config.ts 中

// vant
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
  ......
})

3. main.ts 中需要手动引入的vant组件样式

// vant
import 'vant/es/toast/style';
import 'vant/es/image-preview/style';

4. 使用效果
   

六、至此前端准备工作完成，开干！