sailing-view-plus
v0.0.3
Published
- vue3 - vue-router4 - pinia - vite - type script - echart - mitt - element plus - axios - eslint 代码校验 - prettierrc 代码格式化
Downloads
5
Readme
vue3 脚手架技术栈
- vue3
- vue-router4
- pinia
- vite
- type script
- echart
- mitt
- element plus
- axios
- eslint 代码校验
- prettierrc 代码格式化
安装依赖
$ npm install
运行
$ npm run dev
打包
$ npm run build
发布
$ npm login --npmaccount
$ npm publish
第三方项目应用
$ npm install sailing-view-plus
//main.ts中
import { createApp, Directive } from 'vue';
import SailingViewPlus, { SailingDirectives } from 'sailing-view-plus';
import 'sailing-view-plus/dist/style.css';
const app = createApp(App);
app.use(SailingViewPlus);
Object.keys(SailingDirectives).forEach((key) => {
app.directive(key, (SailingDirectives as { [key: string]: Directive })[key]);
});
//env.d.ts.ts
declare module 'sailing-view-plus';
注意事项
由于 vue2 和 vue3 语法不一样,vscode 开发需要安装特有的 vue 语法插件(volar)
项目目录
vue3-cli
├── .vscode
│ ├── extensions.json //IDE 插件配置
│ └── settings.json //IDE配置
├── src
│ ├── assets //项目静态资源
│ │ ├── error_images
│ │ ├── headerBg_light.png
│ │ ├── loading.gif
│ │ ├── logo.png
│ │ └── sailing-logo.png
│ ├── packages //组件包源码
│ ├── layout //公用布局页
│ ├── libs //工具函数
│ ├── models //ts 函数,对象接口
│ │ ├── interfaces
│ │ └── types
│ ├── router //路由
│ │ ├── index.ts
│ │ └── routes.ts
│ ├── store //状态管理
│ │ ├── modules
│ │ └── index.ts
│ ├── styles //全局样式
│ │ ├── index.less
│ │ └── scrollbar.less
│ ├── views //视图
│ ├── App.vue //根组件
│ ├── env.d.ts //全局声明文件
│ └── main.ts //入口文件
├── .eslintrc.js //eslint 代码校验
├── .prettierrc.js //代码自动格式化
├── README.md //说明文件
├── index.html //模板页
├── package.json //项目配置信息
├── tsconfig.json //ts配置信息
└── vite.config.ts //打包构建配置信息