vue3+vue-router+Ts+vite+pinia+element Plus搭建前端工程

1. 技术栈介绍

vue3：组件封装和拆分比Vue2更加细化和合理。
typescript：比js更加严格的类型检查，能够在编译期就能发现错误。
vite：下一代前端开发和构建工具。
element plus：ui组件库，比较热门的vue组件库之一。
axios：基于promise的网络请求库。
vue-router：路由控制。
keep-alive: 在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。
pinia：状态管理类库，比vuex更小，对ts的支持更友善。
volar插件：代码补全和检测工具，可以尝试替换vetur，如果不替换的话，用ts的语法糖的时候会出现找不到默认的default的错误。
pnpm：比npm和yarn更强劲的包管理工具，包安装速度极快，磁盘空间利用效率高。

2. 开发环境准备

#全局安装pnpm
npm i pnpm -g

3. 创建项目

# npm 6.x
npm init vite@latest my-vue-app --template vue-ts

# npm 7+, 需要额外的双横线
npm init vite@latest my-vue-app -- --template vue-ts

# yarn
yarn create vite my-vue-app --template vue-ts

# pnpm
pnpm create vite my-vue-app -- --template vue-ts

4. 引入vue-router

pnpm i vue-router@latest -D

5. 引入axios

pnpm i axios -D

6. 引入pinia

pnpm i pinia -D

7. 引入element-plus

pnpm i element-plus -D

项目搭建完成可以运行起来试试

pnpm run dev

8. 配置使用 element-plus

#配置src/main.ts文件
import { createApp } from  vue 
import  ./style.css 
import App from  ./App.vue 

// 引入element-plus
import element from  element-plus 
import  element-plus/dist/index.css   // 不引入会导致ui样式不正常

