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 installnpm 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
http://fileup.marsdl.com/

Guess you like

Origin blog.csdn.net/Hello_Ray/article/details/106608926