首页 > 其他分享 >【Vue项目实践】创建一个 electron+vue3 的项目

【Vue项目实践】创建一个 electron+vue3 的项目

时间:2022-09-21 12:55:22浏览次数:89  
标签:Vue 项目 -- 创建 yarn electron vue3 vite

采用 vite 来创建一个vue 项目,然后 在项目中加入 electron的配置

参考链接:Vite+Electron快速构建一个VUE3桌面应用(一)

  1. 创建项目
1. 安装 vite
yarn create vite
2. 创建项目
创建命令如下:

yarn create vite <your-vue-app-name> --template vue
此处创建一个项目,名为kuari。

yarn create vite kuari --template vue
3. 进入且运行
进入项目,在运行前需要先安装下依赖。

cd kuari
yarn install
yarn dev

2) 添加 electron 到项目中

yarn add --dev electron --save

添加有可能卡住……
修改一下镜像源

yarn config set electron_mirror https://cdn.npm.taobao.org/dist/electron/

…… 不知道ts 的语法,暂时不引进此项目

标签:Vue,项目,--,创建,yarn,electron,vue3,vite
From: https://www.cnblogs.com/panie2015/p/16715212.html

相关文章

  • 在vue中获取mock中接口文件的某个接口方法 (vue-element-admin)
    一、通过require.context来获取api/course文件夹里面的文件require.context(`@/api/course`,true,/\.js$/)得到如下:二、把以上内容处理,放入一个对象M中letM=......
  • Pinia是一个全新的Vue状态管理库,是Vuex的代替者,尤雨溪强势推荐
    Pinia优势Pinia是一个全新的Vue状态管理库,是Vuex的代替者,尤雨溪强势推荐Vue2和Vue3都能支持抛弃传统的Mutation,只有state,getter和action,简化状态管理库......
  • 【测试平台开发】——07Vue前端框架实战——restful请求
    本节主要是前后端接口的调用,以及前端如何进行封装接口 一、创建相关文件在文件夹下创建http.js、api.js、user.js1)http.js封装接口:在src下创建api文件夹添加ht......
  • Vue中使用富文本编辑器
    一.下载依赖npmivue-ueditor-wrap-S二.引入组件importVueUeditorWrapfrom'vue-ueditor-wrap'//ES6Module三.注册组件components:{VueUeditorWrap}//......
  • vue富文本(5版本)组件
    <template><div><divstyle="border:1pxsolid#ccc;width:500px"><!--工具栏--><Toolbarstyle="border-bottom:1pxsolid#ccc":editor="......
  • vue中设置class多种方式
    class可以绑定对象数组和函数等<!--第一种:数组直接传递一个数组,注意:这里的class需要使用v-moddel做数据绑定-->33<h1:class="['red','thin']">第一种:数组了......
  • vue +iview Select省市区联动
    因为需要保存的表里只有City_id一个字段,所以这边只保存"区"的值<Rowtype="flex"justify="start"class="code-row-bg"v-show="loginName=='admin'"><Cols......
  • vue下载图片
       asyncworks(obj){   awaitthis.axios({    method:'get',    url:`entryFormController/downloadWork.do`,    param......
  • vue导出文件
    /**导出*/asynctoExcel(){//letresult=awaitthis.axios({//method:'get',//url:`issdc-manage/gameController/export.do`,......
  • vue上传证书
       //队伍证书上传getFile(){varthat=this;////1创建formDataletformData=newFormData();////2添加数据,key可以......