npm install vue vue-server-renderer --save
// 第 1 步:创建一个 Vue 实例
const Vue = require('vue')
const app = new Vue({
template: `<div>Hello World</div>`
})
// 第 2 步:创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer()
// 第 3 步:将 Vue 实例渲染为 HTML
renderer.renderToString(app, (err, html) => {
if (err) throw err
console.log(html)
// => <div data-server-rendered="true">Hello World</div>
})
// 在 2.5.0+,如果没有传入回调函数,则会返回 Promise:
renderer
.renderToString(app)
.then(html => {
console.log(html)
})
.catch(err => {
console.error(err)
})
网址: nuxt网址
npm v5.2.0引入的一条命令(npx),引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验
举例: 使用express-generator创建项目
老方法:
npm install express-generator -g
express app
npx方式
npx express app
npx可以减少我们全局安装脚手架
我们使用脚手架 create-nuxt-app
避免全局安装,我们使用npx
npx create-nuxt-app app
npm i
cd app
yarn run dev
nuxt-目录结构:nuxt-目录结构
nuxt-配置:nuxt-配置
举例: 配置 scss
// 1. 在assets 目录中新建css目录,在css目录中新建 main.scss 文件
main.scss
body: {
background: red;
}
// 2. 命令行安装loader
yarn add node-sass sass-loader scss-loader -D
// 3. 在 nuxt.config.js 文件中引入scss文件
css: [
'element-ui/lib/theme-chalk/index.css',
{
src: '@/assets/css/main.scss',
lang: 'scss'
}
],
//
$ nuxt build
|| $ nuxt start
$ npm run generator