使用 nuxt.js 搭建项目
nuxt.js：是一个基于Vue.js的通用应用框架，一个用于Vue.js 开发SSR应用的一站式解决方案。
SSR：服务器端渲染，首屏渲染快、利于SEO、可以生成缓存片段，生成静态化文件、节能（对比客户端渲染的耗电）
基础环境搭建
一、下载template压缩包
https://github.com/nuxt-community/starter-template/archive/master.zip
二、解压
三、将template目录内容复制到项目中
- 在工作区中新建
yygh-site文件夹 - 将template中的内容复制到
yygh-site中
四、修改配置
- 修改
package.json
- 修改
nuxt.config.js
- 在
yygh-site上执行npm install
五、集成elment-ui
- 下载
element-ui，在yygh-site上执行npm install element-ui
- 在
plugins文件夹下，新建myPlugin.js文件
import Vue from 'vue'
import ElementUI from 'element-ui' // element-ui的全部组件
import 'element-ui/lib/theme-chalk/index.css' // 样式
Vue.use(ElementUI) //使用element-ui
- 在
nuxt.config.js中引入myPlugin.js的使用
module.exports = {
/*
** Headers of the page
*/
head: {
title: 'yygh-site',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '预约挂号' }
],
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, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
},
//引入myplugin.js的使用
plugins: [
{ src: '~/plugins/myplugin.js', ssr: false}
]
}
启动
npm run dev
封装axios
一、引入axios依赖
npm install axios@0.19.2
这里需要指定版本，最新版本会出现版本不兼容的情况
二、编写request.js
在yygh-site下，新建utils文件夹，并创建request.js文件
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
// create an axios instance
const service = axios.create({
baseURL: 'http://localhost', // 请求地址
timeout: 50000 // 请求超时时间
})
// request interceptor
service.interceptors.request.use(
config => {
//token 不处理，后续完善
return config
},
error => {
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
response => {
const res = response.data
// 请求成功的状态码为 200
if (res.code !== 200) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
return Promise.reject(error)
}
)
export default service