nuxt.js常见配置

在创建完一个Nuxt.js项目后，需要对它进行一些常用的常见的配置，以便于后续开发。
关于创建nuxt.js和初始，请点击 >> https://www.jianshu.com/p/20caf50d86bf

将css设为外联方式引入

在 nuxt.config.js 文件中的 build 中加入以下代码：

build: {
    // css文件外部引入
    extractCSS: true,
}

设置前：
css在html中嵌套，影响html结构

设置前.png

设置后：
css为外联样式引入， 结构美观 可读

设置后.png

配置全局公共CSS

1. 在~/assets/下创建 res.css
2. 将此css路径添加至nuxt.cofig.js中，并重启项目

  /*
  ** Global CSS
  */
css: [
    '~/assets/css/res.css',
],

此时写在res.css中的样式将全局生效。

指定某页面使用自定义模板

1. 在~/layout/ 下创建 myLayout.vue文件 作为我们的指定模板；
2. 在~/page 下的指定页加入如下代码，即可。

 <script>
       export default {
           layout: 'myLayout'
       }
   </script>

指定IP和端口访问

在~/package.json中添加如下代码：

"config": {
    "nuxt": {
        "host": "0.0.0.0",
        "port": "9000"
    }
}

此时重新启动项目，将以我们当前的IP:9000启动；且同局域网下可共享

暂时更新这几个， 后续遇到再添加。

---

初始Nuxt.js先更到这里。
如有疑问请留言；或联系邮箱：manbanzhen@qq.com
欢迎访问：http://www.manbanzhen.top 、http://www.ofus.ink
转载请注明出处。