createApp(App).use(element).mount( #app )

9. 配置环境信息

1. 根目录新建.env.development(开发环境)文件

# 文件中配置变量以VITE_开头, 后面接变量名  例如  VITE_ENV = "development"   ,ENV为变量名
#环境
VITE_ENV = "development"

#基础地址
VITE_BASE_PATH = "http://1920.1080.1.1"

#服务
VITE_BASE_API= /api 

#端口
VITE_PROT = 9527

#地址
VITE_PUBLIC_PATH= ./ 

#修改project命令, 在dev运行命令后加入 --mode 文件名 例如 "serve": "vite --mode development",   运行时自动读取 .env.development文件

#build打包时默认是读取.env.production文件的所以不用配置

2. 同理配置testing（测试环境）；release（预发环境）；production（生产环境）
3. 安装 pnpm install dotenv 根据环境变量运行 使用配置详见下方 vite.config.ts

pnpm install dotenv

10.自动引入组件和vue方法的插件

pnpm install -D unplugin-vue-components unplugin-auto-import   //下载插件

//vite.config.js中配置
import AutoImport from  unplugin-auto-import/vite     //自动引入api
import Components from  unplugin-vue-components/vite   //按需自动引入组件
import { ElementPlusResolver } from  unplugin-vue-components/resolvers 

//在plugins配置中配置
export default () => {
  return defineConfig({
    plugins: [
      vue(),
      AutoImport({
        resolvers: [ElementPlusResolver()],  //对于element puls的配置
        imports: [
         vue , //自动引入的vue的ref等方法
         vue-router ,   //引入useRoute等方法
        {            //对于vue-router的type的扩展,配置后可以直接使用
          from:  vue-router ,
          imports: [ RouteLocationRaw ,],
          type: true,
        },],
        dts:  src/auto-imports.d.ts 
      }),
      Components({
        resolvers: [ElementPlusResolver()],   //对于element puls的配置
      }),
    ],
  })
}

//使用:
//在此处配置element plus后, 可以直接使用,仁和地方都不用再引入,自动按需引入的,在components.d.ts中可以看到生成文件
//import {ref} from  "vue"这种引入也可省略, 直接使用即可, 具体引入的类型在src/auto-imports.d.ts文件中可见
//注意:修改vite.config.ts文件后需要重启

11. 配置使用 vue-router

1.如果使用require需要安装@types/node

cnpm i @types/node -D

//vite.config.js中配置
import { defineConfig, UserConfig } from  vite 
import vue from  @vitejs/plugin-vue 
import path from  path 
import AutoImport from  unplugin-auto-import/vite     //自动引入api
import Components from  unplugin-vue-components/vite   //按需自动引入组件
import { ElementPlusResolver } from  unplugin-vue-components/resolvers 
// @ts-ignore
import fs from  fs 
// @ts-ignore
import dotenv from  dotenv 

//在plugins配置中配置
export default defineConfig(({ mode }: UserConfig): UserConfig => {
  // 根据环境变量加载环境变量文件
  const ASR_ENV = dotenv.parse(fs.readFileSync(`.env.${mode}`))
  return {
    base: ASR_ENV.VITE_PUBLIC_PATH,   // 环境路径
    server: {
      open: true, // 是否主动唤醒浏览器
      host:  0.0.0.0 ,
      port: 9527,// ASR_ENV.VITE_PROT,
      https: false,
      proxy: {
        [ASR_ENV.VITE_BASE_API]: {
          target: `${ASR_ENV.VITE_BASE_PATH}`,
          changeOrigin: true,
        },
      },
    },
    resolve: {
      alias: {
         @ : path.resolve(__dirname,  src ),
         assets : path.resolve(__dirname,  src/assets ),
         components : path.resolve(__dirname,  src/components ),
         config : path.resolve(__dirname,  src/config ),
         router : path.resolve(__dirname,  src/router ),
         tools : path.resolve(__dirname,  src/tools ),
         views : path.resolve(__dirname,  src/views ),
         plugins : path.resolve(__dirname,  src/plugins ),
         store : path.resolve(__dirname,  src/store )
      }
    },
    plugins: [
      vue(),
      AutoImport({
        resolvers: [ElementPlusResolver()],  //对于element puls的配置
        imports: [
           vue ,              //自动引入的vue的ref等方法
           vue-router ,       //引入useRoute等方法
          {                   //对于vue-router的type的扩展,配置后可以直接使用
            from:  vue-router ,
            imports: [ RouteLocationRaw ,],
            type: true,
          },],
        dts:  src/auto-imports.d.ts 
      }),
      Components({
        resolvers: [ElementPlusResolver()],   //对于element puls的配置
      }),
    ],
    css: {
      preprocessorOptions: {
        scss: {
          charset: false,
        },
      },
    },
    build: {
      outDir:  dist ,           // 指定输出路径
      assetsDir:  static ,      // 指定生成静态资源的存放路径
      minify:  terser ,         // 混淆器,terser构建后文件体积更小 ,boolean |  terser  |  esbuild ,默认使用esbuild
      sourcemap: false,         // 是否产出soucemap.json
      manifest: false,          // 是否产出maifest.json
      // reportCompressedSize: true,
      chunkSizeWarningLimit: 1500,
      terserOptions: {
        compress: {
          drop_console: true,   // 生产环境移除console
          drop_debugger: true   // 生产环境移除debugger
        }
      },
    },
  }
}

//使用:
//在此处配置element plus后, 可以直接使用,仁和地方都不用再引入,自动按需引入的,在components.d.ts中可以看到生成文件
//import {ref} from  "vue"这种引入也可省略, 直接使用即可, 具体引入的类型在src/auto-imports.d.ts文件中可见
//注意:修改vite.config.ts文件后需要重启

2.在src下新建一个router文件夹，作为vue-router的配置目录。此目录下再新建index.ts文件，编辑内容如下：

#配置router/index.ts文件
import { createRouter, createWebHistory, RouteRecordRaw } from  vue-router ;
const history = createWebHistory()
const routes: Array<RouteRecordRaw> = [
  {
    path:  / ,
    redirect:  /home ,
  },
  {
    path:  /home ,
    name:  home ,
    component: () => import( @/views/home/index.vue ),
  },
];
const router = createRouter({
  history,
  routes,
})
export default router

3. 在views目录下新建home目录并新建index.vue

#index.vue页面
<template>
  <h2>{{ msg }}</h2>
  <h2>{{ count }}</h2>
</template>
<script setup lang="ts">
import { ref } from  vue 

const msg = ref( 今天天气好晴朗 )
const count = ref(710)
</script>

<style scoped>
</style>

4.在main.ts中引入vue-router

import { createApp } from  vue 
import  ./style.css 
import App from  ./App.vue 

// 引入vue-router
import router from  ./router 

// 引入element-plus
import element from  element-plus 
import  element-plus/dist/index.css   // 不引入会导致ui样式不正常

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

12. axiox配置使用

1. 安装插件：axios 和 js-cookie

pnpm i axios -D
pnpm i js-cookie 

2. 在src下新建utils文件夹 创建auth.ts与request.ts文件

// auth.ts
// @ts-ignore
import Cookies from  js-cookie ;
const TokenKey =  asr-token ;
export const getToken = () => Cookies.get(TokenKey);
export const delToken = () => Cookies.remove(TokenKey);

// request.ts
import axios from  axios ; // 引入axios
import Vrouter from  @/router 
import { getToken } from  @/utils/auth ;
const Router = Vrouter;
console.log( import.meta.env.VITE_BASE_API , import.meta.env.VITE_BASE_API)
const service = axios.create({
    baseURL: import.meta.env.VITE_BASE_API as string,
    timeout: 99999,
});
// http request 拦截器
service.interceptors.request.use(
    (config:any) => {
    // 全局添加 token
    if (getToken()) {
        config.headers[ asr-token ] = getToken();
    }
    return config;
    },
    (error) => {
    console.error(error);
    return Promise.reject(error);
    },
);
// http response 拦截器
service.interceptors.response.use(
    (response) => {
    if (response.data.code === 9) {
        // Router.replace( /rejectUser );
        return
    }
    return response.data
    },
    (error) => {
    if (error.response && error.response.status && error.response.status === 403) {
    //   logout().then(() => {
    //     // removeToken()
    //   });
    }
    // 网络超时
    if (error.message && error.message.includes( timeout )) {
        console.error( 请求超时 );
        return error.message;
    }
    if (error.response && error.response.status && error.response.status === 500) {
        // 没有权限
        console.error( 接口异常 );
        return error;
    }
    return error;
    },
);
export default service;

3. src下新建types类型文件夹：用于声明类型

// /src/types/service/index.ts

interface resModel {
    code:number
    msg:string
    data:any
    [propname:string]:any
  }

export interface requestModel {
    <T>(data?: T): Promise<resModel>
 }

4.src下新建 api文件，新建login.ts文件 用来写接口配置

import request from  @/utils/request ;
import { requestModel } from  @/types/service ;

// 获取用户信息
export const getLogin: requestModel = () => request({
    url:  /login ,
    method:  get ,
  });

  
// 获取用户信息
export const getUserInfo: requestModel = () => request({
  url:  /info ,
  method:  get ,
});

// 退出登录
export const logout: requestModel = () => request({
  url:  /quit ,
  method:  post ,
});

13. pinia 配置并使用

1. 安装pinia-plugin-persist 用于仓库持久化

pnpm install pinia-plugin-persist

2. 在根目录新建一个store 文件夹 新建 index.ts 文件

import { createPinia } from  pinia 
// 引入持久化插件
import piniaPluginPersist from  pinia-plugin-persist 
const store = createPinia()
// 使用该插件
store.use(piniaPluginPersist)
//导出
export default store

3. 在main.ts文件引入

//引入仓库
import pinia from  @/store/index ;

app
    .use(pinia)//使用
    .mount( #app )

4. 存储配置

#src/store/login.ts
import { defineStore } from  pinia 
//导出仓库方法
export const loginStore = defineStore("login", {
  state: () => ({
    count: 0,
  }),
  getters: {

  },
  actions: {
    //修改vccode的值
    changeCount(value:number){
        console.log( ---loginStore--- , value);
        this.count=value
    },
  },
  //持久化
  persist:{
    enabled:true,
    strategies:[
        {   
            key: login ,//存储的key值
            storage:localStorage,//存储的位置
            paths:[ count ] //默认持久化state的全部，paths指定持久化的对象
        }
    ]
  },
})

14. keepAlive 页面缓存配置

1. 我们之前在学习vue-router时，给每个路由都写了meta，里面写了keepAlive，目前是用它的时候了

  {
    path:  / ,
    component: () => import( ./views/index ),
    name:  index ,
    meta: {
      title:  首页 ,
      keepAlive: true,
    },
  },

2. 目前要把keepAlive写在router-view里面，使用作用域插槽获得页面组件

<!-- src/App.vue -->
<template>
    <router-view v-slot="slotProps">
    <keep-alive>
      <component :is="slotProps.Component"></component>
    </keep-alive>
  </router-view>
</template>

<script setup lang="ts">
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

15. prettier 代码格式校验及整理

1. vscode下载prettier 插件

   

2. 根目录创建.prettierrc文件

{
    "printWidth": 500, // 超过最大值换行
    "tabWidth": 2, // 缩进字节数
    "useTabs": true, // 缩进使用tab。  false使用空格
    "semi": true, // 句尾添加分号
    "singleQuote": true, // // 使用单引号取代双引号
    "quoteProps": "as-needed", // 
    "trailingComma": "es5",// 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
    "jsxSingleQuote": true, // 在jsx中使用单引号取代双引号
    "jsxBracketSameLine": false, // 在jsx中把 >  是否单独放一行
    "bracketSpacing": true,// 在对象，数组括号与文字之间加空格 "{ foo: bar }"
    "arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
    "insertPragma": false,
    "disableLanguages":["vue"], // 不格式化vue文件，vue文件的格式化单独设置
    "proseWrap": "preserve", // 默认值。由于使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
    "endOfLine": "auto", // 结尾是 
 
 

 auto
    "htmlWhitespaceSensitivity": "css",
    "format": {
        "defaultFormatter": {
            "html": "js-beautify-html",
            "js": "prettier"
        },
        "defaultFormatterOptions": {
            "js-beautify-html": {
                "wrap_attributes": "auto",
                "wrap_line_length": 100,
                "end_with_newline": false,
                "semi": true,
                "singleQuote": true
            },
            "prettier": {
                "semi": true,
                "singleQuote": true
            }
        }
    }
}

3.根目录下格式化忽略文件创建 .prettierignore文件

#.prettierignore文件
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*

4.使用格式化推荐两种方式

a.配置整体格式化命令

运行后自动整体格式化,package.json中配置，每次提交代码之前需要运行命令npm run prettier

#package.json
 "script":{
  "prettier ": "prettier --write ."
}

#运行命令  npm run prettier 

b.每次保存文件后自动格式化

这是vscode的步骤，其他编辑器自行根据下面的方案处理。
1、打开编辑器设置页面，输入 files.autoSave 筛出设置项，并把设置项属性选择为 onFocuschange
2、输入 editor.defaultFormatter ，将配置项选择为Prettier （设置默认代码格式化（美化）的插件为Prettier）
3、输入 editor.formatOnSave ，勾选上 “保存时格式化文件。格式化程序必须可用，xxxxxxxx…..”

16. 问题整理

pnpm i @types/webpack-env @types/node -D

#配置tsconfig.json
{
   "compilerOptions": {
       ...
       "types": [
           "node",
           "webpack-env"
       ]
   },
   ...
}