Nuxt基本安装与使用

Nuxt 是基于 nodejs + vue 写的,服务器端渲染 框架(SSR)

安装

  1. 安装node.js
  2. 设置node使用淘宝镜像 npm install -g nrm nrm use taobao
  3. 使用 npm 安装 vue-cli npm install -g vue-cli
  4. 安装nuxt项目 vue init nuxt-community/starter-template 项目名称
  5. 如果 vue-cli 没有安装, 需先通过 npm install -g vue-cli 来安装。
  6. 启动项目:npm run dev目录结构

页面组件

页面组件代码结构:

<template>
    模板内容(html内容,注意:必须有一个根元素)
</template>

<script>
// 组件的JS部分
export default {

}
</script>

<style>
	组件的CSS部分
</style>

布局文件

  1. 如果项目中存在 layouts/default.vue文件,那么Nuxt在渲染每个页面时,都会使用这个 defaults.vue 文件做为布局文件
  2. 如果希望页面使用其它的布局文件可以在页面中使用 layout 来设置:<template> <div class="container"> <h1 v-if="error.statusCode === 404">页面不存在</h1> <h1 v-else>应用发生错误异常</h1> <nuxt-link to="/">首 页</nuxt-link> </div> </template> <script> export default { props: ['error'], layout: 'blog' // 你可以为错误页面指定自定义的布局 } </script>

打包资源

  1. npm run dev 支持热更新,开发模式启动服务器
  2. npm run build 网站上线前打包
  3. npm run start 生产环境启动服务器

参数的接收方式

  1. 用来唯一标识资源的参数写到路由上,比如:/goods/:id
  2. 搜索、排序、翻页等的参数,比如:/goods/?limit=xx&page=xx

两种参数与文件名总结

URL

对应页面

接收方式

/goods/:id

pages/goods/_id.vue

this.$route.params.id

/goods?id=x

pages/goods.vue

this.$route.query.id

/order/:catid/:userid/?limit=10

pages/order/_catid/_userid.vue

使用 this.$route 中的 params 和 query 来分别接收两种参数。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏王磊的博客

art-template用户注册方法

应用场景nodejs Express框架,使用art-template模板引擎。 后台注册方法代码: var template = require('art-t...

41680
来自专栏Ryan Miao

使用git提交中删除idea

https://segmentfault.com/q/1010000000720031 http://www.tuicool.com/articles/a6Nf...

74860
来自专栏王磊的博客

react native仿微信性别选择-自定义弹出框

简述 要实现微信性别选择需要使用两部分的技术:   第一、是自定义弹出框;   第二、单选框控件使用; 效果 ? 实现 一、配置弹出框   弹出框用的是:rea...

43280
来自专栏vue学习

小程序 — 保存图片到手机相册②(用户授权等)

(1)如果用户第一次点击的时候,对弹出来的微信授权弹窗点击了拒绝,那么之后点击保存图片就没用了:

1.1K30
来自专栏linjinhe的专栏

Linux动态链接

曾经不止一次遇到过这样的情况:从机器A拷贝一个二进制文件到另一台机器B,两台机器的操作系统版本一样,可是在机器A能正常运行,在机器B却提示错误。最常见的就是提示...

35180
来自专栏小尘哥的专栏

nodejs作为前后端分离中间件的跨域解决方案

前后端分离时候SEO问题很头疼,上次提供了nuxt+axios解决服务端渲染问题的解决方案,其实nodejs一样可以做服务端渲染,这时候会产生ajax跨域问题,...

10320
来自专栏向治洪

React Native开发之ATOM开发实用技巧

前面对React Native开发工具Atom做了一个详细的介绍,详见RN开发IDE详解。 Atom作为一款前端开发利器,有很多的插件供我们选择,这里罗列常...

22180
来自专栏C/C++基础

Linux命令(20)——cat命令

(4)把 textfile1 的文档内容加上行号后输入 textfile2 这个文档里。

9130
来自专栏公众号_薛勤的博客

基于Netty实现可自动渲染HTML页面的静态Web服务器

Github:https://github.com/yueshutong/JerryServer/ 码云:https://gitee.com/zyzpp/J...

49520
来自专栏Java后端生活

EasyUI(一)--加载本地json数据

23440

扫码关注云+社区

领取腾讯云代金券