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

一、 简化项目，稍作调整

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

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

1. 删除 HelloWorld.vue （一般用不上，后续需要的时候自己创建，删除后会报错，故需修改代码）

   

   assets下的logo.png也可删除：

   

2. views下的Home组件 修改如下:

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

<script>
export default {
  name: 'Home'
}
</script>

3. 修改一下 package.json 文件的运行项目命令处 （这里是个人习惯，我就是觉得 yarn electron:serve 这个运行命令太长了）：

   

   

   修改完成后，便可输入 **yarn e:serve**运行项目。 效果如图：

   

二、 安装Element,并初步使用

1. 安装element-ui

yarn add element-ui

2. 引入并使用 ① 在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…