Vue 3 + TypeScript + Vite 搭建初始项目

IT姑凉 lv-3

环境：

  • node v16.13.0
  • npm 8.1.0
  • @vue/cli 4.5.15

搭建项目

使用 Vite 构建项目

Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。

通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。

$ npm init vite@latest vue3-ts-vite-vant-h5 -- --template vue-ts
$ cd vue3-ts-vite-vant-h5
$ npm install
$ npm run dev
复制代码

Vite + Vue3 + TypeScript 简单的项目骨架搭建完毕。

修改 Vite 配置文件

Vite 配置文件 vite.config.ts 位于根目录下，项目启动时会自动读取。

简单配置如：设置 @ 指向 src 目录、 服务启动端口、打包路径、代理等。

关于 Vite 更多配置项及用法，请查看 Vite 官网 vitejs.dev/config/ 。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 如果编辑器提示 path 模块找不到，则可以安装一下 @types/node -> npm i @types/node -D
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
    }
  },
  base: './', // 设置打包路径
  server: {
    port: 4000, // 设置服务启动端口号
    open: true, // 设置服务启动时是否自动打开浏览器
    cors: true // 允许跨域

    // 设置代理，根据我们项目实际情况配置
    // proxy: {
    //   '/api': {
    //     target: 'http://xxx.xxx.xxx.xxx:8000',
    //     changeOrigin: true,
    //     secure: false,
    //     rewrite: (path) => path.replace('/api/', '/')
    //   }
    // }
  }
})
复制代码

规范目录结构

├── dist/
└── src/
    ├── api
    │   └── ... // 抽取出API请求
    ├── assets/                    // 静态资源目录
    ├── common/                    // 通用类库目录
    ├── components/                // 公共组件目录
    ├── router/                    // 路由配置目录
    ├── store/                     // 状态管理目录
        ├── index.ts          // 我们组装模块并导出 store 的地方
        ├── getters.ts        // 根级别的 getters
        ├── actions.ts        // 根级别的 action
        ├── mutations.ts      // 根级别的 mutation
        └── modules
            ├── home.ts       // 模块
            └── user.ts       // 模块
    ├── style/                     // 通用 CSS 目录
    ├── utils/                     // 工具函数目录
    ├── views/                     // 页面组件目录
    ├── App.vue
    ├── main.ts
    ├── shims-vue.d.ts
├── tests/                         // 单元测试目录
├── index.html
├── tsconfig.json                  // TypeScript 配置文件
├── vite.config.ts                 // Vite 配置文件
└── package.json
复制代码

创建对应的文件夹

集成路由工具 Vue Router

  1. 安装支持 Vue3 的路由工具 vue-router@4

    $ npm i vue-router@4
复制代码

  2. 在 src/views 目录下创建 home.vue 、login.vue ，并修改App.vue

    home.vue:

    <template> 这是home.vue </template>
复制代码

    user.vue:

    <template> 这是user.vue </template>
复制代码

    APP.vue:

    <template>
   <router-view />
</template>
复制代码

  3. 创建 src/router/index.ts 文件，配置路由

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

import Home from '@/views/home.vue'
import User from '@/views/user.vue'

const routes: Array<RouteRecordRaw> = [
  {
      path: '/',
      redirect: '/home'
  },
  {
      path: '/home',
      name: 'home',
      component: Home
  },
  {
      path: '/user',
      name: 'user',
      component: User
  }
]

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

export default router
复制代码

  4. 在 main.ts 文件中挂载路由配置

    import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
createApp(App).use(router).mount('#app')
复制代码

  5. 路由访问 home、user：

    image.png

    image.png

集成 UI 框架

拿 vant 为例

  1. 安装支持 vue3 的 vant

    $ npm i vant@3
复制代码

  2. 引入组件

    对于 vite 项目，可以使用 vite-plugin-style-import 实现按需引入

    安装插件:

    $ npm i vite-plugin-style-import -D
复制代码

    修改vite.config.js，增加styleImport部分配置:

    import vue from '@vitejs/plugin-vue';
import styleImport from 'vite-plugin-style-import';

export default {
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'vant',
          esModule: true,
          resolveStyle: (name) => `vant/es/${name}/style`,
        },
      ],
    }),
  ],
};
复制代码

  3. 修改App.vue，增加底部tab导航

    // App.vue
<template>
  <router-view />
  <Tabbar v-model="active">
    <TabbarItem icon="home-o" to="/home">首页</TabbarItem>
    <TabbarItem icon="contact" to="/user">我的</TabbarItem>
  </Tabbar>
