【utools】Experiência relevante no projeto de plug-in utools de desenvolvimento vue2 (introdução detalhada do estilo babá)

prefácio

O utools é um software muito fácil de usar.As ferramentas simples melhoraram muito minha produtividade, principalmente alguns plug-ins para armazenamento estruturado de informações. Portanto, também quero contribuir com o mercado de utools e desenvolver um plug-in de utools que eu preciso, fácil de usar, simples e que possa atender às necessidades de outras pessoas. Então, passei 15 dias desenvolvendo uma "nota de bug" para registro estruturado de informações de bug. [2023.1.16 - 2023.1.21].
Durante esse processo, encontrei alguns problemas relacionados à inicialização da configuração do projeto utools, à compatibilidade do vue2 e do projeto utools e à implantação e liberação do projeto utools, e levei um certo tempo para resolvê-los. Compartilhar esta experiência aqui espera ajudar outros pequenos parceiros que estão desenvolvendo utools pela primeira vez.

PS: Os requisitos serão desenvolvidos com base no framework vue2 do nodejs.

Inicializar a configuração do projeto utools

0. Baixe o plug-in oficial da ferramenta de desenvolvedor utools

1. Inicialize um projeto vue2 [não há muito a dizer]

2. Crie um diretório dist [o diretório empacotado pelo npm run build, criado antecipadamente e crie dois novos arquivos]
2.1 O arquivo plugin.json é o arquivo de inicialização para utools acessar nosso próprio projeto
2.2 O preload.js é usado para pré-carregamento Carregamento, você não pode processá-lo temporariamente, e falarei sobre isso mais tarde

3. Referência de configuração de Plugin.json
Notas:
(1) Os três arquivos envolvidos, index.html, logo.png e preload.js, devem estar no mesmo diretório que plugin.json, ou seja, colocados no mesmo diretório que package.json, se for lançado e empacotado, deve estar no arquivo de pacote dist. Utilizado para identificação e montagem de ferramentas.
(2) A entrada principal em desenvolvimento permite que utools acessem sua própria porta 8080. Depois de executar o projeto front-end, utools pode montar dinamicamente o projeto vue [usar com webpack] (3) A principal função dos recursos é configurar palavras-chave
em ferramentas.

{
    
    
	"main": "index.html",
	"logo": "logo.png",
	"preload": "preload.js",
	"platform": ["win32", "darwin", "linux"],
	"development": {
    
    
		"main":"http://127.0.0.1:8080"
	},
	"features": [
		{
    
    
			"code": "bugCollection",
			"explain": "个人的异常错误收集仓库",
			"cmds":["错误笔记", "虫子笔记", "异常笔记", "bug笔记"]
		}
	]
}

Neste momento, coloque plugin.json, logo.png e preload.js no mesmo diretório que package.json, para que utools possam acessá-lo dinamicamente durante nosso processo de desenvolvimento [renderização instantânea, você pode ver o efeito do desenvolvimento]

4. Este é o fim da inicialização de um projeto. Depois que o desenvolvimento for concluído e o efeito do desenvolvimento for satisfatório, podemos tentar empacotar o projeto HelloWord em um arquivo npm run builddist [plugin.json, preload.js e logo.png dentro não ser substituído]
Em seguida, dê plugin.json para utools para abrir seu próprio projeto.
PS: O projeto vue2 deve prestar atenção à configuração de embalagem, a configuração de embalagem padrão levará a uma página em branco

• Modifique a configuração, é necessário em dev assetsPublicPath: /e é necessário em build assetsPublicPath: ./.

• npm run build empacota um projeto dist

• encontrar plugin.json

• Especifique plugin.json nas ferramentas do desenvolvedor e comece a executar

• Abra o projeto de acordo com a palavra-chave que você definiu.

Vue2 coopera com utools

Notas de Desenvolvimento

1. utools vem com um mecanismo que pode analisar HTML, então um plug-in utools pode ser um projeto da web, que pode ser usado para depurar ferramentas de desenvolvedor (F12). Pesquise primeiro e depure-o após ctrl + D na janela independente.

2. Se ElementUI não puder ser exibido, basta modificá-lo aqui

3. Para exibir imagens, é recomendável armazená-las por meio de ativos

4. Como o plugin.json escutou a porta 8080, o processo de desenvolvimento é consistente com o desenvolvimento normal. Após o npm run dev, ele será aberto diretamente em utools.

5. Duas coisas que valem a pena mencionar: a altura do aplicativo exibida pelo utools é de cerca de 540px e a largura pode ser ignorada, a roda de rolagem será coberta pela roda de rolagem que vem com o utools e qualquer modificação na roda de rolagem será inválida.
PS: Solução 2, ou seja, a autoadaptação é realmente melhor. Basta
adicionar estilos html, body {height: 100%;} ao App.vue

Cenário 2:

A API fornecida por utools é usada

Lembre-se do preload.js mencionado acima, este é um arquivo de pré-carregamento, também configuramos o ponto de pré-carregamento em plugin.json, utools carregará o conteúdo do script js em preload.js antes de carregar o projeto e utools também A instância utools e a instância da janela serão montados antes da execução do preload.js e suas APIs poderão ser usadas. Para obter detalhes, consulte a seção preload.js na documentação oficial.
Documentação oficial:https://u.tools/docs/developer/preload.html

Aqui está a referência de preload.js:

window.test = function() {
    
    
	//utools实例可以直接使用
    utools.db.put({
    
    
        id: "demo",
        data: "demo"
    });
    const demo = utools.db.get("demo");
    console.log(demo);
    const tmp = utools.db.put({
    
    
        _id: "demo",
        data: "demo"
    });
    console.log(tmp);
}

Geralmente, a função global é montada por meio da instância da janela e o negócio é realizado dentro da função (como dados persistentes e adição, exclusão, modificação e verificação). As funções globais podem ser chamadas em qualquer lugar no arquivo vue.

persistência de dados

Ele pode ser usado diretamente na API do banco de dados utools do documento oficial.
Prefiro usar o mais conveniente utools.dbStorage.setItem(key, value)e utools.dbStorage.getItem(key), claro, também na documentação.

Implantação e lançamento de utools

0. Exclua o arquivo .js.map e o arquivo .css.map usado para depuração no dist, caso contrário, a auditoria não passará

1. Contanto que você possa abri-lo no modo dev na interface utools, ele deve ser compactado em um arquivo upx.

2. Depois de arrastar o upx empacotado para a caixa utools, ele pode ser instalado em utools

3. Se não houver nenhum problema após a instalação, você pode solicitar a liberação para o mercado nas ferramentas do desenvolvedor utools

epílogo

É problemático desenvolver um front-end do utools, e o processamento de estilo levará muito tempo. Quanto ao fluxo de dados, a persistência e a transferência de dados podem ser bem realizadas por meio de scripts js e da conveniente API fornecida pelo utools. Claro que o mais importante é a ideia, o mais legal é desenvolver um plug-in que você precisa e que outros possam precisar.