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 来分别接收两种参数。

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

发表于 2018-09-06

 

原文：https://cloud.tencent.com/developer/article/1330974