建立自己的组件仓库(vue2)

100 阅读1分钟

建立自己的组件仓库,建立自己的 js 类库

项目效果图展示

效果图1 效果图2 效果图3 效果图4 效果图5 效果图6

项目设置

npm install

用于开发的编译和热重新加载

npm run serve

用于生产的编译

npm run build

整理和修复文件

npm run lint

自定义配置

See Configuration Reference.

项目启动服务(8081) 同时启动 json_server(9999)

npm run start

快速生成组件库

npm install mddir -g

mddir

项目目录结构

|-- develop
|-- .gitignore
|-- babel.config.js
|-- jsconfig.json
|-- package-lock.json
|-- package.json
|-- README.md
|-- vue.config.js
|-- db
| |-- db.json
|-- public
| |-- bg.jpg
| |-- demo1.jpg
| |-- favicon.ico
| |-- index.html
|-- src
|-- App.vue
|-- main.js
|-- assets
| |-- logo.png
|-- components // 外层组件库
| |-- Layout
| | |-- Footer.vue
| | |-- Header.vue
| | |-- index.vue
| | |-- Sliber.vue
| |-- other
|-- docs // 文档说明库
| |-- product
| | |-- bankAmountInput
| | | |-- index.vue
| | |-- bankClock
| | | |-- index.vue
| | |-- bankShandowBox
| | |-- index.vue
| |-- productMethod
| | |-- moment
| | |-- NumToSimplifiedChinese
| | |-- index.vue
| |-- welcome
| |-- index.vue
|-- learn // js 库
| |-- index.js
| |-- NumToSimplifiedChinese.js
|-- package // 封装组件库
| |-- index.js
| |-- BankAmountInput
| | |-- index.vue
| |-- BankClock
| | |-- index.vue
| |-- BankList
| |-- BankShadowBox
| |-- index.vue
|-- router
| |-- index.js
|-- styles
| |-- index.less
| |-- public.less
|-- utils
|-- request.js

使用到的组件库

Vue

element-ui

自己项目库 欢迎 star ~ ~

自己的项目库-码云

自己的项目库-github

项目在持续更新中,有一起的小伙伴可以私信一起做项目