vue3 vite ts vueRouter vuex axios element-plus搭建项目框架

本项目框架是基于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<RouteRecordRaw> = [
  {
    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:

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

<template>
  <router-view/>
</template>

<style scoped>
</style>

home.vue:

<script setup lang="ts">

</script>
<template>
  <h1>home</h1>
</template>

<style scoped>
</style>

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的插件](https://eslint.vuejs.org/)
// `@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<{}, {}, any>;
    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博客