Nuxt.js 是一个基于 Vue.js 的通用应用框架。
与 vuepress 的关系:
Nuxt.js 能够胜任 VuePress 的功能,但它专为构建应用程序而设计,而 VuePress 更适合构建以内容为中心的静态站点,如技术文档,博客等。
笔者使用的 node 和 npm 版本如下:
笔者测试 node v8.9.0 在安装依赖时会报错。在使用 nvm 切换到 node v10.13.0 后问题解决。
npx create-nuxt-app webapp
确保安装了npx(npx 在 npm v5.2.0 以后版本都默认安装了)
出现下图,说明创建和安装成功。
按照提示,进入项目目录 webapp , 启动项目开发:
cd webapp
yarn dev
浏览器打开 localhost:3000
:
注意:Nuxt.js 会监听
pages
目录中的文件更改,因此在添加新页面时无需重新启动应用程序。
默认情况下 Nuxt 使用 vue-loader、file-loader 以及 URL-loader 这几个 Webpack 加载器来处理文件的加载和引用。且,vue-loader 自动使用 css-loader 和 Vue 模板编译器来编译处理vue文件中的样式和模板。如要支持第三方模版编译器和CSS与处理器,只需要单独安装相应 npm 包及对应 加载器,无需其他配置,即可在项目中直接使用。
如下采用了 pug
模版和 stylus
css 预处理器:
pug
模版加载器yarn add -D pug pug-plain-loader
stylus
css 预处理器yarn add -D stylus stylus-loader
<template lang="pug">
.container hello world !
</template>
<script>
export default {
components: {}
}
</script>
<style lang="stylus">
.container
margin 0 auto
min-height 100vh
display flex
justify-content center
align-items center
text-align center
</style>
nuxt 使用 vue-router
进行页面路由管理。但是,并不需要像直接使用 vue-cli
创建项目那样手动配置路由文件。nuxt
巧妙地根据页面 pages
目录页面组件文件的路径,自动生成对应的路由配置。并且通过在页面子目录或 .vue
文件名前加下划线 _
来实现动态路由。
例如,以下目录结构:
pages/
--| list/
-----| index.vue
--| detail/
-----| _id.vue
-----| index.vue
--| user/
-----| _id.vue
--| index.vue
Nuxt.js 生成对应的路由配置表为:
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'user-id',
path: '/user/:id?',
component: 'pages/user/_id.vue'
},
{
name: 'list',
path: '/list',
component: 'pages/list/index.vue'
},
{
name: 'detail-id',
path: '/detail/:id',
component: 'pages/detail/_id.vue'
}
]
}
在 assets
目录下添加样式文件 main.styl
:
.container
margin 0 auto
min-height 100vh
display flex
justify-content center
align-items center
text-align center
在配置文件 nuxt.config.js
中 css
属性中添加样式文件,以使新添加的样式文件全局生效:
css: [
'assets/main.styl'
]
到这一步,可以将 5.3 小节中
<style lang="stylus"><style>
中的.container
样式删除。
布局组件是存放在 layouts
目录下具有特殊用途的 vue
组件,主要用于给 web 应用的所有页面或相同类型的页面提供一致的布局。框架提供一个默认布局组件 laouts/default.vue
。
修改这个文件如下:
<template lang="pug">
page
xheader
xmain
nuxt
xfooter
</template>
<script>
import page from '~/components/page'
import xheader from '~/components/header'
import xmain from '~/components/main'
import xfooter from '~/components/footer'
export default {
components: {
page,
xheader,
xmain,
xfooter
}
}
</script>
如你所见,页面出现 4 个报错,接下来我们即将解决这个问题。
上文在布局组件 layouts/default.vue
中引用了 4 个还未创建的组件。我们分别创建如下:
<template lang="pug">
.page
slot
</template>
<style lang="stylus">
.page
background #F4F7F9
display flex
min-height 100vh
flex-direction column
</style>
<template lang="pug">
.header header
</template>
<style lang="stylus">
.header
width 100%
height 50px
line-height 50px
background: #fff
</style>
<template lang="pug">
.main
slot
</template>
<style lang="stylus">
.main
width 980px
margin 0 auto
flex 1
</style>
<template lang="pug">
.footer
p.copy 2019 © ken
</template>
<style lang="stylus">
.footer
height 100px
margin 15px auto
</style>
第6小节中,我们已经创建了一些页面,但还未实现任何界面和业务逻辑。目前,我们已经有了统一的布局,接下来,就是专注特定页面的设计实现了。
URL: localhost:3000/
<template lang="pug">
.container home
</template>
<script>
export default {
components: {}
}
</script>
<style lang="stylus"></style>
URL: localhost:3000/user/1
<template lang="pug">
.container user-id
</template>
<script>
export default {
components: {}
}
</script>
<style lang="stylus"></style>
URL: localhost:3000/list
<template lang="pug">
.container list
</template>
<script>
export default {
components: {}
}
</script>
<style lang="stylus"></style>
URL: localhost:3000/detail/1
<template lang="pug">
.container detail-id
</template>
<script>
export default {
components: {}
}
</script>
<style lang="stylus"></style>
到此,已经完成一个使用 Nuxt.js 搭建的通用 web 应用的基本界面框架,如果,一步步跟着完成,基本可以算作入门了。更深入的了解,需要在业务开发中,深入挖掘。相信,和我一样,你也会喜欢上 Nuxt.js 构建现代化的 web 应用的便利性和高效性。