项目地址： gitee.com/Xiaoxiaoxua…

目前暂定版本为 0.1

上班摸鱼时自己封装的，技术还很不成熟去/(ㄒoㄒ)/~~

使用说明

基础

介绍

该框架是通过 vite 构建工具，再基于 vue@3.0.5 所整合的框架

安装依赖

npm i

或者

yarn

建议开发者使用单一命令

开发运行

npm run dev

默认端口： 1428

该状态下的 项目/组件 能实时更新

预览运行

npm run serve

默认端口： 5000

该状态下的 项目/组件 不能实时更新(以运行时的项目样子为主)

打包

npm run build

打包结束后会在项目内生成 dist 文件

内部预设

内部预设 vue-router@4.0.0 、 vuex@4.0.0 、 axios@0.21.1 、 qs 、element-plus

其中 axios 单独封装在 .\utils\request.js 内，建议开发者按业务需求再处理一下

环境依赖

CSS 预处理器

默认内置 sass

其他预处理器可以直接通过命令行安装，无需配置其他内容

# .scss and .sass
npm install -D sass

# .less
npm install -D less

# .styl and .stylus
npm install -D stylus

参考文献

使用时只需要设置 style 的 lang属性即可

运行依赖

UI组件库

PC端：推荐 element-plus

element-plus ：一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库

npm i -S element-plus

自定义主题颜色

位置： ./src/styles/variables.scss

后续操作： element-plus文档

移动端：推荐 vant

vant

# 整合项目使用的是Vue3，故命令不一样
npm i -S vant@next

后续操作： 全部引入 、 按需引入 、 vite中 按需引入

封装js工具/方法

request.js

请求对象axios单独封装，按照业务需求进行额外配置

debounce.js

单独封装函数防抖，内部含有 立即执行后防抖、 防抖后执行 两种类型

throttle.js

单独封装函数节流，内部含有 立即执行后节流、 节流后执行 两种类型

vite配置文件

vite配置文件在项目的vite.config.js内

常用

开发运行端口

server => port

export default defineConfig({
  // ......
  server: {
    port: '1428',
  // ......
  }
})

默认启动浏览器

server => open

export default defineConfig({
  // ......
  server: {
    open: true,
  // ......
  }
})

跨域请求

server => proxy

export default defineConfig({
  // ......
  server: {
    proxy: {
      '^/api': {
        target: 'http://127.0.0.1:3000', // 后端地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
   // ......
  }
})

配置文件系统路径的别名

resolve => alias

export default defineConfig({
  // ......
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  // ......
})

现在 @ 指向 ./src 了

其他配置文件

project.config.js

文件位置： /src

内容： 配置 生产环境下和上线版本下 的后端地址

.eslintrc.js

文件位置： 项目目录

内容： 配置 standrad 风格的代码规范

禁用方法： 删除或者注释 文件第8行

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:vue/essential',
    'standard'  /* 禁用这个 */ 
  ],
  ......
}

注意： 该风格不会影响项目运行

暂未解决

开发运行后

[@vue/compiler-sfc] <script setup> is still an experimental proposal.
Follow its status at https://github.com/vuejs/rfcs/pull/227.

[@vue/compiler-sfc] When using experimental features,
it is recommended to pin your vue dependencies to exact versions to avoid breakage.

[@vue/compiler-sfc] `defineProps` is a compiler macro and no longer needs to be imported

目前未知出现原因，需后续学习

更新时间：2021年8月31日

更新版本：0.0.5

更新日志

0.0.5

使用说明=>环境依赖=>CSS 预处理器 增加内设预处理器 sass

使用说明=>运行依赖=>UI组件库=>PC端：推荐 element-plus 增加自定义主题颜色

暂未解决 移除了 element-plus主题配置

0.0.4

使用说明 => 基础 => 内部预设 增加了 ui组件库 element-plus

使用说明 添加封装js工具/方法，并且解释了内部工具/方法

暂未解决 添加element-plus 自定义主题问题

0.0.3

使用说明 => vite配置文件 增加了 配置文件系统路径的别名

使用说明=> 其他配置文件 增加了 .eslintrc.js

0.0.2

使用说明 => 基础 => 开发运行 修改默认端口号 原 3000 现 1428

使用说明 => 基础 => 内部预设 增加了 qs

使用说明 增加了vite配置文件

使用说明 增加了其他配置文件

0.0.1

创建并书写了能想到的使用手册