Nuxt 入门

发表于 | 分类于 ，

创建项目

  1. 依赖安装

    1
    2
    3
    npm install -g cnpm --registry=https://registry.npm.taobao.org

    cnpm install -g vue-cli

  2. 创建项目模板

    1
    vue init nuxt-community/starter-template project_name

  3. 运行项目

    1
    npm run dev

集成element-ui

  1. 安装Elemen-UI

    1
    cnpm  install element-ui --save

  2. nuxt.config.js 完整配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
module.exports = {
  /*
  ** Global CSS
  */
  css: [
    'element-ui/lib/theme-default/index.css'
  ],
  /*
  ** Add element-ui in our app, see plugins/element-ui.js file
  */
  plugins: [
    '@/plugins/element-ui'
  ],
  /*
  ** Headers of the page
  */
  head: {
    title: 'designer',
    meta: [
      {charset: 'utf-8'},
      {name: 'viewport', content: 'width=device-width, initial-scale=1'},
      {hid: 'description', name: 'description', content: 'Nuxt.js project'}
    ],
    link: [
      {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
    ]
  },
  /*
  ** Customize the progress bar color
  */
  loading: {color: '#3B8070'},
  /*
  ** Build configuration
  */
  build: {
    /*
    ** Run ESLint on save
    */
    extend (config, ctx) {
      if (ctx.dev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

  1. package.json 完整配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    {
      "name": "designer",
      "version": "1.0.0",
      "description": "Nuxt.js project",
      "author": "sulang <sulang357159@163.com>",
      "private": true,
      "scripts": {
        "dev": "nuxt",
        "build": "nuxt build",
        "start": "nuxt start",
        "generate": "nuxt generate",
        "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
        "precommit": "npm run lint"
      },
      "dependencies": {
        "element-ui": "^1.4.10",
        "nuxt": "^1.0.0-rc11"
      },
      "devDependencies": {
        "node-sass": "^4.6.0",
        "sass-loader": "^6.0.6",
        "babel-eslint": "^7.2.3",
        "eslint": "^4.3.0",
        "eslint-config-standard": "^10.2.1",
        "eslint-loader": "^1.9.0",
        "eslint-plugin-html": "^3.1.1",
        "eslint-plugin-import": "^2.7.0",
        "eslint-plugin-node": "^5.1.1",
        "eslint-plugin-promise": "^3.5.0",
        "eslint-plugin-standard": "^3.0.1"
      }
    }

  2. 跟目录创建plugins目录，添加element-ui.js，内容如下：

    1
    2
    3
    4
    5
    6
    7
    import Vue from 'vue'
    import Element from 'element-ui/lib/element-ui.common'
    import locale from 'element-ui/lib/locale/lang/en'

    export default () => {
      Vue.use(Element, { locale })
    }