README.md · ice19/hmzs95

# 从0到1搭建一个V3+TS项目

带领团队，使用最佳实践开发项目

## 0. 脚手架介绍

从0创建vue3项目使用的脚手架种类

1. 基于webpack的 vue-cli，之前很长一段时间都是用这个脚手架开发的 
   1. https://cli.vuejs.org/zh/guide/creating-a-project.html
2. 目前开发vue3项目，推荐使用vite脚手架创建，有两个地方可以查看创建的命令
   1. vue3官网  https://cn.vuejs.org/guide/quick-start.html
   2. vite官网  https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project

## 1. 骨架创建

###  1. Vite

```
先去查看vite官网，使用vite脚手架，创建一个vue3+ts基础项目 https://cn.vitejs.dev/guide/
pnpm create vite
```

### 2. Ant Design Vue 3.X

安装UI组件库Ant Design Vue, 官网 https://antdv.com/docs/vue/getting-started-cn

开发react的时候，有一个库Ant Design。 这两个搭配类似于与 vue2 +element-ui

因为react比较出名，所以针对于vue，别人前端团队开发了一个vue版本的ant design--名称就是 ant design vue

Ant Design Vue这个库的版本因为用的人比较多，所以它的版本也正在不断的更新迭代，2023.7发布了4.0的版本，企业替换没有这么快，所以还是使用的3.x的版本

怎么样去查看一个库的版本更新迭代情况，大部分的项目的代码都在**github**上面，别人项目的仓库一般都有一个文件 **Change Log.MD** 这个文件，里面放的内容都是一些当前库的版本号更新迭代的历史记录信息

```
pnpm i ant-design-vue -S
-s  --save 都是一个意思，是说将当前npm包安装到 生成环境的依赖里面 dependencies里面 (vue pinia loadash ant-design-vue  element-ui)
devDependencies(webpack ts vite sass less postcss等等) 这个是放开发的时候需要的一些环境包，比如ts vite 都是开发的时候需要的，打包上线的是我们的整个项目只有个html js css 文件

安装完发现官网的写法有问题，会默认帮我们安装4.x的版本，我们需要先卸载在手动安装指定版本号
卸载       pnpm remove ant-design-vue
指定版本号  pnpm add ant-design-vue@3.2.20 -S

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

createApp(App).use(Antd).mount('#app');

图标库的使用
pnpm i @ant-design/icons-vue -S
svg的使用，以及可以使用阿里在线的地址

我觉得ant-design-vue比element-ui elemnt-plus vant-ui等等的好处，有一个点就是 svg图标的天然支持，并且可以很方便的支持阿里矢量图标库的在线链接
```

### 3. pinia

安装  官网https://pinia.vuejs.org/zh/

pinia支持vue2 vue3 ------  只不过vue3跟推荐用pinia

vuex 支持vue2 vue3 -----  vue2因为历史原因还是vuex

现在vue3使用的vuex是4.x版本， pinia有个别名，有些人也称它为vuex5.x

面试vue3必问： pinia 和vuex的区别

**1.安装**

`pnpm i pinia --save`

**2. main.js里面导入**

```
import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)
```

**3.使用组合式API方式定义pinia， 新建store文件夹，新建index.ts**

```
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

return { count, doubleCount, increment }
})

在 Setup Store 中：
ref() 就是 state 属性
computed() 就是 getters
function() 就是 actions
```

**4.组件里面使用**

```
import { useCounterStore } from '@/stores/counter'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()

console.log(store.count)
store.increment()
```

**5. 安装持久化插件**

vuex也有持久化插件 vuex-persistedstate。 使用的时候是第6个属性 plugins。 以前总说vuex有5个-- state getters mutations actions modules。 用了插件以后，就不需要在手动设置持久化了

```
vuex持久化的代码 ----  选项式写法
import persistedState from 'vuex-persistedstate'
export default new Vuex.Store({
    state: {},
    getters: {},
    mutations: {},
    actions: {},
    modules: {},
    plugins: [persistedState()]
})
```

