Nuxt 常用配置项
配置 IP 和端口
1 2 3 4 5 6 7 8 9 10
| "scripts": { }, "config":{ "nuxt":{ "host":"127.0.0.1", "port":"1818" } },
|
配置全局CSS
1 2 3 4 5 6 7
| head: { }, css: [ '~assets/css/normailze.css', ],
|
配置webpack的loader
在nuxt.config.js里是可以对webpack的基本配置进行覆盖的
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| build: { loaders:[ { test:/\.(png|jpe?g|gif|svg)$/, loader:"url-loader", query:{ limit:10000, name:'img/[name].[hash].[ext]' } } ],
extend (config, { isDev, isClient }) { if (isDev && isClient) { config.module.rules.push({ enforce: 'pre', test: /\.(js|vue)$/, loader: 'eslint-loader', exclude: /(node_modules)/ }) } } }
|
Nuxt 路由
Nuxt.js 路由会根据 pages 目录中提供的Vue文件自动为您生成配置。
路由跳转传参
1 2 3 4 5 6 7
| <template> <!--路由跳转传参--> <nuxt-link :to="{name:'news',params:{newsId:3306}}">NEWS</nuxt-link>
<!--路由接收参数--> <p>NewsID:{{$route.params.newsId}}</p> </template>
|
动态路由跳转传参
以下画线为前缀的Vue文件就是动态路由,然后在文件里边有 $route.params.id来接收参数
1 2 3
| <template> <nuxt-link :to="{name:'news-id',params:{id:123}}">News-1</nuxt-link> </template>
|
动态参数校验
1 2 3 4 5 6 7 8
| <script> export default { validate ({ params }) { // Must be a number return /^\d+$/.test(params.id) } } </script>
|
路由切换动画
全局动画
1 2 3 4 5 6 7
| .page-enter-active, .page-leave-active { transition: opacity 2s; } .page-enter, .page-leave-active { opacity: 0; }
|
1 2
| css:['assets/css/main.css'],
|
单页动画
1 2 3 4 5 6 7 8 9
| .test-enter-active, .test-leave-active { transition: all 2s; font-size:12px; } .test-enter, .test-leave-active { opacity: 0; font-size:40px; }
|
1 2 3 4 5
| <script> export default { transition:'test' } </script>
|
Views 布局
默认模板
根目录下创建一个 app.html 就可实现
1 2 3 4 5 6 7 8 9 10 11 12
| <!DOCTYPE html> <html lang="en"> <head> {{ HEAD }} </head> <body> <p>jspang.com 技术胖的博客</p> {{ APP }} </body> </html>
|
默认布局
1 2 3 4 5 6 7
| <!-- layouts/default.vue --> <template> <div> <p>JSPang.com 技术胖的博客</p> <nuxt/> </div> </template>
|
自定义布局
例如:创建博客布局 在layouts 新建一个 blog.vue。
1 2 3 4 5 6 7
| <!--layouts/blog.vue--> <template> <div> <div>My blog navigation bar here</div> <Nuxt /> </div> </template>
|
使用博客布局
1 2 3 4 5 6 7 8 9 10
| <!--pages/posts.vue--> <template> <!-- Your template --> </template> <script> export default { layout: 'blog' // page component definitions } </script>
|
自定义错误页面
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| <!--layouts/error.vue--> <template> <div> <h1 v-if="error.statusCode === 404">Page not found</h1> <h1 v-else>An error occurred</h1> <NuxtLink to="/">Home page</NuxtLink> </div> </template>
<script> export default { props: ['error'], layout: 'error' // you can set a custom layout for the error page } </script>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| <script> export default { data(){ return{ title:this.$route.params.title, } }, // 独立设置 head 信息 head(){ return{ title:this.title, meta:[ {hid:'description',name:'news',content:'This is news page'} ] } } } </script>
|
注意:为了避免子组件中的meta标签不能正确覆盖父组件中相同的标签而产生重复的现象,建议利用 hid 键为meta标签配一个唯一的标识编号。
数据请求
安装 Axios
1
| npm install axios --save
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| <template> <div> <h1>姓名:{{info.name}}</h1> <h2>年龄:{{info.age}}</h2> <h2>兴趣:{{info.interest}}</h2> </div> </template> <script> import axios from 'axios' export default { data(){ return { name:'hello World', } }, // promise asyncData(){ return axios.get('https://api.myjson.com/bins/8gdmr') .then((res)=>{ console.log(res) return {info:res.data} }) } // await async asyncData(){ let {data}=await axios.get('https://api.myjson.com/bins/8gdmr') return {info: data} } } </script>
|
静态资源的引入及打包
直接引入图片
1 2 3
| <template> <div><img src="~static/logo.png" /></div> </template>
|
css 图片的引入
1 2 3 4 5 6 7
| <style> .diss{ width: 300px; height: 100px; background-image: url('~static/logo.png') } </style>
|
打包静态HTML并运行
live-server 可以查看打包后的文件
相关资料
[代码沙盒]路由
[代码沙盒]Views布局使用
技术胖Nuxt.js教程开启SSR渲染
[视频]技术胖Nuxt.js免费视频教程 开启SSR渲染