Electron 12 学习(三)Vue 3 安装与配置

Electron 12 学习 专栏收录该内容
12 篇文章 1 订阅
  1. 全局安装 Vue 3 脚手架:

    npm i -g @vue/cli
    
    Microsoft Windows [版本 10.0.19042.985]
    (c) Microsoft Corporation。保留所有权利。
    
    D:\WebstormProjects>npm i -g @vue/cli
    npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'
    npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
    npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
    npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
    npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
    npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
    npm WARN deprecated har-validator@5.1.5: this library is no longer supported
    npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
    npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
    D:\Program Files\nodejs\node_global\vue -> D:\Program Files\nodejs\node_global\node_modules\@vue\cli\bin\vue.js
    
    > core-js@3.12.1 postinstall D:\Program Files\nodejs\node_global\node_modules\@vue\cli\node_modules\core-js
    > node -e "try{require('./postinstall')}catch(e){}"
    
    Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
    
    The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
    > https://opencollective.com/core-js
    > https://www.patreon.com/zloirock
    
    Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
    
    
    > core-js-pure@3.12.1 postinstall D:\Program Files\nodejs\node_global\node_modules\@vue\cli\node_modules\core-js-pure
    > node -e "try{require('./postinstall')}catch(e){}"
    
    
    > @apollo/protobufjs@1.2.2 postinstall D:\Program Files\nodejs\node_global\node_modules\@vue\cli\node_modules\@apollo\protobufjs
    > node scripts/postinstall
    
    
    > ejs@2.7.4 postinstall D:\Program Files\nodejs\node_global\node_modules\@vue\cli\node_modules\ejs
    > node ./postinstall.js
    
    Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)
    
    + @vue/cli@4.5.13
    added 939 packages from 600 contributors in 49.5s
    
    D:\WebstormProjects>	
    
  2. 创建一个 vue 3 项目:

    vue create hello-world-vue3
    

    选择:

    Default (Vue 3) ([Vue 3] babel, eslint)
    
    D:\WebstormProjects>vue create hello-world-vue3
    
    
    Vue CLI v4.5.13
    ? Please pick a preset: Default (Vue 3) ([Vue 3] babel, eslint)
    
    
    Vue CLI v4.5.13
    ✨  Creating project in D:\WebstormProjects\hello-world-vue3.
    🗃  Initializing git repository...
    ⚙️  Installing CLI plugins. This might take a while...
    
    
    > yorkie@2.0.0 install D:\WebstormProjects\hello-world-vue3\node_modules\yorkie
    > node bin/install.js
    
    setting up Git hooks
    done
    
    
    > core-js@3.12.1 postinstall D:\WebstormProjects\hello-world-vue3\node_modules\core-js
    > node -e "try{require('./postinstall')}catch(e){}"
    
    
    > ejs@2.7.4 postinstall D:\WebstormProjects\hello-world-vue3\node_modules\ejs
    > node ./postinstall.js
    
    added 1247 packages from 659 contributors in 68.28s
    
    71 packages are looking for funding
      run `npm fund` for details
    
    🚀  Invoking generators...
    📦  Installing additional dependencies...
    
    added 82 packages from 86 contributors in 15.631s
    
    78 packages are looking for funding
      run `npm fund` for details
    
    ⚓  Running completion hooks...
    
    📄  Generating README.md...
    
    🎉  Successfully created project hello-world-vue3.
    👉  Get started with the following commands:
    
     $ cd hello-world-vue3
     $ npm run serve
    
    
    D:\WebstormProjects>
    
  3. 启动 Vue:

    D:\WebstormProjects>cd hello-world-vue3
    
    D:\WebstormProjects\hello-world-vue3>npm run serve
    
    > hello-world-vue3@0.1.0 serve D:\WebstormProjects\hello-world-vue3
    > vue-cli-service serve
    
     INFO  Starting development server...
    98% after emitting CopyPlugin
    
     DONE  Compiled successfully in 2677ms                                                                                                                                            下午2:46:05
    
    
      App running at:
      - Local:   http://localhost:8080/
      - Network: http://192.168.2.101:8080/
    
      Note that the development build is not optimized.
      To create a production build, run npm run build.
    

    在这里插入图片描述

  4. 将Vue项目与Electron合并,并将依赖安装完成:
    在这里插入图片描述

  5. 启动合并后的Vue项目,访问后与为合并前一样。

  6. 源码:
    GitHub
    Gitee
    CodeChina

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值