```
https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/
pnpm i pinia-plugin-persistedstate --save

import persist from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(persist)

组合式的写法
export const useCounterStore = defineStore(
 'counter', 
 () => {},
 // 第三个参数，添加一个 持久化的属性配置
 {
   persist: true
 }
)
```

### 4. vue-router安装

官网 https://router.vuejs.org/zh/

路由在使用的时候，vue-router官网没有现成的demo里面，都是零散的拼凑起来的

这种情况下，官网没有完整的demo，就去githup上面找写好的vue3项目，看别人的路由定义，模仿的去写

**1. 安装**

`pnpm add vue-router@4`

**2.创建router文件夹**

```
创建index.ts 写入以下内容
const routes = [
  { path: '/', component: () => import('@/views/Home.vue') },
  { path: '/about', component: About },
  { 
  	path: '/abc', 
  	component: abc, 
  	// 带有子路由的情况
  	childrend: [
        { path: '/aaa', component: () => import('@/views/aaa.vue') },
  	] },
]
const router = VueRouter.createRouter({
  // 内部提供了 history 和 hash模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: VueRouter.createWebHashHistory(),
  routes: routes,
})
后续添加动态路由，路由守卫都是基于router这个实例
router.beforeEach()
router.afterEach()
```

**3.main.js导入**

`app.use(router)`

### 5. 项目支持sass，less等

```
# .scss and .sass
pnpm add -D sass
通过 <style lang="sass">（或其他预处理器）自动开启
通过 <style lang="scss">（或其他预处理器）自动开启

# .less
pnpm add -D less
通过 <style lang="less">（或其他预处理器）自动开启
```

### 6. 文件夹基本结构

