0.0.2 • Published 1 year ago

lower-ui v0.0.2

Weekly downloads
-
License
-
Repository
-
Last release
1 year ago

nvm(nodejs 版本管理)

  1. 下载地址：https://github.com/coreybutler/nvm-windows/releases
  2. 常用命令： nvm list 查看电脑安装的 node 版本 nvm list available 查看官网版本 nvm install 16.14.2 安装指定的版本号 nvm uninstall 16.14.2 卸载指定的版本号 nvm use 16.14.2 切换到指定的版本号

nrm （包源管理）

  1. npm install -g nrm
  2. 常用命令： nrm ls 查看本机安装的所有包源 nrm use taobao 切换到指定名称的包源 nrm add taobao https://registry.npmmirror.com 添加包源 nrm test taobao 测试延时

VSCode 必备插件

  1. Chinese(中文简体)
  2. EsLint (语法规范)
  3. Path intellisense (路径别名设置)
  4. prettier CodeFormat (代码格式化)
  5. Vue Language Features (Volar)
  6. TypeScript Vue Plugin (Volar)
  7. VSCode Great Icons 文件图标
  8. open in browser
  9. Windi CSS Intellisense
  10. Iconify IntelliSense

pnpm （全局安装 pnpm）

npm install -g pnpm

Vue 3 + TypeScript + Vite

创建项目

  1. npm create vite
  2. 选择 vue 和 vue-ts

初始化项目

  1. npm i --安装依赖
  2. 选择 vue 和 vue-ts
  3. 选清理项目组件和资源

安装路由

  1. npm i vue-router@next -S
  2. 新建 src/modules/router.ts 并实现路由
  3. 在 main.ts 中导入和挂在到 app

安装 md文件插件

  1. npm i vite-plugin-md -D
  2. 新建 src/modules/router.ts 并实现路由
  3. 在 main.ts 中导入和挂在到 app

配置scss

  1. npm i sass -S
  2. 配置 vite.config.ts

css: {

 preprocessorOptions: {
    scss: {
        additionalData: `@import "./src/assets/index.scss";`,
    },
},

},

第六步：配置路径别名

  1. npm i sass -S
  2. npm i @types/node -D
  3. tsconfig.json 中配置 baseUrl 和 paths
  4. 安装 path-intellisense 插件
  5. 在文件--首选项--设置--搜索 set 选择在 settings.json 配置 "path-intellisense.mappings": { "@": "${workspaceRoot}/src" },

第七步：配置eslint代码规范和自动格式化

  1. npm i prettier -D 2.新建.prettierrc 文件
  2. npx prettier --write .
  3. npm i eslint -D
  4. npx eslint --init a).选择 to check syntax,fand problems and enforce code style b).选择 Javascript Modules(import/export) c).全选 Browser 和 Node d).选择 use a popular style guide e).选择 Aribin f).选择 Javascript
  5. npm i eslint-plugin-prettier eslint-config-prettier -D --解决冲突命令
  6. 修改.eslintrc.cjs 文件 extends extends: 'plugin:vue/essential', 'airbnb-base', 'plugin:prettier/recommended' ,
  7. npm i 重新安装新增的插件
  8. npx prettier --write . 再重新安装 prettier 包 .prettier 配置说明 printWidth:150 最大行长 tabwidth:2 指定缩进的空格数 useTabs:false 使用 tab 缩进 不是空格 semi:true 末尾加分号 singleQuote:false 是否使用单引号 bracketSameLine:true 将多行（Html、JSX、Vue）元素放在最后一行的末尾而不是下一行 vueIndentScriptAndStyle: true 脚本和样式标签缩进 endOfLine:"lf" lf 仅换行 crlf 回车+换行 cr 仅回车 auto 保持现有的行尾 singleAttributePerLine:false 每行只声明单个属性

第八步：安装elementplus

  1. npm i element-plus -D

