本项目框架是基于vue3 + vite + TypeScript， 对vite 快速创建的框架做出的二次封装。

一、创建基础框架

npm init vite@latest

 项目框架初步创建成功，下面是进行二次的封装

二、配置文件引用别名

vite.config.ts:import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import path from "path";// https://vitejs.dev/config/export default defineConfig({  plugins: [vue()],  resolve: {    alias: {      "@": path.resolve(__dirname, "src"),    }  },})

tsconfig.json：{  "compilerOptions": {   ......    "baseUrl": ".",    "paths": {      "@/*":["src/*"]    }  },}

如果编辑器中 path、__dirname上面显示红色波浪线，说找不到path,那就安装下：

cnpm install --save-dev @types/node

三、安装vue-router并配置路由

1、命令行安装

cnpm install vue-router --save

2、修改文件

在 src 文件下新增 router 文件夹 => index.ts 文件和routes.ts文件，src文件夹下新建pages文件夹，pages文件夹下新建home.vue

 

routes.ts:import { RouteRecordRaw } from 'vue-router';//对外暴露配置路由export const routes: Array = [  {    path: '/',    name: 'home',    component: () => import('@/pages/home.vue'), // 注意这里要带上 文件后缀.vue    meta: {}  },]

 路由这里要注意：

1、引入的文件后缀名 .vue不能省掉，vue2是可以，vue3不行

2、其余找不到的路由去404页面，vue2与vue3写法也有区别：

    //vue2写法：    {        path: '*',        redirect: '/404'    }    //vue3写法    {      path: '/:catchAll(.*)*',    // 匹配所有路径  vue2使用*   vue3使用/: pathMatch(.*)* 或 /: pathMatch(.*) 或 /: catchAll(.*)      redirect: '/404',    },

index.ts://通过vue-router插件实现模板路由配置import { createRouter, createWebHashHistory } from 'vue-router'import { routes } from './routes'//创建路由器const router = createRouter({  //路由模式根据需求选择  history: createWebHashHistory(),  routes: routes,})export default router

App.vue:  

home.vue:  
home

main.ts:import { createApp } from 'vue'import './style.css'import App from './App.vue'import router from './router/index'const app = createApp(App)app.use(router)app.mount('#app')

四、引入sass

1、命令行安装

cnpm install sass --save-dev

2、修改文件

src文件夹下的asstes文件下新建css、img、js三个文件夹，到时候css就作为整体存放样式的文件

两个文件夹，分别作为公共样式和页面样式：公共样式里分为全局变量及全局样式

sass全局变量为方便使用可以在vite.config.ts中做引入：

 

