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/_cache-loader@2.0.1@cache-loader/dist/cjs.js??ref--12-0!./node_modules/_babel-loader@8.0.6@babel-loader/lib!./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js??ref--0-0!./node_modules/_vue-loader@15.7.1@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的使用也有了更深刻的理解，如果接下来继续完善的话，
还是要将目录结构恢复到默认的结构，这样最简单，同时也最适应整个生态。这也算是踩了一个大坑吧，
接下来就是继续挖坑与填坑了。
