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 SailingViewPlusBeta from 'sailing-view-plus';
import 'sailing-view-plus/dist/style.css';

const app = createApp(App);
app.use(SailingViewPlusBeta);

//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             //打包构建配置信息