C:\Users\Administrator\Desktop\text\nuxt>cd basic C:\Users\Administrator\Desktop\text\nuxt\basic>npm run dev > basic@1.0.0 dev C:\Users\Administrator\Desktop\text\nuxt\basic > nuxt i Preparing project for development 10:04:25 i Initial build m…

npm install weixin-js-sdk --save 这个不行,这个是vue前端用的 网上找了一些vue jsweixin的案例 不能直接用 因为nuxt是后端运行,windows对象取不到,通过查找到了一个可用的案例 就是把js注入到前端 其中jssdkInfo和要分享的appid,noncestr等参数要去接口后端请求过来,核心代码复制如下: wxInit(){ const script = document.createElement('script'); // 返回一个独立的…

1.安装pm2 npm install pm2 -gd 2.启动 Pm2 start ./bin/www 3. pm2 save 4.Pm2 startup 5.Pm2 save修改 package.json "scripts": { "build": "nuxt build && npm start", } 在web当前目录 pm2 start npm --name "xxxx-nuxt" -- run bu…

已经购买centos服务器,并安装了nodejs环境 Secure CRT链接 Cd / Cd /var/www Mkdir test.abc.cn 用ftp 除了node_modules,其他都上传 然后  cnpm install 为了防止冲突,修改nuxt的端口,修改 /package.json "config": {     "nuxt": {       "host": "0.0.0.0",       "…

1.新建/pages/login.vue 2.安装cookie Cnpm install js-cookie --s 3.Login.vue增加 import Cookie from 'js-cookie';  4.Npm run dev刷新,cookie写入成功 5.为了统一鉴权,需要用到middleware,新建/middleware/userauth.js,如果需要了解middleware更多可以先从vue,express,route,middle开始了解 6.新建/assets/js/u…

这时候我们完成了list.vue,但是怎么返回index.vue,这时候需要这个头部返回 1.我们使用现成的minu-ui,eleme的开源移动端 ,参考 https://www.cnblogs.com/hai-cheng/p/8760887.html Cnpm intall mint-ui --save 2.修改nuxt.config.js plugins:[ { src:'~/plugins/swiper.js', ssr: false }, { src:'~/plugins/mint-ui…

面是单页,下面实现一个列表页和分页加载的例子 1.新建pages/list.vue <template> <div> 分页加载列表页面 </div> </template> <script> export default { } </script> 2.我们从footer的首页改成更多,然后从footer的更多跳转到list.vue,修改footer如下 <nuxt-link :to="'/list'" id…

接下来就是对接服务端接口,展示真实的数据 1.做了个虚拟接口地址:http://test.yms.cn/testjson.asp 输出数据: { "title": "单间出租", "price": "350.0元/月", "type": "1室1厅1卫", "square": "2", "keyWord": [{"wo…

1.接下来新建/component/maincontent.vue 把这些html代码copy到maincontent.vue 发现格式比较难看,就格式化一下 2.插件安装 beautify,安装后重启vs,按F1 搜beaut,格式化html 把css copy过来 刷新 样式有点问题.原来少了bootstrap.css,修改nuxt.confg.js增加bts Npm run dev 发现报错,原来bootstrap加载了字体 但项目里没有包含, 把字体copy过来放到目录 重新npm ru…

接下来是一个比较常用,也比较重要的组件 swiper,可以自行搜索 vue swiper,有很多开源组件,我这里就复用之前一个熟悉的, 1.新建component/banner.vue 刷新报错: 要适应vue的报错信息,并快速定位错误,这个就scss依赖没加载 执行命令: Cnpm install sass-loader node-sass --save Npm run dev 好像效果不对,翻下swiper日志 vue awesome swiper 在nuxt下的使用 1.安装swiper…

目标地址:https://www.vyuan8.com/vyuan/plugin.php?id=vyuan_fangchan&module=fangchan&pid=10079&fid=70823 页面可以从上到下分为若干组件,导航,swiper幻灯,详情,推荐,底部 5个组件 1.先搞个头部导航 把css和html搞过来之后 发现总是不对 ,什么问题呢 原来是热刷新的问题,也就是你再vscode编辑修改了,但是在浏览器看到的效果不是实时的,nodejs有个热刷新的命令 cnpm…

百度了解下,简单说就是vue的seo化,因为vue是spa,不支持seo,从本地运行的源码可以看出来,html没有tkd和相关文字,导致百度收录困难,所以nuxt可以很好的解决这个问题, 举个例子:纯vue的: 从mingyou.com的源码和网络请求可以看出,nuxt把你需要被seo收录的都展现出来了 Vue+Nuxt之后的: nuxt一些成熟商用: [华尔街见闻]:https://wallstreetcn.com/[掘金]:https://juejin.im/[大搜车]: https://e…

用store把api数据交互部分重构出来,让前端更轻一点 新建 /store/gettter.js /store/actions.js /server/config/index.js Index.js: export default { app:{ domain:'', host:'localhost', port:3001, routerBaseApi:'api' } }  Getter.js: import globalConfig from '../server/config' expor…

那么现在问题来了,我现在是在index.vue获取了服务端的数据,怎么传值到maincontent.vue?当然你也可以把获取数据放在maincontent.vue,但假如有些数据同时在header,footer,maincontent.vue被引用,如果每个compnent都去请求,就太费性能了.这时候需要用到vue的组件之间传值的特性.先从简单的,index.vue 传值到 maincontent.vue. 1.Index.vue修改如下: 2.MainContent.vue修改如下: <t…

spa:single page applcation 1.components目录新建header.vue,footer.vue Header.vue Footer.vue Pages/index.vue修改如下 这里有3个注意点 (1) 必须template开头 (2) 最外层必须要div包括 (3) Component组件的命名和使用也有套路,具体百度…

1. 脚手架初始化: vue init nuxt-community/starter-template NuxtMyms 2.输入项目相关信息 3.切换到项目目录下 安装依赖 Cd nuxtmyms Cnpm install 4.运行 Npm run dev 5.查看效果 浏览器运行  localhost:3000 6.vscode打开项目…

背景 近期在做内部系统的重构,从一线业务彻底的重构,经过充分的考虑我们准备把这个项目打造成前台业务的试验站,比如ssr和一些其他的前沿技术的探索,积累充分的经验后待合适的契机应用到C端的项目中. 既然涉及到重构,避免不了老生常谈的话题技术选型.当然开始还是走了一些弯路,因为是后台项目,最重要的当然是快速迭代,基于此在UI层我们准备使用开源的方案,目前社区比较成熟的两种UI库(antdesign.elementUI)我们拿给UI同学对比,UI同学还是比较倾向于antdesign的,所以我们开始尝试…

前言 今天抽空过了遍nuxt文档,写了个实践demo,关于nuxt我已经断断续续看了好几遍了,自我感觉也算是入门了吧,从开发到上线心里都有底.后期打算在项目用起来的是nuxt框架,一些函数工具库,比如ramda,lodash等等,后台服务估计会使用### fastify 这个库,目测非常方便,尝试尝试. 基础只是还是以官方文档为主,尝试过程中如果有什么问题可以留言,看到会回复,文章如有错误,欢迎指正. 预处理器的使用 安装需要的loader后指定lang就可以直接使用. npm i less l…

现在前端开发一般都是前后端分离,mvvm和mvc的开发框架,如Angular.React和Vue等,虽然写框架能够使我们快速的完成开发,但是由于前后台分离,给项目SEO带来很大的不便,搜索引擎在检索的时候是在网页中爬取数据,由于单页面应用读取到的页面是几乎空白的,无法爬取到任何数据信息. <!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta name=viewport content=&quo…

前言 哈喽大家周五好,又是一个开开心心的周五了,接下来就是三天小团圆啦,这里先祝大家节日快乐咯,希望都没有加班哈哈,今天公司发了月饼,嗯~时间来不及了,上周应该搞个活动抽中几个粉丝发月饼的,下次吧,这里先预告一下,圣诞节活动,给粉丝送苹果吧哈哈,不过听起来好 low 呀,大家有好的想法可以下边评论或者来群里一起交流哟~ 说接上文,昨天咱们第一次的接触到了一个新的框架 Nuxt<二七║ Nuxt 基础:框架初探>,从概念上,给大家简单说了下这个框架的产生和应用场景,大家学习这一块一定要有一定的…

前置知识 SSR服务器渲染 Vue SSR(server side rendering)服务端渲染 和 Vue SPA(single page application)单页应用 Vue SSR->将本来要放在浏览器执行创建的组件,放到服务端先创建好,然后生成对应的html 将他们直接发送到浏览器,最后将这些静态标记激活为客户端完全可交互的应用程序 SSR针对SPA的好处: 1)更好的SEO,由于搜索引擎抓取工具可以直接查看完全渲染后的页面 2)更快的到达时间(time-to-content),特…

Nuxt.js 提供了两种发布部署应用的方式:服务端渲染应用部署 和 静态应用部署. 静态应用部署就不说了,主要说说服务端渲染应用部署. 官方部署方式 关于服务端渲染应用部署,官方文档是这么写的: 部署 Nuxt.js 服务端渲染的应用不能直接使用 nuxt 命令,而应该先进行编译构建,然后再启动 Nuxt 服务,可通过以下两个命令来完成: nuxt build nuxt start 推荐的 package.json配置如下: { "name": "my-app",…

通常我们搭建ssr应用需要自己选择多个组件集成到一起 webpack babel loaders router server-render 各种入口配置等 如果是基于vue+vuex+vue-router组件构建的ssr应用,可以使用nuxt.js nuxt简化了ssr应用的搭建与开发,并且提供了一整套解决方案,提供了大量的预设 nuxt.js高度集成了常用的组件 包括热更新,vue-meta,css-loader,url-loader,vue-template-loader,vue-route…

vue.js的官方介绍里可能提到过nuxt.js,我也不太清楚我怎么找到这个的 最近项目vue.js是主流了,当有些优化需求过来后,vue还是有点力不从心, 比如SEO的优化,由于vue在初始化完成之前,页面是没有任何内容的,所以基本上没有办法满足这个需求 比如有些访问量较大的主页里面,由于都是异步数据,所以在服务器数据没有返回之前,可能只能无奈的显示一个loadding....但是产品没办法理解这里面的技术流,他们只知道,能不能更快一点,甚至不用loadding~ 我在vue这个环境下能做的:…

利用手脚架搭起来的服务端渲染实例目录结构.nuxtassets 未编译的静态资源如 LESS.SASS 或 JavaScriptcomponents 用于组织应用的 Vue.js 组件middleware 目录用于存放应用的中间件pages 用于组织应用的路由及视图.Nuxt.js 框架读取该目录下所有的 .vue文件并自动生成对应的路由配置.plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件静态文件目录 static 用于存放应用的静态文件…

我用的模板是nxut-express,版本是:1.4.2.服务器:阿里云.一.申请免费证书:网站能通过https访问,首先得申请https证书,付费的阿里云上有售卖的,一年几千块.免费的可以通过certbot工具生成,也可以去阿里云上获取. 1.certbotcertbot官网:https://certbot.eff.org/certbot和let's encrypt什么关系?我的理解,certbot是更方便的生成let's encrypt签发证书的一个工具.2.阿里云阿里云的免费证书在 域名服…

前端渲染:vue.react等单页面项目应该这样子部署到服务器 貌似从前几年,前后端分离逐渐就开始流行起来,把一些渲染计算的工作抛向前端以便减轻服务端的压力,但为啥现在又开始流行在服务端渲染了呢?如vue全家桶或者react全家桶,都推荐通过服务端渲染来实现路由.搞得我们慌得不行,不禁让我想起一句话:从来没有任何一门语言的技术栈像Javascript一样,学习者拼尽全力也不让精通.没办法,流行,咱们就得学! 前断时间写了一篇vue.react等单页面项目应该这样子部署到服务器,结果反响不错!最近…

一直以来,开发环境和生产环境的数据接口域名不一样总是困扰着我 每次打测试包或者线上包,我都得手动切换域名,我相信很多人的做法跟这差不多,类似下面这样: (你已经注意到,这个文件已经被我无情的删除了,因为我发现了属于我自己的新大陆) 每次打包都要切换注释,虽然也能接受,但是容易忘记或者出错,或者找这个配置文件都要找半天, 对于我这种反应迟钝.头脑经常性短路的人来说实在太痛苦了, 有痛点,那就要寻求解决方法: 第一步:安装 cross-env(这个迷你的包能够提供一个设置环境变量的scripts)…

由于seo的需要,最近将项目移植道nuxt.js下采用ssr渲染 移植完成后,一路顺畅,但是到了要部署到服务器端上时候,还是个头疼的问题,但最终还是顺利完成.现在记录一下部署中的过程. 注:部署时候过程中,参考了下:https://segmentfault.com/a/11... 一:搭建nginx+node+npm+pm2环境 我们的nginx版本是 1.12node版本是v8.11.1npm版本是5.6.0pm2版本是2.10.2 具体环境安装,网上都有教程,就不在叙述,直接进入正文. 一:…

一. 1.添加package.json { "name": "nuxtweb001", "version": "1.0.0", "description": "nuxt test", "author": "chentingjun", "private": true, "scripts": { "de…