项目安装

image.png

1,项目名称
2,项目描述
3,服务器框架用那个
4,用什么ui框架
5,用什么模式，是spa 还是ssr
6,用不用axios
7,用不用eslint
8,作者
9,是选择用npm 还是 yarn安装

修改配置

Nuxt 开发 - 项目初始化

Nuxt是基于Vue的一个应用框架，采用服务端渲染（SSR），可以让用户的Vue单页面应用（SPA）也可以有利于SEO。

项目初始化

参考：https://zh.nuxtjs.org/guide/installation

$ npm install -g npx
$ npx create-nuxt-app <项目名>

安装过程中的配置选项：

? Project name meituan-app
? Project description My neat Nuxt.js project
? Use a custom server framework koa
? Use a custom UI framework element-ui
? Choose rendering mode Universal
? Use axios module yes
? Use eslint yes
? Use prettier no
? Author name cedric
? Choose a package manager npm

$ npm install --update-binary

项目初始化后的配置

1. 使用ES6的 import/export

node本身不支持import export 指令，项目想要使用import 需要在项目中引入babel 进行处理，所以在package.json中做如下修改：（参考：http://www.ruanyifeng.com/blog/2016/01/babel.html）

就在dev和start 后面加上--exec babel-node

"scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js --exec babel-node",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },

如果报错：[nodemon] failed to start process, "babel-node" exec not found

需要在根目录新建 .babelrc文件
里面写入：

{
    "presets": ["es2015"]
}

然后安装:

$ npm install babel-preset-es2015

$ npm install babel-cli -S

2. 安装 sass

$  npm install sass-loader node-sass

安装后可以会有提示：
npm WARN acorn-jsx@5.0.0 requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-vue@4.7.1 requires a peer of eslint@^3.18.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.

此时，需要安装：

$ npm i eslint@^3.18.0
$ npm i acorn@^6.0.0

提供全局 scss 变量

npm i -S @nuxtjs/style-resources
npm i -D sass-loader node-sass //上面已经安装了就不需要了

修改 nuxt.config.js

export default {
   modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/style-resources'
  ],
  styleResources: {
    scss: '@/assets/css/global.scss'
  },
}

3. 修改 nuxt.config.js

改了meta:[{name:内容}]

import pkg from './package'

export default {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' },
      { 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: [
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '@/assets/js/global.js'
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/style-resources'
  ],
  styleResources: {
    scss: '@/assets/css/global.scss'
  },
  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
  },

  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    }
  }
}