nuxt.js带你入门

官网：https://zh.nuxtjs.org/guide/installation

框架搭建步骤见：（根据选择选择自己对应的插件等）

一、配置less预编译处理器：

npm i less less-loader --save-dev //安装后，就可以直接使用

二、打包部署流程

官方推荐的 package.json 配置如下：

{
  "name": "my-app",
  "dependencies": {
    "nuxt": "latest"
  },
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start"
  }
}

推荐配置如下:

{
  "name": "my-app",
  "dependencies": {
    "nuxt": "latest"
  },
  "scripts": {
    "dev": "nuxt",
    "start": "nuxt start",
    "build": "nuxt build && npm start" 
  }
}

nuxt.js服务端渲染应用部署这样就完成了，官方先后执行 npm run build 、npm start 即可完成部署。而我这边只要执行npm run build ，其实我只是把两个合并成一个，并设置了端口以便区别其他应用，避免端口占用！

nuxt: 启动一个热加载的Web服务器（开发模式）
nuxt build: 利用webpack编译应用，压缩JS和CSS资源（发布用）。
nuxt start: 以生成模式启动一个Web服务器 (next build 会先被执行)。

扫描二维码关注公众号，回复： 5456584 查看本文章

三、全局变量设置：

plugins新建main.js

import Vue from 'vue' // vue 文件引入 - 方便在vue方法内容直接 this 调取
import Api from './api' // 自定变量内容 其他自便
 
let main = {
    install(Vue) {
        Vue.prototype.$api = Api; // 变量的内容 后期可以在vue中 this->$api.xxx 使用
    }
};
 
Vue.use(main); // 这里不能丢
 
// 这里是 为了在 asyncData 方法中使用
export default ({ app }, inject) => {
    // Set the function directly on the context.app object
    app.$api = Api // 名称
};

plugins新建api.js

let host = 'http://api.xxx.xxx';
console.log(process.env)
console.log(process.env.GLOBALCONFIG)
let api = {
    getSolidList: host + '/getSolidList.api'
};
export default api

使用方法：

created() {
    console.log(this.$api.getSolidList);
  }

四、环境变量配置：

package.json中添加:

"scripts": {
    "dev": "nuxt",
    "build": "cross-env GLOBALCONFIG=pro nuxt build && npm start",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },

nuxt.config.js:

 env: {
    GLOBALCONFIG: process.env.GLOBALCONFIG
  },

api.js:

console.log(process.env.GLOBALCONFIG) //做判断

结果：

五、修改port

package.json文件添加：

"config":{
    "nuxt":{
      "port":"8000"
    }
  },

六、路由

layouts/default.vue 是默认页面指的是index的页面

但有的时候需要重新定义一个路由，全新的页面布局，整体和默认页面没有共同的部分，这个时候就需要新建：layouts/blog.vue

blog.vue代码如下：

<template>
  <div>
    <div>这里是博客导航</div>
    <nuxt />
  </div>
</template>

然后新建pages/post.vue：

post.vue代码如下：

<template>
  <div>
    <div>对应post</div>
  </div>
</template>
<script>
export default {
  layout: "blog" //关键
};
</script>

展示结果：

路由也可以这样嵌套：

展示效果：

仍在学习ing，会继续更新。。。。。

猜你喜欢