老弟，来了？VUE+Nuxt.js+Koa+Vuex入门教程（一）仿写一个cnode网站

if(有工作){
	if(工作地址 ==  "深圳" || 工作地址 ==  "广州" ){
		do(请联系作者，qq:1172081598)
	}
}

何为Nuxt.js

Nuxt.js是一个vue的服务端渲染的框架，集成了express框架，sass/less框架等等,ui框架如Bootstrap，Vuetify，Bulma，Tailwind，Element UI，Ant Design Vue，Buefy，方便的集成拓展其他框架，如EsLint等等，自动化打包，代码改动自动更新（服务器，前端代码），让开发变得简单。

开始安装

文档地址在这： nuxt.js
首先你必须安装了node环境， npm（或者 yarn）；

 npx create-nuxt-app <项目名>

安装到中间的时候， 会让你选择开发的框架
ui框架我选择了element-ui， 服务器框架选择了koa，还有可以选择预编译样式框架sass / less;
选择完成之后就会进行安装，需要等待一段时间。（如果没有v皮N的话，建议选择淘宝源，进行npm安装module的时候会快很多）
$ npm config set registry https://registry.npm.taobao.org
– 配置后可通过下面方式来验证是否成功

$ npm config get registry
-- 或 npm info express

然后我们看到nuxt.config.js, 这个是nuxt项目的配置文件，

const pkg = require('./package')

module.exports = {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },

  /*
  ** Global CSS 全局的css，公共的css引用也在这
  */
  css: [
    'element-ui/lib/theme-chalk/index.css'
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '@/plugins/element-ui'
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    '@nuxtjs/axios'
  ],
  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
  },

  /*
  ** Build configuration
  */
  build: {
    /*
    ** webpack 的配置项在这里拓展
    **比如启用eslint
    */
    extend(config, ctx) {
       // Run ESLint on save
      // if (ctx.isDev && ctx.isClient) {
        // config.module.rules.push({
        //   enforce: 'pre',
        //   test: /\.(js|vue)$/,
        //   loader: 'eslint-loader',
        //   exclude: /(node_modules)/
        // })
      // }
    }
  }
}

然后我们看pages/index.vue，我们记住vue里面template只有一个根元素，如果有多个就会报错，

我们把头部导航栏写成组件， 在components文件夹新建一个文件header.vue

在store文件夹下新建actions.js:
主要是处理获取数据的函数

import axios from 'axios'

export default{
	getArticleLists(context) {
		context.commit('addArticleNumber')
		const number = context.getters.getArticleNumber
		axios.get(`https://cnodejs.org/api/v1/topics?pages=1&limit=${number}&mdrender=false`)
		.then(res =>{
			context.commit('addArticleLists', res.data.data)
		}).catch(res =>{
			throw new Error('err: ', res)
		})
	}
}

store下新建getters.js:
主要是暴露函数

export default {
	getArticleLists: state => state.articleLists,
	getArticleNumber: state => state.articleNumber,
	getArticle: state => state.article,
	getArticleAuthor: state => state.articleAuthor,
	getUserInfo: state => state.userInfo
}

在store下新建index.js:
主要是初始化Vuex：

import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
import state from './state'


const createStore = ()=> new Vuex.Store({
	state,
	getters,
	mutations,
	actions
})


export default createStore

在store下新建mutations.js:
这里主要是为了改变vuex里面的数值

export default{
	addArticleLists(state, articleLists){
		state.articleLists = articleLists
	},
	addArticleNumber(state){
		state.articleNumber += 10
	}
}

接着， 使用命令行：

npm run dev

就可以在浏览器打开http://127.0.0.1:3000查看效果了