本章介绍目前流行的
vue
的服务器端渲染,采用第三方框架nuxt
中文文档来做vue
的服务器端渲染
一、构建一个项目的基本步骤
-
1、创建一个空的目录存放项目
-
2、初始化项目
npm init --yes
-
3、安装
nuxt
的依赖包npm install --save nuxt
-
4、配置几个启动、打包命令及配置端口
**package.json** ... "config": { "nuxt": { "host": "0.0.0.0", "port": "3333" } }, "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate" }, ...
-
5、根据文档构建一个项目全部的目录
components
存放公共组件的css
存放公共样式,可以在nuxt.config.js
中引入layouts
是布局文件middleware
是中间件文件mock
是自己模拟数据的文件pages
自己书写vue
组件的文件plugins
是使用插件存放的目录static
是静态文件,一般存放图片类的store
可以使用vuex
状态机管理项目状态nuxt.config.js
是nuxt
的配置文件
-
5、如有需要下载我的代码跑下就好,其实这个很好理解的传送门