![](https://s11.ax1x.com/2024/01/22/pFVWfat.jpg)

### 7. 布局组件

![](https://s11.ax1x.com/2024/01/22/pFVWoRS.jpg)

### 8. vite.config.ts相关配置

```
配置@等别名，绝对路径等概念
https://tie.pub/2019/07/nodejs-esm-impl/

resolve: {
  alias: {
    '@': fileURLToPath(new URL('./src', import.meta.url))
  }
}

import.meta.url 当前文件的绝对路径
new URL('./src', import.meta.url)  将src文件夹所在的绝对路径--解析为文件url
fileURLToPath() 将文件URL解码为路径字符串

代理
server: {
    port: 3000,
    open: true,
    cors: true,
    proxy: {
      '/api': {
        target: 'https://xxxxx/api/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    }
  }
```

### 9. axios二次封装

人资， 小程序，医疗项目

```
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  // baseURL: 'https://heimahr.itheima.net/api',
  // baseURL: '/api', // 将api文件夹里面的请求 地址 用 /api拼接一下
  //  // 请求的超时时间，有些请求比如数据量比较大，那么需要的时间比较长比如需要6s才能返回
  // 请求超时报的错误 有个单词  timeout
  timeout: 10000
})

// 请求拦截器 --- 一般在请求拦截器里面 给所有请求添加一个token，属性一般是Authorization
service.interceptors.request.use(
  config => {
    const token = getToken()
    if (token) {
      // 如果cookie里面有token，就给所有的请求头 添加一个token值，属性名称 去接口文档里面找
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  // 响应成功 200 执行第一个回调函数
  response => {
    // 提前将服务器返回的 二进制的流数据 单独处理
    if (response.data instanceof Blob) return response.data

// 进入这个函数以后，表示http请求成功，但是业务可能成功可能失败 （登录请求，请求成功，账号密码输入错误，也会执行第一个回调函数）
    // if (response.data.code === 10000) { // 看文档业务成功失败的状态
    if (response.data.success) {
      // 在响应拦截器里面 对返回的数据脱壳处理，axios会默认吧服务器的返回值给我包装为一个大对象
      return response.data
    } else {
      // 如果业务失败，应该给用户一个提示
      Message({
        message: response.data.message || '111请求业务失败',
        type: 'error'
      })
      // 业务失败，给前端也应该抛出一个错误，
      return Promise.reject(response)
    }
  },
  // 响应失败 4xx  5xx 执行第二个函数
  error => {
    if (error.response.status === 401) {
      // 进入了这里，表示token失效了，我们应该 清除vuex的 token userInfo 本地储存的cookie都要清除，然后跳转回登录页面
      store.commit('user/delTokenMutation')
      router.push('/login')
      return Promise.reject(error)
    }
    // error是一个对象，如果默认使用console.log打印，得到的是一个字符串，不能展开，看里面的细节
    // 需要主动的使用console.dir 将 error当做一个对象来打印
    console.dir(error)
    Message({
      message: error.response.data.message || '请求失败',
      type: 'error'
    })
    return Promise.reject(error)
  }
)

```

```
// 添加基地址
http.baseURL = "https://live-api.itheima.net/"

http.intercept.request = function(options) {
  const defaultOptions = {}
  if(getApp().token) {
    defaultOptions.Authorization = getApp().token
  }
  options.header = Object.assign({}, defaultOptions,options.header)
  // defaultOptions.header.Authorization
  // options.header.Authorization = getApp().token 不能这样连写，因为opitons参数里面没有header属性
  return options
}

// 响应拦截器，添加以后，之前写过的所有接口，都需要将res.data.xxx 中间的data给去掉，因为这里进行了脱壳处理
http.intercept.response = async function(res) {
  // token失效 状态码返回401. 如果刷新token也失效返回状态码也是401.如果不单独处理就会死循环
  if(res.data.code === 401) {
    // 进入这个401有两个情况可以进来，token失效 + 刷新token失效
    if(res.config.url.includes('/refreshToken')) {
      // 只要401进入了这个if分支，就证明刷新token也失效了，那我们就不能在做无感刷新了，直接退出到登录页面，让用户重新登录 （tokne过期时间4小时。refreshToken刷新token过期时间一般3天）
      wx.navigateTo({
        url: '/pages/login/index',
      })
      return
    }
    // 如果是以前，在这里监听到token过期以后，人资里面是清空token，在跳转到登录页面。重新登录
    // 我们小程序这里后端给我们写了个 根据刷新token获取 新token的接口，所以我们可以使用更优化的方式
    // 无感刷新
    const app = getApp()
    // console.log(app.refreshToken);

const res1 = await http({
      url: '/refreshToken',
      method: 'POST',
      header: {
        Authorization: app.refreshToken
      }
    })
    // console.log('使用刷新token去发请求，', res1);
    getApp().setToken(res1.data.token,res1.data.refreshToken)

// 这里在获取了新的token以后，将之前因为token实现的请求，再发送一遍，这个过程叫无感刷新，用户对于token失效是没有感觉
    // console.log(res.config);
    // http(res.config)
    http(Object.assign(res.config, {header: {Authorization: getApp().token}}))
  }
  return res.data
}

```

```
// 这里的axios.create 是创建一个单独的axios实例，
// 下面的代码模板，所有项目都一样，要么去看官网，要么看之前自己写的项目
// 参考之前的模板，直接cv，改一些具体的值就可以了
const instance = axios.create({
  // TODO 1. 基础地址，超时时间
  baseURL: 'https://consult-api.itheima.net',
  timeout: 6000
})

instance.interceptors.request.use(
  (config) => {
    // TODO 2. 携带token
    const store = userStore()
    if (store.user?.token) {
      config.headers.authorization = `Bearer ${store.user?.token}`
    }
    return config
  },
  (err) => Promise.reject(err)
)

// 响应拦截器：一般做 1.数据脱壳处理，2.业务成功业务失败，3.401token失效的处理
instance.interceptors.response.use(
  // 第一个函数都属于请求成功，但是业务有成功和失败， 状态码是2xx 3xx
  (res) => {
    // 下面判断用户请求的业务成功，要后端java他们告诉我们
    if (res.data?.code === 10000) {
      // 脱壳
      return res.data
    } else {
      showToast(res.data?.message || '请求失败')

// 业务失败
      //提示个错误
      return Promise.reject(res)
    }
  },
  (err) => {
    // 下面这里的函数是请求失败，http状态码是 4xx 5xx
    // TODO 5. 处理401错误
    if (err.response?.status === 401) {
      // 进入了这里表示token 失效了，应该退出到登录界面，并且将token还有本地储存等数据清空
      const store = userStore()
      store.delUser()
      router.push('/login')
      return Promise.reject(err)
    }
    // 不是401就给个错误提示，在返回失败的promise
    return Promise.reject(err)
  }
)

export default instance

export const request = (url: string, method: string, obj?: any) => {
  if (!obj) {
    return instance.request({
      url,
      method
    })
  }
  return instance.request({
    url,
    method,
    // 动态的key，使用数组的中括号形式去写
    [method.toUpperCase() === 'GET' ? 'params' : 'data']: obj
    // data: obj,
    // params: obj
  })
}
```

### 10. 一些常见类型问题

参考掘金文档： https://juejin.cn/post/6968364365237993479

```
在项目根目录或 src 文件夹下创建或查找一个后缀为 .d.ts 的文件，并写入以下内容

declare module '*.vue' {
  import { ComponentOptions } from 'vue';
  const componentOptions: ComponentOptions;
  export default componentOptions;
}
```

**@别名添加以后，ts类型报错**

```
找到tsconfig.json文件， 在compiler属性里面，添加下面配置

"baseUrl": "./",      // 解析非相对模块的基础地址，默认是当前目录
"paths": {
  "@/*": ["./src/*"]  // 路径映射，相对于baseUrl
},

下面写法也可以
"baseUrl": "."  
"paths": {
   "@/*": ["src/*"]
},
```

tsconfig.json文件来配置TypeScript编译器的选项

tsconfig.node.json的特定于Node.js环境的配置文件。

### 12. 使用一些UI组件库的时候有没有遇到一些问题

之前官网 都是ant-design-vue  V3.2.20   对应 vue 3.x.x 这个版本，或者 vue2.xx版本的实例

有可能vue的版本更新了以后，ant-design-vue  V3.2.20没有做对应的适配

去ant-design-vue的官方 github仓库，发现是我们vue版本太新的原因，需要自己升级一下本地的 ant-design-vue的包到 4.1.1 以上 就可以实现Modal弹出框关闭了

一个库的新版本出来以后，一些公司可能不会立即使用，一些个人开发者会大量的使用新的特性，出现了bug就去别人仓库里面 提 issue， 官网开发人员，看到了就复现一下，如果确实是bug，那么就会收录这个issue，解决掉之后，在发布更新的版本

版本号一般是3个属性 3.2.20

3  主版本号，一般不改

2 次版本号， 每个月有新特性了更新一下

20 修订版本号(打补丁)， 每周更新一些issue库里面的bug，在更新一下

## 2. 可视化大屏以及微前端

大屏项目里面一般会有2d图 3d图

一般会开启一个新项目，比如由另外的团队去维护。 我们这个后台怎么样集成别人的项目进来，就是微前端做的事情

### 2.1 cookie共享的问题

之前我参加过一个微前端的项目，然后我们写的大屏项目需要token值，但是因为localstorage sessionStorage不支持跨域访问。但是cookie支持，所以我们就把后台管理的项目，换成了cookie持久化存储

最后的产出是这样的，开发环境里面 后台项目的地址 http://localhost:3000  大屏项目的开发环境 http://localhost:8000. 这样就可以实现 其他的项目公用同一个登录页面的token。 其他的子项目都不需要写登录页面

cookie有个特点： 只要是当前域名的cookkie，在发任何请求的时候，会自动放到请求头里面，发给后端

注意点：不同的项目，域名一定要一样。

127.0.0.1 这种叫ip地址， cookie不好用

localhost 这种叫域名， cookie在域名地址的情况下去访问的

### 2.1 3d渲染相关的知识点

v-scale-screen   大屏可视化(等比例宽高缩放，整个页面完全会显示出来)  (和vw rem不一样)

splinetool  3D渲染的包  (three.js)

ice19/hmzs95

简介

发行版

贡献者

近期动态

ice19/hmzs95 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

ice19/hmzs95