Vue 3 + Typescript + Vite

一套集 Vue 3.x + Vite 2.x + TypeScript + Vue Router + Vuex + Axios + ESLint 等库的前端快速开发环境

简介

vue3 发布之后，性能增强，速度 vue2 的倍数，打包体积都在减小（treeshaking）,composition api 增加了项目可读性。

为了提升开发效率，减少在配置框架上消耗的时间，根据当前前端发展趋势，基于 Vue3.0 + Typescript + Vite 构建的空白项目，内置了 normalize.css 进行 CSS 的初始化，以及基本常用的库 Axios、Vue-Router、Sass、Vuex、Element Plus 等，项目都是以 composition api 风格编写，并配置好了代理以及对 cdn 引入、代码压缩、图片压缩、关闭 map 等打包问题进行优化配置。

该方案可作为直接开发使用的架构环境，也可因个人喜好进行修改。

技术栈

• 编程语言：TypeScript 4.x + JavaScript
• 构建工具：Vite 2.x
• 前端框架：Vue 3.x
• 路由工具：Vue Router 4.x
• 状态管理：Vuex 4.x
• UI 框架：Element Plus
• CSS 预编译：Sass
• HTTP 工具：Axios
• Git Hook 工具：husky + lint-staged
• 代码规范：EditorConfig + Prettier + ESLint + [Airbnb JavaScript Style Guide](Airbnb JavaScript Style Guide)
• 提交规范：Commitizen + Commitlint
• 单元测试：vue-test-utils + jest + vue-jest + ts-jest

目录结构

├── public                  # 不需要打包的静态资源
│   └── favicon.ico
├── src
│   ├── api                 # apis统一管理
│     └── axios.ts          # API 接口封装
│   ├── assets              # 静态资源目录
│   ├── components          # 公共组件目录
│     └── HelloWorld.vue    # HelloWorld 组件
│   ├── composables         # 通用的组合式 API
│   ├── layout              # 页面布局模板
│   ├── plugins             # 插件
│   ├── router              # 路由配置目录
│   ├── store               # Vuex 状态管理目录
│   ├── style               # css 样式目录
│     └── common.scss       # 全局样式
│   ├── utils               # 工具函数目录
│   ├── views               # 路由页面组件目录
│     ├── About.vue         # About 组件
│     └── Home.vue          # Home 组件
│   ├── App.vue             # 根组件
│   ├── main.ts             # 入口模块
│   └── env.d.ts            # vite 类型声明
├── .gitignore              # Git 屏蔽配置文件
├── index.html
├── LICENSE
├── package.json
├── README.md               # 说明文档
├── tsconfig.json           # TypeScript 配置文件
├── vite.config.ts          # Vite 配置文件
├── yarn-error.log
└── yarn.lock

功能清单

• 配置数据状态管理工具 Vuex
• 通过 Axios 实现前后端交互
• 采用 Sass 编译 CSS 样式
• 动态添加页面
• 提供预置工具函数
• 其他...

快速开始

下载项目

// 把模板下载到本地
git clone https://github.com/lin-xin/vue-manage-system.git

// 进入模板目录
cd vue-manage-system

项目安装

// 需要 Node.js 版本 >= 12.0.0
npm install
# or
yarn install

项目启动

npm run dev
# or
yarn dev

项目打包

npm run build
# or
yarn build

本地访问

// 下载安装 http-server
$ npm install http-server -g

// 进入到 dist 已打包文件目录中
$ cd dist

// 启动 http-server 使用命令：http-server [path] [options]
$ http-server ./ 3000

访问: http://127.0.0.1:8080 或者 http://192.168.0.100:8080 使用 CTRL-C 停止本地服务。http-server 传送门

线上部署

本例使用 Nginx 部署
需要注意的是路由配置 src/router/index.ts

const router = createRouter({
  history: createWebHistory('test'), // 此处部署非根目录，而是 test 目录下,所以括号内配置 test，如果是根目录则改成 createWebHistory()
  // history: createWebHashHistory('test'),// hash 也是可以，如果面向企业对 url 不敏感可用此模式
  routes
})

Nginx 配置：

server {
    listen 80;
    server_name  test.wxlvip.com;
    server_tokens off;
    index index.html index.htm;
    root /www;
    location / {
        proxy_ssl_session_reuse off;
        try_files $uri $uri/ /index.html;
        client_max_body_size    1000m;
    }
}

访问地址：http://test.wxlvip.com/test/

Browsers support

Modern browsers and Internet Explorer 10+.

IE	Edge	火狐	Chrome	Safari
not support	last 2 versions	Firefox last 2 versions	Chrome last 2 versions	Safari last 2 versions

License

MIT

Copyright (c) 2021-present