搭建Nuxt项目（配置element UI ，axios）

1.搭建Nuxt.js项目

链接: Nuxt.js官方文档.

1.1 create-nuxt-app 介绍

• Nuxt.js 提供了脚手架工具 create-nuxt-app
• create-nuxt-app 需要使用 npx
• npx 命令为 NPM版本5.2.0默认安装组件

1.2 初始化Nuxt项目

npx create-nuxt-app <项目名>

1.3 启动项目

cd 项目名
npm run dev

访问 ： http://localhost:3000/

2. 使用 Element_UI

链接: Element_UI官方文档

2.1 安装 Element_UI

npm i element-ui -S

2.2 创建ElementUI.js

在 /plugins 文件夹下面，创建 ElementUI.js 文件。

import Vue from ‘vue’
import ElementUI from ‘element-ui’
Vue.use(ElementUI)

2.3 在nuxt.config.js中添加配置

css: [
‘element-ui/lib/theme-chalk/index.css’
],
plugins: [
// ssr: true表示这个插件只在服务端起作用
{src: ‘~/plugins/ElementUI’, ssr: true }
],
build: {
// 防止element-ui被多次打包
vendor: [‘element-ui’]
}

3. 在项目中使用axios

3.1 安装axios

npm i axios -S

3.2 创建axios.js

在 /plugins 文件夹下面，创建 axios.js 文件。

import axios from ‘axios’
// 设置baseURL
axios.defaults.baseURL = ‘http://localhost:10010’
// 创建axios对象，暴露
export default axios.create()

3.3 在nuxt.config.js中添加配置

// 防止重复打包
build: {
vendor: [‘axios’]
}

3.4 使用axios

• 在项目的任意一个Vue文件中，引入生成的axios对象：

import axios from ‘~/plugins/axios’

• 没有创建axios.js，也可以直接引入axios模块来使用：

import axios from ‘axios’

创建axios.js 来生成对象的好处是，可以做一些配置信息，如baseURL等。