从 0 开始带你搭建一套规范的 Vue3.x 前端工程环境
XPoet 前端鼓励师

Vue3 跟 Vite 正式版发布已有大半年之余,生态圈也渐渐丰富起来,作者已在多个项目中使用,一番操作总结下来:就是快!开发体验真不是一般好,还没尝鲜的同学们可以从本文开始学习,从 0 开始手把手带你搭建一套规范的 Vite + Vue3 + TypeScript 前端工程环境。

本文从以下几个方面展开:

  • 技术栈
  • 环境搭建
  • 代码规范
  • 提交规范
  • 单元测试
  • 自动部署
  • 异常监控

作者已将完整的项目工程环境 demo 托管在 GitHub,需要的同学自取,如果对你有帮助,点赞支持下作者~

技术栈

环境搭建

请确保你的电脑上成功安装 Node.js,因为本项目使用 Vite 构建工具,需要 Node.js 版本 >= 12.0.0

查看 Node.js 版本:

1
$ node -v

作者建议将 Node.js 升级到最新的稳定版本:

1
2
# 使用 nvm 安装最新稳定版 Node.js
$ nvm install stable

使用 Vite 快速搭建项目雏形

  • 使用 NPM:

    1
    npm init @vitejs/app
  • 使用 Yarn:

    1
    yarn create @vitejs/app

然后按照提示操作:

  1. 输入项目名称

    本例项目名:vite-vue3-starter

    image

  2. 选择模板

    本例使用 Vue3 + TypeScript,所以我们在这里选择 vue-ts,会自动安装 Vue3 和 TypeScript。

    image

    你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。
    本例要构建 Vite + Vue + TS 项目,则运行:

    1
    2
    3
    4
    5
    6
    7
    8
    # npm 6.x
    npm init @vitejs/app vite-vue3-starter --template vue-ts

    # npm 7+(需要额外的双横线)
    npm init @vitejs/app vite-vue3-starter -- --template vue-ts

    # yarn
    yarn create @vitejs/app vite-vue3-starter --template vue-ts

    image

  3. 安装依赖

    1
    npm install
  4. 启动项目

    1
    npm run dev

    image

    至此,Vite + Vue3 + TypeScript 的项目骨架搭建完毕,下面我们来为这个项目集成 Vue Router、Vuex、Element Plus、Axios、Stylus/SCSS/LESS。

集成路由工具 Vue Router

  1. 安装支持 Vue3 的 vue-router@4

    1
    npm i vue-router@4 -S
  2. 创建 src/router/index.ts 文件

    src 下创建 router 目录,然后在 router 目录里新建 index.ts 文件:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    import {
    createRouter,
    createWebHashHistory,
    RouteRecordRaw
    } from 'vue-router'
    import Home from '@/views/home.vue'
    import Vuex from '@/views/vuex.vue'

    const routes: Array<RouteRecordRaw> = [
    {
    path: '/',
    name: 'Home',
    component: Home
    },
    {
    path: '/vuex',
    name: 'Vuex',
    component: Vuex
    },
    {
    path: '/axios',
    name: 'Axios',
    component: () => import('@/views/axios.vue') // 懒加载 Axios 组件
    }
    ]

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

    export default router

    根据本例路由配置的实际情况,你需要在 src 下创建 views 目录,用来存储页面组件。
    本例需在 views 目录下创建 home.vuevuex.vueaxios.vue

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

    1
    2
    3
    4
    5
    6
    import { createApp } from 'vue'
    import App from './App.vue'

    import router from './router/index'

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

集成数据管理工具 Vuex

  1. 安装支持 Vue3 的 Vuex@next

    1
    npm i vuex@next -S
  2. 创建 src/store/index.ts 文件

    src 下创建 store 目录,然后在 store 目录里新建 index.ts 文件:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    import { createStore } from 'vuex'

    const defaultState = {
    count: 0
    }

    // Create a new store instance.
    export default createStore({
    state() {
    return defaultState
    },
    mutations: {
    increment(state: typeof defaultState) {
    state.count++
    }
    },
    actions: {
    increment(context) {
    context.commit('increment')
    }
    },
    getters: {
    double(state: typeof defaultState) {
    return 2 * state.count
    }
    }
    })
  3. main.ts 文件中挂载 Vuex 配置

    1
    2
    3
    4
    5
    6
    import { createApp } from 'vue'
    import App from './App.vue'

    import store from './store/index'

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

