Nuxt是什么？

Nuxt是基于Vuejs的一套服务端渲染框架，Nuxt中不仅仅有Vuejs，还集成了Vuex等等。Nuxt主要关注的是应用的UI渲染。

使用

初始化项目

1
npx create-nuxt-app <my-project>

or

1
npm init nuxt-app <my-project>

or

1
yarn create nuxt-app <my-project>

运行

1
yarn run dev

打包

1
yarn run build

部署

1
yarn start

使用插件

ElementUI

安装

1
2
3
yarn add element-ui
// or
npm install element-ui --save

在plugin目录下创建element-ui.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import Vue from 'vue'
import {
  Button,
  Loading,
  Row,
  Col,
  Container,
  Aside,
  Main
} from 'element-ui' // 可按需引入你需要的组件
// 注意：如果打包时也要按需引入还需要安装babel-plugin-component插件
// 直接 yarn add babel-plugin-component --dev  安装

// 并使用Vue.use方法使用它们


Vue.use(Button)
Vue.use(Row)
Vue.use(Col)
Vue.use(Container)
Vue.use(Aside)
Vue.use(Main)
Vue.prototype.$loading = Loading.service // 在Vue对象的原型上直接声明loading组件属性

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
{
  /*
  ** Global CSS
  */
  css: [
    'element-ui/lib/theme-chalk/index.css'
  ],
  plugins: [
    { src: '~/plugins/element-ui', ssr: true}
  ],
  /*
  ** Build configuration
  */
  build: {
    vendor: [
      'element-ui' // 防止被重复打包
    ],
    babel: {
      'plugins': [
        [
          'component',
          {
            'libraryName': 'element-ui',
            'styleLibraryName': 'theme-chalk'
          }
        ]
      ],
      'comments': true
    },
  }
}