# Electron_vue_webpack_ts

**Repository Path**: lican1/Electron_vue_webpack_ts

## Basic Information

- **Project Name**: Electron_vue_webpack_ts
- **Description**: 一次electron+webpack+vue+ts的尝试
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-09-14
- **Last Updated**: 2020-12-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Electron_vue_webpack_ts

#### 介绍
一次electron+webpack+vue+ts的尝试

#### 软件架构
electron+webpack+vue+ts

本地服务器: webpack-dev-server 热更新 配置devServer hot: true

代码分割: 更高效的代码分离方式-懒加载 动态路由  动态引入组件

代码压缩: 

JS: UglifyJSPlugin
 
多页面实现方式： 

1.嵌套路由实现多页面(多个页面组件切换)

2.配置多入口，每一个入口代表一个Vue page

3.动态组件 <component is="componentName"></component>

#### 安装

1. npm install
2. npm run dev
3. npm run build

#### 遇到的问题

1.babel工具为固定版本，高版本的搭配，同样的用法会报错

2.解析css时候需要用到的 loader 也是固定的顺序写法
                      
3.() => import(URL), webpack官网推荐使用, 属于es7范畴, 需要配合babel的   syntax-dynamic-import插件使用

4.vueRouter 对象中的 key 为routes， 而不是routers

5.不要重复引入 App.vue，否则页面会出现两个 router-view

6.vuex 中getters可以获取经过加工的 state。相当于一个处理工具，如果只是单纯的获取 state，跟 this.$store.state.attr 没有任何区别

#### 参考

webpack 中文网 https://www.webpackjs.com/guides/

如何在 vue 中实现懒加载 https://alexjoverm.github.io/2017/07/16/Lazy-load-in-Vue-using-Webpack-s-code-splitting/

vueJS 官方文档 https://cn.vuejs.org

Webpack配置多入口： https://www.cnblogs.com/pomelott/p/8977092.html

在 Vue 项目中集成 typeScript https://segmentfault.com/a/1190000011744210