nuxt.js

背景 申请季开始进入尾声... 前段时间有幸和「哈陆 Halu」一位去年刚入学加拿大滑铁卢大学的 dalao 通过交换友情链接认识了，他的博客链接是 → halu.lu ，保存在「伙伴」栏目名为「無位小站」。借着讨论 Nuxt.js 的机会和他聊了一聊，了解了一些他参加的 Co-op 项目和滑大数学系的情况... 他在博文中有提到他收到的另一所学校录取——华盛顿大学(也是 UW 🙂 ) 其世界综合排名会考前很多 (在 2020 US News 世界大学排名中最靠前，第 10 名，实属 dalao)，但是最后没有选择去的原因应该还是因为滑铁卢大学独有的 Co-op 项目... 大概意思就是一共 5 年大学本科，每年有 3 个学期，从第一年开始 Co-op 项目即在其中包括一个学期的 Work Term。在 Work Term 中学生可以申请在 7000+ 个合作企业中选择做带薪实习工作，根据官网所述最低总收入为 42,000 加币还是非常可观的。工作目的地包括谷歌等大厂，可选择在加拿大或其他国家(比如美国硅谷等)。本科毕业后就会拥有 2 年工作经验，学习与工作相交的大学体验听起来非常啊梅子英啊 🙂 扯太多了....但是他也谈到他的第一年 Co-op 申请中大多数的职位都有对于 React.js 的技能要求，他也是属于要 React 会 Vue 又没有时间现学的状态吧。不过 React

1.通过 router-link 进行跳转不会跳转到新的页面，也不会重新渲染，它会选择路由所指的组件进行渲染，避免了重复渲染的“无用功”。 2. 通过a标签进行跳转，页面会被重新渲染，即相当于重新打开一个新的网页，体现为视觉上的“闪烁”（如果是本地的项目基本看不出来） 这里涉及到一个关于nuxt.js的知识点: 如果我跳转过去的页面涉及ssr渲染的话(使单页程序vue支持Seo); 跳转后的页面: 这里建议使用a标签跳转,涉及到vue的生命周期,能够保证asyncData区域的方法生效;否者需要手动刷新页面才能修复bug 来源： oschina 链接： https://my.oschina.net/ilovejava/blog/3285814

好的IDE + 好的代码提示 = 高效率的开发 webstorm 设置 @ 和 ~ 别名，有助于代码查看和跳转. step 0 在项目下创建一个 webpack.config.js ，内容如下： const path = require('path') module.exports = { resolve: { extensions: ['.js', '.json', '.vue', '.ts'], root: path.resolve(__dirname), alias: { '@': path.resolve(__dirname), '~': path.resolve(__dirname) } } } 代码来源： https://github.com/nuxt/nuxt.js/issues/1881#issuecomment-338157397 step 1 设置 IDE webstorm -> file -> settings -> language & frameworks -> javascript -> webpack 指定一下 webpack.config.js 的文件路径 来源： oschina 链接： https://my.oschina.net/u/2009560/blog/3117563

问题：最近有些朋友问我写官网，用Vue框架实现好不好？ 相信很多使用Vue的小伙伴们一样疑惑这个问题，其实从这个问题就可以知道你对Vue这个框架是否真的熟悉了。 其实单单使用Vue这个框架来做官网的，其实是不友好的，非常不利于SEO，抓取。因为Vue是通过把你的代码编译的，生成是SPA，里面的html其实是空的，Nuxt.js属于SSR,也就是服务器渲染。Nuxt.js打包生成的每个路由都会对应相对的html文件。有利于网站抓取，SEO。 Vue适合做对seo无关紧要的项目，别的项目不适合，但是Nuxt.js 正好就修补了Vue的这个缺陷。 官方解析： Nuxt.js环境搭建和创建启动项目 做vue的小伙伴都知道vue-cli脚手架，其实vue-cli已经集成了nuxt.js，所以直接使用vue-cli就可以直接构建Nuxt.js项目了。 直接在需要创建项目的路径新建文件夹，文件夹名为项目名称，其实就是和创建vue项目一样。然后在该文件下打开cmd，然后运行下面cmd命令 vue init nuxt/starter 成功创建如下图所示： 然后使用 npm install 下载依赖项，运行项目 npm run dev 此时项目已经运行成功，并且默认在3000端口打开。 浏览器预览： 很高兴告诉你，此时Nuxt.js项目已经创建并且启动成功。 Nuxt.js目录结构 assets //

1. 目录结构 2. 别名 在nuxt.js的vue页面中，如果需要引入assets或者static等目录中的资源，可以使用~或~~。 3. 路由 Nuxt.js依据pages目录结构自动生成vue-router模块的路由配置。 要在页面之间使用路由，我们建议使用<nuxt-link>标签。 <router-link>是vue原生态切换路径标签。 <nuxt-link>在原生态的基础上，进行有关nuxt增强。(官方实例: https://zh.nuxtjs.org/examples/named-views/ ) 静态路由 动态路由 动态嵌套路由 动态路由命名 路径“/news/123”匹配“_id.vue”还是“_name.vue”？ 我们可以使用<nuxt-link>解决以上问题 <nuxt-link:to="{name:'news-id',params:{id:1002}}">第2新闻</nuxt-link> <nuxt-link:to="{name:'news-name',params:{name:1003}}">第3新闻</nuxt-link> 通过name确定组件名称：“xxx-yyy” 通过params给对应的参数传递值 默认路由 4.自定义布局 在layouts目录下创建组件：layouts/blog.vue 在需要的视图中使用blog布局 <script>

解决VUE全家桶中Nuxt.js 中sessionStorage is not defined 异常现场： 在api.js中使用sessionStorage 拿取数据， 页面访问时，抛异常：sessionStorage is not defined （未定义） 错误原因 1）api.js插件的注册方式：前端 两端都执行（前端客户端，前端服务端） 2）sessionStorage属于前端客户端，也就是浏览器端 3）前端服务端没有sessionStorage概念，也就是Node中没有。 解决方案 1）api.js提供的函数，都是在 前端客户端 执行的 2）将api.js插件的注册方式，修改成 前端客户端 ，而不是默认的两端。 在nuxt.config.js中添加 mode:' client' 即可解决 plugins: [ { src: '~plugins/api.js',mode:'client'} ] 请给努力中的自己点个赞哦! 每天进步一点点`~~~~~ 来源： oschina 链接： https://my.oschina.net/ithuang/blog/3221467