nuxt 官网地址：nuxt

安装vue-cli

# cnpm install vue-cli -g (如果你是使用npm切换了淘宝源的请使用npm 命令)

使用vue-cli创建应用（tips:认为你已经会vue，详细的vue基础教程会在后面开一个专门的系列补充）

# vue init nuxt/express blog
# cd blog
# cnpm install (如果你是使用npm切换了淘宝源的请使用npm 命令)
# cnpm run dev (如果你是使用npm切换了淘宝源的请使用npm 命令)

第一条命令是下载nuxt/express模板，并创建blog目录,一路回车就行
进入blog目录
使用cnpm install 初始化项目
启动命令

这个时候我们可以打开nuxt首页(tips:我把默认端口改成了3002，所以我的截图首页是127.0.0.1:3002)

server/index.js

const port = process.env.PORT || 3000 => const port = process.env.PORT || 3002

plugins/axios.js

 options.baseURL = `http://${process.env.HOST || 'localhost'}:${process.env.PORT || 3000}`
=> options.baseURL = `http://${process.env.HOST || 'localhost'}:${process.env.PORT || 3002}`

成功启动首页

首先我们来看一下nuxt的基础目录结构

目录结构

浅谈nuxt.config.js配置

module.exports = {
 head: { // nuxt公共头部设置
    title: 'starter',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
       { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ]
  },
 /*
  ** Global CSS 全局css
  */
  css: ['~/assets/css/main.css'],
/*
  ** Add axios globally 
  */
  build: {
    vendor: ['axios'],  //引入公共的axios
    /*
    ** Run ESLINT on save 
    */
    extend (config, ctx) { //使用eslink,为了开发方便我会把eslink注释了
     // if (ctx.isClient) {
      //  config.module.rules.push({
      //    enforce: 'pre',
      //    test: /\.(js|vue)$/,
     //     loader: 'eslint-loader',
    //      exclude: /(node_modules)/
     //   })
     // }
    }
}

这就是最简单的nuxt代码，后面会根据业务我们更深层次的去聊聊如何做好博客网站

上一篇-使用nuxt,express,mysql,nginx创建个人博客系列-02
下一篇-使用nuxt,express,mysql,nginx创建个人博客系列-04

使用nuxt,express,mysql,nginx创建个人博客系列-03

安装vue-cli