electron-vue UI框架 ElementUi的使用、 electron-vue 中使用sass

文档:http://element-cn.eleme.io/#/zh-CN/component/installation

01、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>
02、electron-vue中使用sass

    1.安装sass-loader node-sass      npm install --save-dev sass-loader node-sass
    2、在vue文件中修改style
    <style lang="scss">
        body {
            /* SCSS */
          }
    </style>
03、注意:如果需要在页面中通过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';

 

posted on 2021-01-15 09:45  LoaderMan  阅读(887)  评论(0编辑  收藏  举报

导航