convue is a plugin for vite based on vite and vue3 that gives you a set of experiences for rapid development projects, similar to nuxt and umi.js.Reference documents:https://ziping-li.github.io/convue/.
- umi.js does not support vue at the moment, and nuxt does not yet have perfect support for vue3 and vite.
- convue is a plugin for vite, which is closer to the official vue base ecosystem and can integrate perfectly with other base libraries.
- convue is only a development dependency, compared to other frameworks, the size of the build is almost 0.
- install convue.
yarn add convue -D
- Use it in your project
Use it in vite.config.js
import convue from 'convue';
export default defineConfig({
plugins: [
...convue({}),
],
});
- Introduce the required packages in main.js, or leave them out if you don't need them
import { createApp } from 'vue';
import App from '. /src/App.vue';
import router from 'pages-generated';
import globalComponent from 'components-generated';
import store from 'store-generated';
import plugin from 'plugin-generated';
import i18n from 'locale-generated';
const app = createApp(App);
window.__APP__ = app; // To allow middleware to get the component instance, remove the line if you don't need to use it
app.use(router);
app.use(globalComponent);
app.use(store);
app.use(plugin);
app.use(i18n);
app.mount('#app');
convue provides a set of scaffolding tools for initializing projects, currently supporting both sfc (vue single file) and tsx development modes.
# step 1
yarn global add convue-cli
# step 2 - type convue on the command line, followed by a prompt to do
convue
# step 3 - enter the project file
npm run dev
convue uses an agreed-upon directory format, so we need to follow this development style. It is often an effective measure to achieve uniformity and efficiency in a project.
If you need to change the directory structure, you can refer to the configuration item.
Take the tsx form as an example.
├── public
├── src
├─ components
├── layouts
├─ default.tsx
├─ locales
├─ en-US.ts
├── zh-CN.ts
├─ middleware
├── pages
└── index.tsx
├─ plugins
├─ store
└── App.tsx
├── .babelrc
├── .eslintrc.js
├── .gitignore
├── .prettierrc
├─ .stylelintrc.json
├── index.html
├─ package.json
├─ shims.d.ts
├─ tsconfig.json
├─ vite.config.ts
├── yarn.lock