# vite-vue2

**Repository Path**: chenzhihuiShuai/vite-vue2

## Basic Information

- **Project Name**: vite-vue2
- **Description**: 基于Vue2.x + Vite2.x + TypeScript 项目开发框架模板
- **Primary Language**: JavaScript
- **License**: BSD-3-Clause
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-09-30
- **Last Updated**: 2024-01-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基于Vue2.x + Vite2.x + TypeScript 项目开发框架模板

****

## 主要依赖

| 名称 | 版本 | 说明 |
| --- | --- | --- |
| vue  | 2.6.X | vue核心依赖，项目基于vue2.6版本构建，而非vue3.X |
| vue-router  | 3.5.X | vue2.X版本路由 |
| vuex | 3.6.X | vue2.X版本的vuex |
| @vue/composition-api |1.X.X | 适用于vue2.x版本的插件，能够在vue2.x 实现vue3.x特性 |
| element-ui | 12.5.X | vue2.X版本的 element-ui |
| vue2-helpers | 1.1.X | 适用于vue2.x版本的插件，composition-api在实现vue2.x的vue3.x特性后，无法方便的在setup方法中使用vuex和vue-router，这个插件就是用来解决这问题的 |

****

## 目录结构

* node_modules 文件夹（项目依赖）
* public 公共资源文件夹  
  -- -- 1.favicon.ico 网站图标  
  -- -- 2.iconfont.min.js 阿里的iconfont图标库脚本
* src 资源文件夹（项目开发代码主要在这文件夹中）  
  -- -- api api请求配置  
  -- -- assets 存放静态文件  
  -- -- -- -- icon 图标svg  
  -- -- -- -- image 静态图片  
  -- -- -- -- style 样式文件  
  -- -- components 存放公用组件  
  -- -- -- -- common-components 公共组件库，里面有一些封好的组件（与业务相关的组件不要放在里面）  
  -- -- enums 枚举类文件  
  -- -- -- -- config.ts 后台环境地址配置  
  -- -- router 路由  
  -- -- store vuex  
  -- -- types ts的类型定义  
  -- -- utils 配置与公共方法 ，包含自定义指令，公共方法，插件等   
  -- -- views 页面  
  -- -- App.vue 入口vue文件  
  -- -- main.ts 入口ts  
  -- -- shim-tsx.d vite或ts的环境声明定义，一般不需要修改  
  -- -- shims-vue.d vite或ts的环境声明定义，一般不需要修改  
  -- -- vite-env.d vite或ts的环境声明定义，一般不需要修改

* .gitignore 指定文件无需提交到git上

* balel.config.js 使用一些预设

* package.json 项目描述及依赖

* package-lock.json 版本管理使用的文件

* vite.config.ts vite的配置文件

* tsconfig.json ts配置文件

* prettier.config.js 语法格式配置文件，缩进，空格相关

* index.html 入口模板html，vite默认这个放在这级目录

****

## 服务执行脚本（以npm为例）

### 初始化，添加依赖包

```bash
$ npm install
```

### 开发环境本地运行

```bash
$ npm run dev
```

### 测试环境本地运行

```bash
$ npm run dev:stage
```

### 预发布环境本地运行

```bash
$ npm run dev:pretest
```

### 单元测试环境运行(暂未配置)

```bash
$ npm run test
```

### 开发环境打包

```bash
$ npm run build:dev
```

### 测试环境打包

```bash
$ npm run build:stage
```

### 预发布环境打包

```bash
$ npm run build:pretest
```

### 生产环境打包

```bash
$ npm run build:prod
```

****

## 其他

### vite下的vue2.0的动态路由

一开始没有想要使用ts与composition-api进行搭建，但是搭建过程中发现 vite对ts的支持要更加完善，同时vite无法使用require()方法，import()方法也与webpack存在区别
导致在路由配置中无法正常用过import方法懒加载路由文件，最终没有办法引入composition-api才使得路由正常。

### axios 拦截器里的vue实例获取

在一些项目中，vue2.0 基于webpack的vue-cli用法中入口文件main.js 是这样的

````javascript
export default new Vue({
  render: h => h(App)
}).$mount("#app")
````

这里将vue的实例直接导出，这使得我们在其他地方引入可以直接拿到vue的实例，例如我们在对 axios 封装的request脚本中，可以引入，并在响应拦截器中 判断状态码，实现一些路由跳转

````javascript
import vueInst from '../main.js'

const service = axios.create({
    baseURL: config.baseURL + '/api/',
    // ...
})
// ....
service.interceptors.response.use(
    response => {
        vueInst.$router.push({path: "/login"}).catch(err => {
            console.error(err)
        });
    })
````

但是，不知道是不是vue3.0（这里是composition-api）或是vite本身import特性，如果在main.ts 这样写

````javascript
const app = createApp({
    router,
    store,
    render: () => h(App),
});
app.mount('#app')
export default app
// 如果换成vue2.x写法
export default new Vue({
  render: h => h(App)
}).$mount("#app")
````

并在其他地方引用，会发现，vue实例被初始化了多边。  
最终还是妥协了，把vue实例挂载window上解决.....  

**总之vite目前还是主要针对ts与vue3.x的适配更为完善，其他坑暂时没遇到，但是还是推荐小项目上vue3.x的时候尝试**