集成 UI 框架 Element Plus

  1. 安装支持 Vue3 的 Element Plus

    1
    npm i element-plus -S
  2. main.ts 文件中挂载 Element Plus

    1
    2
    3
    4
    5
    6
    7
    import { createApp } from 'vue'
    import App from './App.vue'

    import ElementPlus from 'element-plus'
    import 'element-plus/lib/theme-chalk/index.css'

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

集成 HTTP 请求工具 Axios

  1. 安装 Axios(Axios 跟 Vue 版本没有直接关系,安装最新即可)

    1
    npm i axios -S
  2. 配置 Axios

    为了使项目的目录结构合理且规范,我们在 src 下创建 utils 目录来存储我们常用的工具函数。

    Axios 作为 HTTP 工具,我们在 utils 目录下创建 axios 目录,将 Axios 配置文件放在 src/utils/axios/index.ts 文件:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    import Axios from 'axios'

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

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

    // 前置拦截器(发起请求之前的拦截)
    axios.interceptors.request.use(
    (config) => {
    /**
    * 此处根据你的项目实际情况来对 config 做处理
    * 本例只是 demo,对 config 不做任何处理,直接返回
    */
    return config
    },
    (error) => {
    return Promise.reject(error)
    }
    )

    // 后置拦截器(获取到响应时的拦截)
    axios.interceptors.response.use(
    (response) => {
    /**
    * 此处根据你的项目实际情况来对 response 和 error 做处理
    * 本例只是 demo,对 response 和 error 不做任何处理,直接返回
    */
    return response
    },
    (error) => {
    return Promise.reject(error)
    }
    )

    export default axios
  3. 使用 Axios
    在需要使用 Axios 文件里,引入 Axios 配置文件,参考如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <template></template>
    <script lang="ts">
    import { defineComponent } from 'vue'
    import axios from '../utils/axios/index'

    export default defineComponent({
    setup() {
    axios
    .get('/users/XPoet')
    .then((res) => {
    console.log('res: ', res)
    })
    .catch((err) => {
    console.log('err: ', err)
    })
    }
    })
    </script>

集成 CSS 预编译器 Stylus/SCSS/LESS

本例使用 CSS 预编译器 Stylus,直接安装即可使用,Vite 内部已帮我们集成了相关的 loader。同理,你也可以使用 SCSS、LESS 等。

  1. 安装

    1
    2
    # 安装为开发依赖 -D
    npm i stylus -D
  2. 使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <style lang="stylus">
    $font-color = #333
    #app {
    font-family Avenir, Helvetica, Arial, sans-serif
    -webkit-font-smoothing antialiased
    -moz-osx-font-smoothing grayscale
    box-sizing border-box
    position relative
    width 100%
    height 100%
    color $font-color
    }
    </style>

修改 Vite 配置文件

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

本例进行了简单配置:设置 @ 指向 src 目录、 服务启动端口、打包路径、代理网址等。Vite 更多配置项及用法,请查看 Vite 官网:https://vitejs.dev/config/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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, // 设置服务启动时是否自动打开浏览器
// 设置代理
proxy: {
'/api': {
target: 'http://xxx.xxx.xxx.xxx:8000',
changeOrigin: true,
secure: false,
rewrite: (path) => path.replace('/api/', '/')
}
},

cors: true
}
})

到这一步,一个基于 TypeScript + Vite + Vue3 + Vue Router + Vuex + Element Plus + Axios + Stylus/SCSS/Less 的前端项目开发环境配置完毕,Demo 托管在 GitHub,需要的同学可以去下载下来,参考学习。

下面我们来继续打磨这个项目,增加代码规范约束、提交规范约束、单元测试、自动部署、异常监控等。

未完待续….

代码规范

提交规范

单元测试

自动部署

异常监控

  • Post title:从 0 开始带你搭建一套规范的 Vue3.x 前端工程环境
  • Post author:XPoet
  • Create time:2021-04-06 15:33:47
  • Post link:https://xpoet.cn/2021/04/从-0-开始带你搭建一套规范的-Vue3-前端工程环境/
  • Copyright Notice:All articles in this blog are licensed under BY-NC-SA unless stating additionally.
 Comments