第三节:electron-vueUI框架ElementUi的使用

1、electron-vueUI框架ElementUi的使用
地址：http://element-cn.eleme.io/#/zh-CN

2、electron-vue中使用element-ui：
（1）安装

npm i element-ui -S

（2）引入以及配置element-ui renderer/main.js

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

（3）看文档使用
找到组件

 <el-button type="primary">主要按钮</el-button>
 <el-button type="success">成功按钮</el-button>
 <el-button type="info">信息按钮</el-button>

3、electron-vue中使用sass
地址：https://simulatedgreg.gitbooks.io/electron-vue/content/cn/using_pre-processors.html

（1）安装sass-loader：

npm install --save-dev sass-loader node-sass

vue文件中修改style为如下代码：

<style lang="scss">
 body{
   /*SCSS*/
 }
</style>

4.注意：如果需要在页面中通过import引入scss 如： import '../assets/style.scss';
需要进行如下操作:
（1）安装

sass-loader node-sass：             
cnpm install sass-loader node-sass  --save

（2）找到webpack.renderer.config.js配置

 {
        test: /\.scss$/,
        use: [
            "style-loader", // creates style nodes from JS strings
            "css-loader", // translates CSS into CommonJS
            "sass-loader" // compiles Sass to CSS, using Node Sass by default
        ]
  }

（3）结束项目重新运行 npm run dev
这个时候项目中就可以通过import命令引入scss了

import '../assets/style.scss';