Nuxt.js支持:
Nuxt.js工作流:
Nuxt.js安装:
vue init nuxt-community/koa-template 项目名
这个是集成了koa-tempalte的nuxt.js
也可以这么安装(nuxt2.0官方的脚手架):
先全局安装npx
npm install -g npx
再执行命令
npx create-nuxt-app project-name
注意要指定版本为2.0.0,否则可能没有server framework选项
安装好后执行:
npm run dev
如果有报错参考:
1.https://blog.csdn.net/weixin_42614080/article/details/105613214
2.https://blog.csdn.net/qq_40571631/article/details/103285331
成功启动则如下所示:
访问localhost:3000看到如下即表示成功
Nuxt.js目录
安装好的Nuxt.js不会一开始就有store目录,需要我们自己创建,一旦创建了store目录,Nuxt.js就会自动为我们配置vuex,非常的方便,“创建即配置”。
当我们在pages中创建了一个页面,比如search.vue
<template>
<section class="container">
<img src="../assets/img/logo.png" alt="Nuxt.js Logo" class="logo" />
<h1 class="title">
Search.Vue
</h1>
</section>
</template>
<style scoped>
.title
{
margin: 50px 0;
}
</style>
此时我们去浏览器访问localhost:3000/search
即可访问到这个页面,nuxt.js自动配置了和文件名一致的路由,“创建即配置”。
但是我们发现,每个页面底下都有一部分(图示红框标出的部分)并不是我们在对应的页面文件中编写的内容,这一部分其实是写在layouts目录下的
default.vue是在你没有配置声明layout模板的时候所有页面都默认用default.vue作为模板,当然模板中也可以引入组件
顺便一提,这个<nuxt/>
组件也就相当于原版vue中的<router-view/>
(如果要调用组件必须要加入这个组件,这个标签表示路由匹配到的组件显示的位置),那么还有<nuxt-link/>
组件,也相当于<route