css:{preprocessorOptions: {// 全局sass变量引入scss:{additionalData: '@use "./src/assets/css/commonCss/globalVariate/index.scss" as *;',}},},

 main.ts中引入公共样式：

五、安装axios

1、命令行安装

cnpm install axios --save

2、修改文件

src文件夹下新建axios文件，做axios的二次封装

六、安装vuex

1、命令行安装

cnpm install vuex --save

2、修改文件

src文件夹下新建vuex文件

七、引入element-plus组件库

1、命令行安装

cnpm install element-plus @element-plus/icons-vue --save

八、安装初始化样式、页面进度条、时间处理器

1、命令行安装

cnpm install normalize.css  nprogress moment --save

cnpm install qs @vueuse/core --save

九、安装echarts

1、命令行安装

cnpm install echarts --save

十、配置打包变量

分为三个环境：开发、测试、生产

 获取变量

所有安装已经结束啦，看下最终安装的：

"dependencies": {    "@element-plus/icons-vue": "^2.3.1",    "@vueuse/core": "^10.9.0",    "axios": "^1.6.8",    "echarts": "^5.5.0",    "element-plus": "^2.7.1",    "moment": "^2.30.1",    "normalize.css": "^8.0.1",    "nprogress": "^0.2.0",    "qs": "^6.12.1",    "vue": "^3.4.21",    "vue-router": "^4.3.2",    "vuex": "^4.1.0"  },  "devDependencies": {    "@types/node": "^20.12.7",    "@vitejs/plugin-vue": "^5.0.4",    "rollup-plugin-visualizer": "^5.12.0",    "sass": "^1.75.0",    "terser": "^5.30.4",    "typescript": "^5.2.2",    "vite": "^5.2.0",    "vite-plugin-compression": "^0.5.1",    "vue-tsc": "^2.0.6"  }

十一、vite.config.ts配置文件修改，做打包各项优化

1、分析打包后各个的大小体积

1.1、命令行安装

cnpm install rollup-plugin-visualizer --save-dev

1.2、修改代码

import { visualizer } from 'rollup-plugin-visualizer'export default defineConfig({  plugins: [     // 打包体积分析    visualizer({      open: true,      filename: 'visualizer.html' //分析图生成的文件名    }),  ],})

打包完成会生成一个html文件，就可以看到各个包的体积大小

2、配置打包文件分类输出

build: {    rollupOptions: {      output: {        chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称        entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称        assetFileNames: '[ext]/[name]-[hash].[ext]', // 资源文件像 字体，图片等        // 最小化拆分包 node_modules的包逐个打包 将需要分离的包单独的打包出来        manualChunks(id) {          if (id.includes('node_modules')) {            return id.toString().split('node_modules/')[1].split('/')[0].toString();          }        }      }    }}

3、开启Gzip文件压缩

3.1命令行安装

cnpm install vite-plugin-compression --save-dev

3.2修改文件

//Gzip文件压缩import viteCompression from 'vite-plugin-compression'export default defineConfig({  plugins: [     //开启Gzip压缩    viteCompression({      verbose: true, // 是否在控制台中输出压缩结果      disable: false,      threshold: 1024, // 如果体积大于阈值，将被压缩，单位为b，体积过小时请不要压缩，以免适得其反      algorithm: 'gzip', // 压缩算法，可选['gzip'，' brotliccompress '，'deflate '，'deflateRaw']      ext: '.gz',      deleteOriginFile: true // 源文件压缩后是否删除(我为了看压缩后的效果，先选择了true)    })  ],})

4、开启图片压缩

4.1、命令行安装

cnpm install vite-plugin-imagemin --save-dev

4.2、修改文件

// 图片压缩import viteImagemin from 'vite-plugin-imagemin'export default defineConfig({  plugins: [     // 图片资源压缩    viteImagemin({      gifsicle: {        // gif图片压缩        optimizationLevel: 3, // 选择1到3之间的优化级别        interlaced: false // 隔行扫描gif进行渐进式渲染      },      optipng: { // png        optimizationLevel: 7 // 选择0到7之间的优化级别      },      mozjpeg: {// jpeg        quality: 20 // 压缩质量，范围从0(最差)到100(最佳)。      },      pngquant: {// png        quality: [0.8, 0.9], // Min和max是介于0(最差)到1(最佳)之间的数字，类似于JPEG。达到或超过最高质量所需的最少量的颜色。如果转换导致质量低于最低质量，图像将不会被保存。        speed: 4 // 压缩速度，1(强力)到11(最快)      },      svgo: {        plugins: [          // svg压缩          {            name: 'removeViewBox'          },          {            name: 'removeEmptyAttrs',            active: false          }        ]      }    }),  ],})

5、terser 压缩和去除console+debugger

5.1、命令行安装

cnpm install terser --save-dev

5.2、修改文件

export default defineConfig({   build: {    minify: 'terser',    // 清除所有console和debugger    terserOptions: {      compress: {        drop_console: true,        drop_debugger: true      }    }  }})

打包优化借鉴于此处，大家可以去看看：基于vite对vue3项目打包优化经验 【前端性能优化】 - 掘金

最终，图片压缩安装时报错了，后面再看看原因吧，呜呜呜~~~

十二、安装 eslint+Prettier做代码校验和代码格式化

1、安装

//安装cnpm install eslint eslint-plugin-vue prettier eslint-plugin-prettier eslint-config-prettier -D

 这里注意个问题：安装最新的可能导致与nodejs版本不兼容报错，所以我直接写进package.json，安装固定版本的

"devDependencies": {// typescript eslint 解析相关的包"@typescript-eslint/eslint-plugin": "^7.9.0","@typescript-eslint/parser": "^7.9.0",// eslint相关的包"eslint": "^8.17.0","eslint-plugin-vue": "^9.1.0","vue-eslint-parser": "^9.0.2",// prettier相关的包"prettier": "^2.6.2","eslint-config-prettier": "^8.5.0","eslint-plugin-prettier": "4.1.0",}

2、根目录下创建.eslintrc.js

// `eslint`: EsLint的核心代码// `eslint-plugin-vue`：为Vue使用Eslint的插件// `@typescript-eslint/parser`：ESLint的解析器，用于解析typescript，从而检查和规范Typescript代码// `@typescript-eslint/eslint-plugin`：这是一个ESLint插件，包含了各类定义好的检测Typescript代码的规范// "eslint": "^8.17.0",// "eslint-plugin-vue": "^9.1.0",// "vue-eslint-parser": "^9.0.2",// "@typescript-eslint/eslint-plugin": "5.30.0",// "@typescript-eslint/parser": "5.30.0",module.exports = {  env: {    browser: true,    es2021: true,    node: true,  },  parser: "vue-eslint-parser", //这个不能少，要不然检测无效  //优先级低于parse的语法解析配置  parserOptions: {    parser: "@typescript-eslint/parser",    sourceType: "module",    ecmaVersion: 2020,    ecmaFeatures: {      jsx: true,    },  },  // 继承已有的规则  extends: [    "eslint:recommended", // 使用推荐的eslint    "plugin:vue/vue3-recommended", // 使用插件支持vue3    //使用ts eslint    "plugin:@typescript-eslint/recommended",    //    "prettier",  ],  // eslint-plugin-vue  plugins: [    "vue", // 引入vue的插件 vue  eslint-plugin-vue    // 这个包需要安装了第7步的三个包再引入    "prettier", // 引入规范插件  prettier    "@typescript-eslint",  ],  overrides: [    {      files: [        "*.js",        "*.jsx",        "*.vue",        "src/**/*.js",        "src/**/*.vue",        "src/*.js",        "src/*.vue",      ],      rules: {        "no-undef": "off",      },    },  ],  globals: {    defineProps: "readonly",    defineEmits: "readonly",    defineExpose: "readonly",    withDefaults: "readonly",  },  // 这里时配置规则的,自己看情况配置  rules: {    // js/ts    // camelcase: ["error", { properties: "never" }], // 要求使用骆驼拼写法命名约定,不检查属性名称    // camelcase: "warn", // 要求使用骆驼拼写法命名约定    // "no-console": "warn", // 禁止出现console    "no-debugger": "warn", // 禁止出现debugger    "no-duplicate-case": "warn", // 禁止出现重复case    // "no-empty": "warn", // 禁止出现空语句块    // "no-extra-parens": "warn", // 禁止不必要的括号    "no-func-assign": "warn", // 禁止对Function声明重新赋值    "no-unreachable": "warn", // 禁止出现[return|throw]之后的代码块    // "no-else-return": "warn", // 禁止if语句中return语句之后有else块    // "no-empty-function": "warn", // 禁止出现空的函数块    "no-lone-blocks": "warn", // 禁用不必要的嵌套块    // "no-multi-spaces": "warn", // 禁止使用多个空格    "no-redeclare": "warn", // 禁止多次声明同一变量    "no-return-assign": "warn", // 禁止在return语句中使用赋值语句    "no-return-await": "warn", // 禁用不必要的[return/await]    "no-self-compare": "warn", // 禁止自身比较表达式    // "no-useless-catch": "warn", // 禁止不必要的catch子句    // "no-useless-return": "warn", // 禁止不必要的return语句    "no-multiple-empty-lines": "warn", // 禁止出现多行空行    "no-useless-call": "warn", // 禁止不必要的.call()和.apply()    "no-var": "warn", // 禁止出现var用let和const代替    "no-delete-var": "off", // 允许出现delete变量的使用    "no-shadow": "off", // 允许变量声明与外层作用域的变量同名    "dot-notation": "warn", // 要求尽可能地使用点号    "default-case": "warn", // 要求switch语句中有default分支    // eqeqeq: "warn", // 要求使用 === 和 !==    // curly: "warn", // 要求所有控制语句使用一致的括号风格    // "space-before-blocks": "warn", // 要求在块之前使用一致的空格    // "space-in-parens": "warn", // 要求在圆括号内使用一致的空格    // "space-infix-ops": "warn", // 要求操作符周围有空格    // "space-unary-ops": "warn", // 要求在一元操作符前后使用一致的空格    // "switch-colon-spacing": "warn", // 要求在switch的冒号左右有空格    // "arrow-spacing": "warn", // 要求箭头函数的箭头前后使用一致的空格    // "array-bracket-spacing": "warn", // 要求数组方括号中使用一致的空格    // "brace-style": "warn", // 要求在代码块中使用一致的大括号风格    indent: ["warn", 2], // 要求使用JS一致缩进2个空格    // "max-depth": ["warn", 4], // 要求可嵌套的块的最大深度4    // "max-statements": ["warn", 100], // 要求函数块最多允许的的语句数量20    // "max-nested-callbacks": ["warn", 3], // 要求回调函数最大嵌套深度3    // "max-statements-per-line": ["warn", { max: 1 }], // 要求每一行中所允许的最大语句数量    // quotes: ["warn", "single", "avoid-escape"], // 要求统一使用单引号符号    //prettier    "prettier/prettier": ["error", { endOfLine: "auto" }], //结尾处空格自动    // vue    "vue/no-v-html": "off",    "vue/require-default-prop": "off",    "vue/require-explicit-emits": "off",    "vue/multi-word-component-names": "off",    "vue/prefer-import-from-vue": "off",    "vue/no-v-text-v-html-on-component": "off",    // 取消关闭标签不能自闭合的限制设置    "vue/html-self-closing": [      "error",      {        html: {          void: "always",          normal: "always",          component: "always",        },        svg: "always",        math: "always",      },    ],    // "vue/require-default-prop": 0, // 关闭属性参数必须默认值    // "vue/singleline-html-element-content-newline": 0, // 关闭单行元素必须换行符    // "vue/multiline-html-element-content-newline": 0, // 关闭多行元素必须换行符    // 要求每一行标签的最大属性不超五个    // "vue/max-attributes-per-line": ["warn", { singleline: 5 }],    // 要求html标签的缩进为需要2个空格    // "vue/html-indent": [    //   "warn",    //   2,    //   {    //     attribute: 1,    //     baseIndent: 1,    //     closeBracket: 0,    //     alignAttributesVertically: true,    //     ignores: [],    //   },    // ],    // ts    "@typescript-eslint/no-explicit-any": "off", // 关闭定义any的错误    "@typescript-eslint/explicit-module-boundary-types": "off",    "@typescript-eslint/no-non-null-assertion": "off",    "@typescript-eslint/no-non-null-asserted-optional-chain": "off",    "@typescript-eslint/consistent-type-imports": [      "error",      { disallowTypeAnnotations: false },    ],    "@typescript-eslint/ban-ts-comment": ["off", { "ts-ignore": false }],    "@typescript-eslint/no-empty-function": "off",  },};

打开vscode-setting.json:

{  "workbench.colorTheme": "Default Dark Modern",  "editor.fontSize": 18,  "security.workspace.trust.untrustedFiles": "open",  //自动保存  "editor.formatOnSave": true,  //配置路径文件名  "prettier.configPath": ".prettierrc.json",  //默认格式化为prettier  "editor.defaultFormatter": "esbenp.prettier-vscode",  // 添加vue支持  "eslint.validate": ["javascript", "javascriptreact", "vue", "html"],  // #让prettier使用eslint的代码格式进行校验  "prettier.eslintIntegration": true,  "editor.codeActionsOnSave": {},  "prettier.endOfLine": "auto",  "editor.indentSize": "tabSize"}

3、根目录下创建.prettierrc.json

{  "useTabs": false,  "tabWidth": 2,  "jsxSingleQuote": false,  "singleQuote": false,  "endOfLine": "lf",  "semi": true,  "trailingComma": "es5"}

 4、安装Prettier插件

找到扩展程序，安装一下：

 点设置图标-扩展设置-输入 .prettierrc.json 路径

 点设置-扩展-输入框输入 Default Formatter  ，选择 prettier 设置为默认的格式化程序

 输入框再输入  Format On Save， 勾选 在保存时格式化文件

十三、项目中遇到的问题

1、无法找到模块“xxxxxx”的声明文件

找到vite-env.d.ts 文件，添加声明：

// 解决引入模块的报错提示declare module "nprogress";

2、无法找到模块“xxx.vue”的声明文件

找到vite-env.d.ts 文件，添加声明：

// 解决引入.vue模块的报错提示declare module "*.vue" {    import { DefineComponent } from "vue";    const component: DefineComponent;    export default component;}

3、无法找到模块“xxx.js”的声明文件

找到vite-env.d.ts 文件，添加声明：

// 解决引入.js模块的报错提示declare module '*.js'

4、无法找到模块“vuex”的声明文件

找到tsconfig.json 文件，添加：

{  "compilerOptions": {  ...    "paths": {      "vuex": ["./node_modules/vuex/types"]     }    ...  }}

使用 “paths” 映射,在找不到模块的默认路径时,将其映射到类型定义文件

好了，后面再更新吧，有用的点个赞啦~~~

关于vue2升级vue3也有一篇，都没有很全，后面再学习补充，这里放个链接：

vue2项目升级至vue3(vue3+vite+ts)_vue2项目升级为vue3项目-CSDN博客