electron-vue开发markdown编辑器快速开发(上)

electron的安装

github源码下载

正确操作

# 确认安装了git,为安装请参考
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
# 很多人说国内为了加速使用cnpm,经过无数次血泪尝试建议最好npm,不行就yarn install
# 不行就试试*,都玩这一路的,要试试多探寻好的解决方案。
npm install 
npm start

可以看到
electron-vue开发markdown编辑器快速开发(上)
好了,之后你就可以使用编辑器在index.html上随意修改了,例如你可以修改为:

实际项目的初始化

# 确保安装了node.js环境
vue init simulatedgreg/electron-vue admin
# npm install 卡住第一步
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
# 还是不行试试 yarn install xxx
# 竟然还不行使用*(方法百度)

可能发生的问题

你可能会遇到如下报错

electron-vue开发markdown编辑器快速开发(上)

打开项目目录 .electron-vue 文件夹里的 webpack.web.config.js
webpack.render.config.js,
把整个

new HtmlWebpackPlugin({XXXX})

替换为

new HtmlWebpackPlugin({
            filename: 'index.html',
            template: path.resolve(__dirname, '../src/index.ejs'),
            minify: {
                collapseWhitespace: true,
                removeAttributeQuotes: true,
                removeComments: true
            },
            nodeModules: process.env.NODE_ENV !== 'production' ? path.resolve(__dirname, '../node_modules') : false,
            templateParameters(compilation, assets, options) {
                return {
                    compilation: compilation,
                    webpack: compilation.getStats().toJson(),
                    webpackConfig: compilation.options,
                    htmlWebpackPlugin: {
                        files: assets,
                        options: options
                    },
                    process,
                };
            },
        }),

如果你想更快一步,我创建了新的github仓库

git clone git@github.com:zerotower69/electron-vue-quick-start.git

开始配置其它的开发包

electron的配置基本说完了,接下来配置项目需要的外部库

npm install element-ui --save  #使用element-ui组件库
npm install mavon-editor  --save 一款实用的markdown编辑器
npm install ali-oss --save  # alibaba的对象存储ossSDK

未完待续

上一篇:1. mvn tomcat:tun Compilation error 控制台运行正确,浏览器访问500,解决办法


下一篇:webpack5的变化