Nuxt从项目搭建到部署（持续更新中）

为什么要用nuxt

• 基于 Vue.js
• 自动代码分层
• 服务端渲染
• 强大的路由功能，支持异步数据
• 静态文件服务
• ES2015+ 语法支持
• 打包和压缩 JS 和 CSS
• HTML 头部标签管理
• 本地开发支持热加载
• 集成 ESLint
• 支持各种样式预处理器： SASS、LESS、 Stylus 等等
• 支持 HTTP/2 推送

一、安装nuxt

确保安装了npx，npx在node 5.2.0默认安装（安装时请用cmd，git bash可能导致Use arrow keys无法选择）

npx create-nuxt-app <项目名>
或者
yarn create nuxt-app <项目名>

需要单选的 上下键加回车即可，多选空格加回车。步骤如下

我们先来看下目录结构

1. nuxt // Nuxt自动生成，临时的用于编辑的文件，build，打包时可以用generate，打包包含静态文件
2. assets // 静态文件
3. components // 用于自己编写的Vue组件，比如波动组件、日历组件、分页组件
4. layouts // 布局目录，用于组织应用的布局组件
5. pages // 用于存放写的页面，里面的文件不需要手动配置路由
6. plugins // 存放JavaScript插件
7. store // Vuex 状态管理
8. eslintrc.js // ESLint的配置文件、
9. gitignore // 配置git不上传的文件
10. nuxt.config.json // Nuxt.js应用的个性化配置，已覆盖默认配置

---

npm install 安装依赖
npm run dev 跑项目
默认监听3000端口

nuxt.config.js文件配置

const isProd = process.env.NODE_ENV === 'production'
const apiUrl = isProd ? 'http:// + 生产环境url' : 'http:// + 测试环境url'
const proxy = { // 配置代理
 '/api': { target: apiUrl, pathRewrite: { '^/api': '' } }
}
module.exports = {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
    'element-ui/lib/theme-chalk/index.css'
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '@/plugins/element-ui'
  ],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module'
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
     // 使用nuxtjs/proxy & nuxtjs/axios
    '@nuxtjs/proxy',
    '@nuxtjs/axios'
  ],
  server: {
    port: 8000, // default: 3000
    host: '0.0.0.0' // default: localhost,
  },
  /*
  ** Axios module configuration
  ** See https://axios.nuxtjs.org/options
  */
  proxy, // 使用上面定义的proxy
  axios: {
    proxy: true // 是否使用proxy
  },
  /*
  ** Build configuration
  */
  build: {
    transpile: [/^element-ui/],
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
    }
  }
}

需要使用less

npm install less less-loader --save-dev