A Vite plugin that unifies team specifications and does not duplicate things

Since the team has been using Nuxt.js, I really like many of the features, especially the contracted directory structure. Vite is really great on touch, and while it lacks a lot of features, it makes up for most of them. During the New Year holiday, I wrote a Vite plug-in with a contracted directory structure. Access address: document | dead simple

Quick learning

Install convue.

yarn add convue -D
Copy the code

For use in projects

It is used in viet.config.js

import convue from 'convue';

export default defineConfig({
  plugins: [
    ...convue({}),
  ],
});
Copy the code

Import the required packages in main.js, or not if you don’t

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; // In order for middleware to get a component instance, remove this line if it is not needed

app.use(router);
app.use(globalComponent);
app.use(store);
app.use(plugin);
app.use(i18n);
app.mount('#app');
Copy the code

Use scaffolding

Convue provides a scaffolding tool for initiating projects and currently supports both SFC (VUE single file) and TSX development modes.

# step 1
yarn global add convue-cli
# step 2 - Type convue on the command line and you will be prompted for subsequent actions
convue
# step 3 - Enter the project file
npm run dev
Copy the code

Project directory

Convue takes the form of a contracted directory, so we need to follow this development pattern. Often in the project to achieve uniform standards, improve efficiency, this is an effective measure.

If you need to change the directory structure, refer to configuration items.

Take the TSX form as an example:

. ├ ─ ─ public ├ ─ ─ the SRC ├ ─ ─ components ├ ─ ─ layouts ├ ─ ─defaultThe TSX ├ ─ ─ locales ├ ─ ─ en - US. Ts ├ ─ ─ useful - CN. Ts ├ ─ ─ middleware ├ ─ ─ pages └ ─ ─ index. The TSX ├ ─ ─ the plugins ├ ─ ─ store └ ─ ─ App. TSX ├ ─ ─ . Babelrc ├ ─ ─. Eslintrc. Js ├ ─ ─ the gitignore ├ ─ ─ the prettierrc ├ ─ ─ the stylelintrc. Json ├ ─ ─ index. The HTML ├ ─ ─ package. The json ├ ─ ─ Shims.d. s ├─ tsconfig.json ├─ Vite.config. Ts ├─ yarnCopy the code

routing

Convue default automatically load/SRC/pages directory. The vue. | js. | JSX. | ts |. The TSX files, and generate the routing for the file name.

For example, the route address of the index.tsx file in the/SRC /pages directory is /, and the route address of the user. TSX file is /user.

Dynamic routing

Dynamic routing naming rules for _param [. Vue. | js. | JSX. | ts |. The TSX]

Adding Routing Information

Add a route tag to the/SRC /pages/index.tsx file.

{
  /* 
      
        name: 'test' meta: title: 111 
       */
}

import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    return () = > <div></div>; }});Copy the code

Comments are not required for SFC (VUE single file).

The route tag support grammar have ‘json5’ | ‘json’ | ‘yaml, defaults to yaml, if it is a json syntax is to specify the route lang.

{
  /* 
      
        { name: 'test', meta: { title: 111 } } 
       */
}

import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    return () = > <div></div>; }});Copy the code

Route 404 is redirected

If a 404 page exists under/SRC /pages, redirect to /404; otherwise redirect to /.

Layout

A Layout is a container component for a common area of the site.

Convue default will load/SRC/layouts directory. The vue. | js. | JSX. | ts |. The TSX files, and introduced in the routing table, the default load is default [. Vue. | js. | JSX. | ts |. TSX].

The file must contain the router-view component.

import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    return () = > (
      <div>
        <span>default layout</span>
        <router-view></router-view>
      </div>); }});Copy the code

Change the layout of the current page

Add a Route tag to the file and specify layout in the meta. The layout value corresponds to the file name under/SRC /layouts.

{
  /* 
      
        name: 'test' meta: title: 111 layout: empty 
       */
}

import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    return () = > <div></div>; }});Copy the code

For other rules, see Layout configuration items.

The middleware

Convue default will load/SRC/middleware directory. The ts |. Js files, and perform in the routing of the global front hook.

For example, write an Auth middleware

export default ({ redirect, store }) => {
  if(! store.state.isLogined) { redirect('/login'); }};Copy the code

parameter

These parameters are provided for easy development:

Query: Query parameter of the current route
Params: Params parameter of the current route
Route: indicates the information about the current route
Redirect: A redirection function that takes a URL as an argument
Store: global status access
App: current VUE instance
Env: list of environment variables

For other rules, see Page configuration item.

loading

Type: string
Default: undefined

Setting the loading color of the page before the Vue instance is created

Please refer to head for instructions.

progress

Type: boolean | Progress
Default: true

Set the progress bar during route switchover