第九步：安装 axios

  1. npm i axios -S
  2. 新增 src/modules/axios.ts 并封装

第十步：安装 NProgress进度条

  1. npm i --save nprogress
  2. npm i --save @types/nprogress

第十一步：安装VueUse

  1. npm i @vueuse/integrations -D
  2. npm i universal-cookie -D

第十二步：组件自动导入

  1. npm i unplugin-vue-components -D
  2. 在 vite.config.ts 中配置 import Components from "unplugin-vue-components/vite";
  3. 配置 Components({ dts: "src/components.d.ts", resolvers: NaiveUiResolver(), ElementPlusResolver(), }),

第十三步：Api自动导入

  1. npm i unplugin-auto-import -D
  2. npm i local-pkg -D
  3. 配置 import AutoImport from 'unplugin-auto-import/vite' AutoImport({ dts: "src/auto-imports.d.ts", imports: "vue", "pinia", "vue-i18n", "vue-router", vueTemplate: true, }),

第十四步：按需引入图标库

  1. npm i unplugin-icons -D npm i @iconify/vue
  2. import Icons from 'unplugin-icons/vite'
  3. 配置 plugins: Icons({ autoInstall: true, }),

第十五步：安装windicss

  1. npm i -D vite-plugin-windicss windicss
  2. 配置 import WindiCSS from 'vite-plugin-windicss' plugins: WindiCSS(),
  3. 在 man.ts 中引入样式 import 'virtual:windi.css'

第十六步：使用gzip打包压缩资源

  1. npm i vite-plugin-compression -D
  2. import viteCompression from 'vite-plugin-compression';
  3. 配置 plugins: viteCompression({algorithm: 'gzip',})

第十七步：生成环境日志移除

  1. npm i vite-plugin-removelog -D
  2. import Removelog from 'vite-plugin-removelog'
  3. 配置 plugins: Removelog()

第十八步：布局系统

  1. npm i vite-plugin-vue-meta-layouts -D
  2. 配置 import MetaLayouts from 'vite-plugin-vue-meta-layouts' plugins: MetaLayouts()

第十九步：按需加载 iconify 图标

  1. npm i unplugin-icons -D 安装图表集 npm i @iconify/json -D
  2. import Icons from 'unplugin-icons/vite'
  3. import IconsResolver from 'unplugin-icons/resolver';
  4. 配置 plugins: Icons({ autoInstall: true, }),
  5. 在 Components:resolvers:include 中配置 include: IconsResolver(),
  6. 网址1 https://icones.netlify.app/
  7. 网址2 https://icon-sets.iconify.design

第二十步：集成 animate.css

  1. npm install animate.css --save
  2. npm uninstall animate.css

第二十一步：全屏组件 npm install --save screenfull

第第二十二步：集成 swiper 1. npm install swiper

引入基础轮播组件

import {Swiper, SwiperSlide} from 'swiper/vue';
# 引入分页，前进后退，立方体效果，自动循环 模块
import {Pagination, Navigation, EffectCube, Autoplay} from "swiper";
# 基础样式
import 'swiper/css';
# 立方体样式
import "swiper/css/effect-cube";
# 前进后退样式
import "swiper/css/navigation";
# 分页样式
import "swiper/css/pagination";

第n步：集成 vue-request

  1. npm install vue-request@next
  2. npm uninstall vue-request

第n步：vite 预设热重启服务插件

  1. npm i vite-plugin-restart -D
  2. 配置 ViteRestart({ restart: '/src/presets/.ts', '/src/assets/style/**/', '/src/presets/*/', }),
  3. 卸载 npm uninstall vite-plugin-restart

第n步：滑块图片验证插件 1.npm install --save vue3-slide-verify

安装美化拖拽效果 1.npm i draggable-polyfill 2.import draggable-polyfill

highlight.jsvuevue-router
@everything-registry/sub-chunk-2104
0.0.2

1 year ago

0.0.1

1 year ago