2.helloworld 添加常用插件(helloworld of vue + electron)

helloworld 添加常用插件

记录了添加插件的一些过程

接上一篇：
1.最简框架搭建(helloworld of vue + electron)

常用插件

在最初使用vue-cli创建项目时，为了最简化，我们什么插件也没有选择,
现在我们要尝试添加一些插件
用vue-cli创建项目过程中的一些功能选择:

Vue CLI v3.10.0
? Please pick a preset: Manually select features
? Check the features needed for your project:
 ( ) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
>( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

我们在1.最简框架搭建时，更改了vue-cli生成的默认文件结构，
我们把vue-cli生成的src下的文件都放在了src/renderer下面，而使用vue add增加
插件时，插件文件生成的目录还是在src下，可见更改了默认的文件结构对我们来说并不是个好
事件，但既然已经改了，我就试一下如何这样继续下去。

关于src目录的问题，这里有些有意思的讨论
Add prop in vue.config.js to change vue src directory
vue-source-dir一个可以设置vue项目src目录的插件

比如我们在安装vue-router后，src目录下多了文件router.js和目录views，这时我们
就要手动把文件移动到src/renderer目录下，还要修改代码把views里的组件集成到App.vue中
痛苦，不过学习的过程就得忍受这些

将views里的组件集成到App.vue中我是vue create新建一个项目，选择初始安装router,
然后以此进行对比学习,使用这方法我还手动添加了Eslint等插件

运行 npm run debug
报错了

\  Bui 98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 errors                                                                                                                                                                 4:51:30 PM
This dependency was not found:

* @/components/HelloWorld.vue in ./node_modules/[email protected]@cache-loader/dist/cjs.js??ref--12-0!./node_modules/[email protected]@babel-loader/lib!./node_modules/[email protected]@cache-loader/dist/cjs.js??ref--0-0!./node_modules/[email protected]@vue-loader/lib??vue-loader-options!./src/renderer/views/Home.vue?vue&type=script&lang=js&

要解决这个问题一个是重设@, vue.config.js
vue inspect 检查一下配置,发现有个配置不对

  entry: {
    app: [
      './src/main.js'
    ]
  },

同时也修改下entry入口文件

 configureWebpack: {
    entry: {
      app: './src/renderer/main.js'
    },
    resolve: {
      alias: {
        '@': path.join(__dirname, 'src/renderer')
      },
      extensions: ['.js', '.vue', '.json', '.css', '.node']
    },
    target: 'electron-renderer'
  },

这里设置了入口文件，我们在package.json里使用vue-cli-service时就可以不指定入口文件了

"pack": "vue-cli-service build src/renderer/main.js && webpack-cli --config webpack.electron.config.js",

to

"pack": "vue-cli-service build && webpack-cli --config webpack.electron.config.js",

目前这样就完成了插件的安装，同时对vue-cli的使用也有了更深刻的理解，如果接下来继续完善的话，
还是要将目录结构恢复到默认的结构，这样最简单，同时也最适应整个生态。这也算是踩了一个大坑吧，
接下来就是继续挖坑与填坑了。

项目地址https://github.com/nononoone/helloworld