码迷,mamicode.com
首页 > 其他好文 > 详细

Nuxt学习笔记

时间:2018-03-14 12:51:04      阅读:1865      评论:0      收藏:0      [点我收藏+]

标签:clu   bsp   post   ref   div   目录结构   配置ip   name   end   

参考地址:https://zh.nuxtjs.org/guide/installation  官网

                 http://jspang.com/2018/02/26/nuxt/

1、目录结构

技术分享图片

2、Nuxt常用配置项

配置IP和端口:

package.json

     技术分享图片

配置全局的css:

在assets里面创建文件:

技术分享图片

在nuxt.config.js里面配置

技术分享图片

配置webpack的loader

在nuxt.config.js里是可以对webpack的基本配置进行覆盖的,比如现在我们要配置一个url-loader来进行小图片的64位打包。就可以在nuxt.config.js的build选项里进行配置。

例:

 1 build: {
 2  
 3     loaders:[
 4       {
 5         test:/\.(png|jpe?g|gif|svg)$/,
 6         loader:"url-loader",
 7         query:{
 8           limit:10000,
 9           name:img/[name].[hash].[ext]
10         }
11       }
12     ],
13  
14     /*
15     ** Run ESLint on save
16     */
17     extend (config, { isDev, isClient }) {
18       if (isDev && isClient) {
19         config.module.rules.push({
20           enforce: pre,
21           test: /\.(js|vue)$/,
22           loader: eslint-loader,
23           exclude: /(node_modules)/
24         })
25       }
26     }
27   }

 3、路由配置

可以直接使用a标签,不过推荐用nuxt自带的标签<nuxt-link>

Nuxt学习笔记

标签:clu   bsp   post   ref   div   目录结构   配置ip   name   end   

原文地址:https://www.cnblogs.com/zhaobao1830/p/8566349.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!