devbox
一键难忘520
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Electron+Vue手动搭建(非electron-vue方式)_electron+vue安装

作者：一键难忘520 | 2024-08-06 06:00:27

赞

踩

electron+vue安装

        以往的electron-vue框架搭建比较便捷，但是在打包时会出现一些报错。不知道是不是我的问题，所以我这次想手动搭建，使用electron比较新的版本+Vue2.x版本(由于3.x还没有着手在项目中实践故没有用)。本次博客不同以往，现在网上对electron的资料偏少，我想用更多的文字+代码把搭建描述清楚。

废话不说先上环境（nodejs版本16.13.0目前最新版本16.14.0，npm版本8.1.0）

 环境搭建

        我们希望使用yarn进行依赖管理，所以我先进行了yarn的安装

  1. npm install -g yarn
  2. yarn --version
  3. # 我的版本是：1.22.17

        yarn 安装后我们再使用npm进行Vue的脚手架安装

  1. npm install -g @vue/cli
  2. vue --version
  3. # 我的版本是：@vue/cli 4.5.15
  4. # 为了使用最新的vue脚手架我通过yarn global add @vue/cli 将脚手架更新到了@vue/cli@5.0.1
  5. yarn global add @vue/cli
  6. # 接下来我再次进行vue --version
  7. vue --version
  8. # 我的版本是：@vue/cli 5.0.1

        以上这几步骤如果之前做过前端开发应该都有使用过，下面开始咱们的项目搭建

创建Vue工程项目

  1. vue create <projectName>
  2. #<projectName>是你的项目名称

        回车后弹出以下内容：

  1. Vue CLI v5.0.1
  2. ? Please pick a preset: (Use arrow keys)
  3. ❯ Default ([Vue 3] babel, eslint)
  4.   Default ([Vue 2] babel, eslint)
  5.   Manually select features
  6.   
  7. # 由于我希望使用Vue2.x所以我选择了第二项 Default ([Vue 2] babel, eslint)
  8. # 这里使用上下键回车即可选择

        结束后弹出内容：

  1. Vue CLI v5.0.1
  2. ✨  Creating project in /Users/jackmeng/Desktop/<projectName>.  #这里<projectName>是你的项目名称
  3. 声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/一键难忘520/article/detail/936077
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。