nuxt 中文网:https://www.nuxtjs.cn/
一.入门
1.nuxt 是什么?
一个基于 Vue.js 的服务端渲染应用框架
2.创建 nuxt 项目
此部分可参考官网:https://www.nuxtjs.cn/guide/installation
(1)安装 node 环境
(2)安装 create-nuxt-app
命令行中输入 npm i create-nuxt-app -g 进行全局安装
(3)创建项目
命令行中输入
npx create-nuxt-app testApp // 创建 testApp 项目
然后根据提示选择所需配置
二.开发
这里整理一些常用功能点。
1.自定义 404 页面
nuxt 默认有 404 效果,但多数情况下我们都会自定义 404 页面,在 nuxt.config.js 中加入
router: {
// 自定义 404 页面
extendRoutes(routes, resolve) {
routes.push({
name: '404',
path: '*',
component: resolve(__dirname, 'pages/404.vue')
})
}
}
参考官网:https://www.nuxtjs.cn/guides/configuration-glossary/configuration-router#extendroutes
2.封装全局变量
我们可以在 nuxt.config.js 中设置定义全局变量
head: {
title: process.env.title // 网站名
},
env: {
title: '网站名',
baseUrl: '/test/api'
},
如何使用呢?
在 pages 页面组件中使用
asyncData (context) {
return {
mainTitle: context.env.title
}
},
注意:asyncData 只能在页面组件中使用,asyncData 不要与 data 中的数据重合
官网-asyncData:https://www.nuxtjs.cn/guide/async-data
官网-env:https://www.nuxtjs.cn/guide/async-data
3.动态修改页面 title
当我们进行网页跳转的时候,一般要修改页面 title。这里以从主页跳转到新闻中心页为例:
在页面组件 news.vue 中
asyncData (context) {
return {
mainTitle: context.env.title
}
},
head () {
return {
// 修改页面 title
title: this.title + '_' + this.mainTitle
}
},
data () {
return {
title: '新闻中心'
}
},
这里通过 head() 方法进行页面 title 的修改
4.配置 Element-UI 按需引入方法
在 plugins 目录下创建 element-ui.js 文件,文件内容为需要引入的 element-ui 组件
import Vue from 'vue'
// element-ui 按需引入
import {
Loading,
MessageBox,
Message,
Notification,
Popover
} from 'element-ui'
Vue.use(Popover)
Vue.use(Loading.directive)
Vue.prototype.$loading = Loading.service
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$prompt = MessageBox.prompt
Vue.prototype.$notify = Notification
Vue.prototype.$message = Message
然后在 nuxt.config.js 中引入该文件
plugins: [
'@/plugins/element-ui'
],
注意:这使用了按需引入就不要在引入 element-ui 的 css 文件了!!!
最后,还需要在该文件中配置
build: {
// Element UI 按需引入
babel: {
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
}
5.将页面中的 css 提取到 link
nuxt 默认是将页面的 css 放在 <style> 标签中的,当 css 代码很多时就很难看了,而且也对爬虫不友好(我猜的,比如百度蜘蛛),所以可以考虑将它放入 link 中。
在 nuxt.config.js 中配置
方式一(不推荐):
build: {
extractCSS: { allChunks: true } // CSS link 引入, 没有 preload (页面会闪烁)
},
方式二(推荐):
build: {
// CSS link preload 方式引入, 所有 css 样式文件会打包成 styles.css
extractCSS: true,
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.(css|vue)$/,
chunks: 'all',
enforce: true
}
}
}
}
},
方式二的缺点就是将所有样式都打包到一个文件中, 就没法按需加载
官网-extractcss:https://www.nuxtjs.cn/api/configuration-build#extractcss
三.项目部署
1.打包项目
运行 npm run build
2.将打包项目上传到服务器
只需上传这四个文件即可,然后 npm install
3.服务器上安装 pm2
安装 pm2 是用于做进程守护,通过 pm2 方式启动 nuxt 项目,以防止该进程被意外关闭。
比如,如服务器是 windows,当使用命令行工具启动 nuxt 项目后,若不小心关掉命令行工具,就会导致我们的项目挂掉,Linux 服务器类似。
执行 npm install -g pm2 全局安装
4.设置 ecosystem.config.js 文件
因为要用 pm2,所以需要添加该文件。内容如下
module.exports = {
apps: [
{
name: 'mh', // 项目名
exec_mode: 'cluster',
instances: 'max', // Or a number of instances
script: './node_modules/nuxt/bin/nuxt.js',
args: 'start',
},
],
}
该文件与上面4个打包文件处于同级目录下
5.pm2 启动项目
通过执行 pm2 start 命令启动
更多 pm2 操作,包括开机自启动等请看我以前的文章:Linux 服务器部署 vue(SPA) 与 nuxt(SSR)项目