Nuxt.js 入坑指南

NuxtJs Vue

基于nuxt2.0

安装创建项目

$ yarn create nuxt-app <项目名>

或者：

$ npx create-nuxt-app <项目名>

确保安装了npx（npx在NPM版本5.2.0默认安装了）

生成的目录结构

├─assets                 资源目录，未编译的静态资源如less、js
├─components             组件目录
├─layouts                布局目录
├─middleware             中间件
├─node_modules           
├─pages                  页面目录
  ├─index.vue
  ├─....                 
├─plugins                插件
├─static                 静态文件目录
├─store                  vuex store

上下文对象 context

实际项目开发相关的配置

配置 Sass

$ yarn add node-sass sass-loader -D

用yarn安装node-sass可能会报错，可以用npm安装

安装成功之后，就可以写sass了。

// nuxt.config.js
css: [
  '@/assets/css/index.scss'
]

• 在 asyncData 中使用 axios

async asyncData ({ app }) {
  let { data } = await app.$axios.get('https://api.myjson.com/bins/cg8ga')
  return { data }
}

配置 axios

$ yarn add @nuxtjs/axios @nuxtjs/proxy

• 安装配置+跨域代理

// nuxt.config.js
modules: [
  '@nuxtjs/axios'
],
// 跨域代理
axios: {
  prefix: '/api',
  proxy: true // Can be also an object with default options
},
proxy: {
  '/api': { 
    target: 'http://xxx', 
    pathRewrite: {'^/api/': ''} 
  }
},

• axios插件配置

// plugins/axios.js
export default function ({ $axios, redirect }) {
  $axios.onRequest(config => {
    // console.log(1)
    console.log('Making request to ' + config.url)
  })
  $axios.onResponse(response=>{
    if (process.browser) {    //判断是否为客户端
      console.log('on response!')
    }
  })
  $axios.onError(error => {
    const code = parseInt(error.response && error.response.status)
    if (code === 400) {
      redirect('/400')
    }
  })
}
// nuxt.config.js
plugins: [
  '~/plugins/axios'
],

引入 Jquery 和 Boostrap

head: {
  title: 'xxx',
  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' },
    { rel: 'stylesheet', type: 'text/css', href: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'}
  ],
  script: [
    {src: 'https://code.jquery.com/jquery-3.1.1.min.js'},
    {src: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'}
  ]
}

引入 element-ui

• 安装

$ yarn add element-ui

• 配置插件

// plugins/element-ui.js
import Vue from 'vue'
import ElementUI from 'element-ui'  
export default ()=>{
  Vue.use(ElementUI)
}
// nuxt.config.js
css:[
  'element-ui/lib/theme-chalk/index.css'
],
plugins:[
  '~/plugins/element-ui'
]

到此，就可以在页面中使用了。

• 如果需要按需引入组件

要安装babel-plugin-component

$ yarn add babel-plugin-component -D

// plugins/element-ui.js
import Vue from 'vue'
import {Button} from 'element-ui'  // 引入按钮组件
export default ()=>{
  Vue.use(Button)
}

引入FontAwesome

• 进入Font Awesome官方网址，下载字体库，官方网址：http://fontawesome.dashgame.com/
• 解压后放到assets文件目录下
• 在 nuxt.config.js中配置css

css: [
  '@assets/font-awesome-4.7.0/css/font-awesome.min.css'
]

可以将解压出来的文件中的Less和sass文件删除，只保留css文件。也可以只保留sass或者less。减少没有用的代码！

注入 Vue 实例

// plugins/vue-inject.js
import Vue from 'vue'
Vue.prototype.$myInjectedFunction = (string) => console.log("This is an example", string)
// nuxt.config.js
plugins: ['~/plugins/vue-inject']

在页面中使用 this.$myInjectedFunction('test')调用