</template>
<script setup lang="ts">
  import { Tabbar, TabbarItem } from 'vant';
  import { ref } from 'vue';
  const active = ref(0);
</script>
复制代码

    效果：

    首页我的
    image.pngimage.png

集成状态管理工具 Vuex

  1. 安装支持 Vue3 的状态管理工具 vuex@next

    $ npm i vuex@next
复制代码

  2. 创建 src/store/index.ts 文件

    import { createStore } from 'vuex'

import getters from './getters'
import mutations from './mutations'
import actions from './actions'

const state={}

let modules = {}
// Vite 支持 Glob 导入 https://vitejs.cn/guide/features.html#glob-%E5%AF%BC%E5%85%A5
// 导入 modules 下面的 所有 .ts文件
const modulesFiles = import.meta.globEager("./modules/*.ts")
for (const path in modulesFiles) {
        const moduleName = path.replace(/(.*\/)*([^.]+).*/gi, '$2')
        modules = { ...modules, [moduleName]: modulesFiles[path].default }
}

export default createStore({
        state,
        getters,
        mutations,
        actions,
        modules
})
复制代码

    Vite 批量引入文件，Vite Glob 导入，import.meta.glob、import.meta.globEager，可以避免每新增模块的时候我们都要去配置文件里面做一次重复操作。

  3. 在 main.ts 文件中挂载 Vuex 配置

    import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index'
createApp(App).use(router).use(store).mount('#app')
复制代码

集成 HTTP 工具 Axios

  1. 安装 Axios（Axios 跟 Vue 版本没有直接关系，安装最新即可）

    $ npm i axios
复制代码

  2. 配置 Axios

    Axios 作为 HTTP 工具，我们在 utils 目录下创建 axios.ts 作为 Axios 配置文件：

    import Axios from 'axios'
import { Toast } from 'vant';

const baseURL = 'https://api.github.com'

const axios = Axios.create({
  baseURL,
  timeout: 20000 // 请求超时 20s
})

// 前置拦截器（发起请求之前的拦截）
axios.interceptors.request.use(
  (response) => {
    /**
     * 根据项目实际情况来对 config 做处理
     * 这里对 config 不做任何处理，直接返回
     */
    return response
  },
  (error) => {
    return Promise.reject(error)
  }
)

// 后置拦截器（获取到响应时的拦截）
axios.interceptors.response.use(
  (response) => {
    /**
     * 根据项目实际情况来对 response 和 error 做处理
     * 这里对 response 和 error 不做任何处理，直接返回
     */
    return response
  },
  (error) => {
    if (error.response && error.response.data) {
      const code = error.response.status
      const msg = error.response.data.message
      Toast.fail(`Code: ${code}, Message: ${msg}`);
      console.error(`[Axios Error]`, error.response)
    } else {
      Toast.fail(`${error}`)
    }
    return Promise.reject(error)
  }
)

export default axios
复制代码

  3. api 使用 Axios

    // api/user.ts
import axios from "@/utils/axios"
export const getUserInfo = () => {
    return axios.get('/users/vuejs')
}
复制代码

  4. store 中调用接口

    // store/modules/user.ts
import { getUserInfo } from '@/api/user'
const actions = {
    async GetUserInfo(store: Store<UserState>) {
        const response = await getUserInfo()
	if (response) {
		store.commit('SET_DETAIL', response.data)
	}
    },
}
复制代码

  5. 组件获取数据

    store.dispatch("user/GetUserInfo");
复制代码

集成 CSS 预编译器 Stylus/Sass/Less

项目使用 CSS 预编译器 Stylus，直接安装为开发依赖即可。Vite 内部已集成了相关的 loader，不需要额外配置。同理，也可以使用 Sass 或 Less 等。

  1. 安装

    npm i stylus -D
# or
npm i sass -D
npm i less -D
复制代码

  2. 使用

    <style lang="stylus">
  ...
</style>
复制代码

GitHub Actions 自动部署 gh-pages

传送门 -> GitHub Actions 实现提交代码自动打包部署到 gh-pages

至此，一个基于 TypeScript + Vite + Vue3 + Vue Router + Vuex + Vant + Axios + Stylus/Sass/Less 的前端项目开发环境搭建完毕

待完成

分类：
前端
标签：
前端Vue.js

友情链接：
私信
获得点赞  59
文章被阅读  43,316