If set to false, it will not be displayed and the code will not be introduced.

The type of the Progress

export interfaceProgress { color? :string; size? :string;
}
Copy the code

Passing in an object, you can set the color and size of the progress bar.

Global store

Convue default will load/SRC/store directory. Js. | ts file, and automatically in vuex configuration.

The content structure of the file is consistent with vuEX as follows

export default {
  state: () = > ({}),
  mutations: {},
  actions: {},
  getters: {}};Copy the code

instructions

. / SRC/store under the index [js. | ts] will be directly loaded vuex item, other documents will be in the form of module configuration.

For example, there are two files, index.js and user.js.

index.js

export default {
  state: () = > ({
    text: 'hello',})};Copy the code

user.js

export default {
  state: () = > ({
    name: 'convue',})};Copy the code

So the Vuex Store is actually structured like this

export default {
  state: () = > ({
    text: 'hello',}).modules: {
    user: {
      state: () = > ({
        text: 'convue',}),},},};Copy the code

For other rules, see Store Configuration items.

Global components

Convue default will register/SRC/components directory. The vue. | js. | JSX. | ts |. The TSX file for global components.

For example, there is a hello. TSX component under/SRC /components

import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    return () = > <div>Hello Convue!</div>; }});Copy the code

Use in pages

import { defineComponent } from 'vue';
// import Hello from '/src/components/hello'; No registration needs to be loaded

export default defineComponent({
  setup() {
    return () = > <hello></hello>; }});Copy the code

Lowercase letters are recommended for global components and large hump for custom components.

Multi-level directory

If there are multilevel directories under/SRC /components, the component names are concatenated as folder-file.

Such as the SRC/components/app/navbar. Benchmark, so use this component to add app prefix (app – navbar), more levels and so on.

Refer to the Component configuration item for other rules.

The plug-in

Convue default automatically load/SRC/plugins directory. Js. | ts file.

For example, write a plugin file

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

export default ({ app }, inject) => {
  app.use(Antd);

  inject('sayHello'.(obj) = > {
    console.log('Hello Convue! ');
  });
};
Copy the code

Access the sayHello function

const instance = getCurrentInstance();
consttoString = instance? .appContext.config.globalProperties.$toString;Copy the code

parameter

Function has two parameters, the first for a component instance access to relevant information, the second to inject function (by inject function to register the function of automatically loaded into the app. The config. The global. The properties of).

The first parameter description:

App: current VUE instance
Store: global status access
Router: indicates the current route object
Route: indicates the information about the current route
Env: list of environment variables

For other rules, see Plugin configuration items.

Set the content of the head tag

Usually, the head tag contains the title, meta, and link tags, and the SRcript tag is written at the end of the body tag.

A placeholder

By occupying the contents of the title tag
The meta and link tags need to be loaded through the placeholder head tag
Elements mounted by placeholder vue instances as well as loading

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title><! -- TITLE --></title>
    <! -- HEAD -->
  </head>
  <body>
    <! -- APP -->
    <script type="module">
      // ...
    </script>
  </body>
</html>
Copy the code

Global Settings

The convue configuration item passed in viet.config.js is the global configuration

import { defineConfig } from 'vite';
import convue from 'convue';

export default defineConfig({
  plugins: [
    ...convue({
      head: {
        title: 'Convue'.meta: [{name: 'language'.content: 'en-US' },
          { name: 'author'.content: 'ziping'},].link: [{rel: 'dns-prefetch'.href: 'https://www.googletagmanager.com'.crossorigin: 'crossorigin'}, {rel: 'dns-prefetch'.href: 'https://www.google-analytics.com/analytics.js'.crossorigin: 'crossorigin',},],},}),],});Copy the code

If the title is not sent, the name field in packgae.json is used by default.

Page separate Settings

We can also set a separate head for a page, and eventually the page’s head will contain the global Settings plus the page’s separate Settings.

Again, use meta objects in route tags.

{
  /* 
      
        name: 'test' meta: head: title: Convue meta: - name: language content: en-US - name: author content: ziping 
       */
}

import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    return () = > <div></div>; }});Copy the code

For other rules, see head configuration item.

reference

vite-plugin-pages
vite-plugin-vue-layouts

A Vite plugin that unifies team specifications and does not duplicate things

Quick learning

Use scaffolding

Project directory

routing

Dynamic routing

Adding Routing Information

Route 404 is redirected

Layout

Change the layout of the current page

The middleware

parameter

loading

progress

Global store

instructions

Global components

Multi-level directory

The plug-in

parameter

Set the content of the head tag

A placeholder

Global Settings

Page separate Settings

reference

Related Posts

Basic JavaScript usage and output

Will this be the biggest constraint on Svelte’s growth

Lui a Vue custom instructions to achieve a key Copy function