用vue-cli+Electron开发一个跨平台的桌面应用____篇二（简化项目、安装Element）

本文主要是介绍用vue-cli+Electron开发一个跨平台的桌面应用____篇二（简化项目、安装Element），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、简化项目，稍作调整

（删除一般项目中用不到的文件，简化代码，最简化项目；修改package.json文件，微改一下运行所输入的命令）

在开发工具中打开篇一中创建的名为vue-electron-demo的项目：

删除 HelloWorld.vue （一般用不上，后续需要的时候自己创建，删除后会报错，故需修改代码）
assets下的logo.png也可删除：
views下的Home组件修改如下:

<template>
  <div class="home">
   <h1>Home page</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>
复制代码

修改一下 package.json 文件的运行项目命令处（这里是个人习惯，我就是觉得 yarn electron:serve 这个运行命令太长了）：
修改完成后，便可输入 **yarn e:serve**运行项目。效果如图：

二、安装Element,并初步使用

安装element-ui

yarn add element-ui
复制代码

引入并使用 ① 在src下新建一个名为plugins的文件夹定义引入element-ui的文件：

plugins / element.js:

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)
复制代码

② 在main.js中引入element.js文件：

src / main.js :

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element' /* 引入刚刚定义的element.js文件，只加了这一句 */
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
复制代码

③ 在Home组件中使用，测试element的引入是否成功：

在这里插入代码片<template>
  <div class="home">
   <h1>Home page</h1>
   <el-button type="primary">测试</el-button>
  </div>
</template>
<script>

export default {
  name: 'Home'
}
</script>
<style lang="scss">
  .home{
    h1{
      color:red;
    }
  }
</style>
复制代码

测试出效果如图：

到此便可在项目中直接使用Element这个组件库了；

这里在GitHub上传了一个初步搭建的Vue+Electron的项目供参考，该项目会用于做一些测试的小案例，持续更新; 地址：github.com/ddx2019/vue…

这篇关于用vue-cli+Electron开发一个跨平台的桌面应用____篇二（简化项目、安装Element）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Javascript