vue的nuxt与electron学习笔记

该文章纯属笔记，写的非常凌乱，请谅解

Nuxt.js是vue项目中一个能够搜索引擎优化的框架，原来的vue项目的前后端分离，均是通过发送ajax请求然后获取json异步方式。这种方式不利于搜索引擎优化，因为搜索引擎爬虫爬到后是空壳子。nuxt.js解决这一难点。

安装vue

在windows环境中安装nodejs，再安装npm。基本环境安装完成后，设置vue镜像地址，国外镜像很慢。

设置淘宝镜像地址
npm config set registry https://registry.npm.taobao.org
验证是否可行
npm config get registry

安装vue
npm install vue -g
npm install -g vue-cli

新建一个vue项目

不建议重头开始，直接使用 vue init webpack 项目名
vue init webpack hello
出现如下填写的信息，依次填写，很简单很方便就完事了。

进入到创建项目的目录hello中，依次成功执行
npm install
npm run dev
启动完成，后面的开发可以一葫芦画瓢了。可能有一些权限，可以设置路由拦截器。请求的拦截器，都可以设置，可以参考一些简单的框架代码，比如：https://gitee.com/nmgwap/vueproject，他们是如何做的。

使用Nuxt.js

安装Nuxt.js

执行命令，该命令跟vue项目创建一下，根据信息依次填写
npx create-nuxt-app <项目名>

启动项目，依次启动npm install，npm run dev 这样就启动起来了

设置项目的端口，ip我选择本地

Nuxt与vue不同之处

vue项目的路由，需要在router.js中自己去定义，然后指向某个compoent。
而Nuxt不同，nuxt不需要去定义。根据pages目录下的文件自动生成。

访问路径依次如下

http://localhost:3333 对应 pages/index.vue
http://localhost:3333/page/ 对应 pages/page/index.vue

部署nuxt.js

nuxt.js部署有两种模式（不是方式），第一种模式是生成纯写死的静态页面，第二种模式是生成ssr模式的页面。大多数生成ssr模式的，如果是静态的没有必要再用Nuxt非那么大周折了。

静态生成的方式地址 https://www.nuxtjs.cn/guide/commands

ssr模式的
分别执行
npm install
npm run build
构建完成后，将如下图的四个文件目录拷贝到部署服务器的新建的目录下

拷贝到特定目录下如下，执行
npm install
然后执行npm start

启动完成后如下

当然了，你可以通过pm2进行管理，安装pm2执行npm install -g pm2
安装完成后，执行
pm2 start npm --name "ssrweb" -- run start

ssrweb的demo可以查看一下
https://gitee.com/cnhellorui/some_source_code/tree/master/ssrweb

electron项目

electron项目有一些api，可以通过访问官网查看
vue init simulatedgreg/electron-vue my-project 自动生成一个electron-vue的模板，能够快速开发
上面命令可能出现下载失败的问题，解决方式

把 https://github.com/SimulatedGREG/electron-vue 的代码下来丢项目里
vue init ./electron-vue my-project

electron.js 打包成exe

cd src/renderer目录下，然后执行npm run build。第一次因为下载依赖情况，可能会很慢。


有个electron项目，很简单的，可以下载玩玩，快速了解。
https://github.com/marsdl-620up-tech/fileup