Project name // 项目名称 Project description // 项目描述 Use a custom server framework // 选择服务器框架 Choose features to install // 选择安装的特性 Use a custom UI framework // 选择UI框架 Use a custom test framework // 测试框架 Choose rendering mode // 渲染模式 Universal // 渲染所有连接页面 Single Page App // 只渲染当前页面
这些都是比较重要的其他的配置内容就不做介绍了，一路回车即可。
目录结构介绍
assets // 存放素材(需要执行webpack预处理操作) components // 组件 layouts // 布局文件 static // 静态文件(不需要webpack预处理操作) middleware // 中间件 pages // 所有页面 plugins // 插件 server // 服务端代码 store // vuex
配置文件
const pkg = require('./package') module.exports = { mode: 'universal', // 当前渲染使用模式 head: { // 页面head配置信息 title: pkg.name, // title meta: [ // meat { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: pkg.description } ], link: [ // favicon，若引用css不会进行打包处理 { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ] }, loading: { color: '#fff' }, // 页面进度条 css: [ // 全局css（会进行webpack打包处理） 'element-ui/lib/theme-chalk/index.css' ], plugins: [ // 插件 '@/plugins/element-ui' ], modules: [ // 模块 '@nuxtjs/axios', ], axios: {}, build: { // 打包 transpile: [/^element-ui/], extend(config, ctx) { // webpack自定义配置 } } }
Nuxt运行命令
{ "scripts": { // 开发环境 "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server", // 打包 "build": "nuxt build", // 在服务端运行 "start": "cross-env NODE_ENV=production node server/index.js", // 生成静态页面 "generate": "nuxt generate" } }
结语
这里简单的对Nuxt做了一些介绍，会持续更新对Nuxt的跟进，希望会对大家有所帮助，如果有什么问题，可以在下面留言。