如果我们需要对现有的vue项目进行ssr改造,使用nuxt。js是一个不错的选择。这里用作例子的“现有项目”是一个“高仿”饿了么外卖程序的spa。不过我没有把全部功能开发出来(全部做出来就不得了了),只是做出几个基本界面意思意思
npm安装——save-dev nuxt
<强>新建nuxt文件夹
我们需要在根目录下建立一个nuxt文件夹,该文件夹的内部组织按照nuxt本身的应用目录架构进行组织(参考)
模块。出口={//设置nuxt源码目录路径
srcDir: " nuxt/?
头:{
标题:“sell-nuxt”,
元:[
{
字符集:“utf - 8”
},
{
名称:“视窗”,
内容:“宽度=设备宽度,初始=1,user-scalable=不,最大范围=1.0,最小规模=1.0 "
}
),
链接:(
{
rel:“快捷方式图标”,
类型:“图像/png”,//注意图片的路径直接指向静态下的logo.png
href:“/logo.png”
}
]
},
css: [
“~资产/reset.css”
),
构建:{
供应商:[' axios '),
加载器:(
{
测试:/\。(png | jpe # 63; g | gif | svg)(\ & # 63;。*) & # 63;美元/,
装载机:“url-loader”,
选择:{
限制:10000
名称:“img/[名字]。[散列:7]。[ext]”
}
},
{
测试:/\。(woff2& # 63; |测试结束| ttf |传递)(\ & # 63;。*)& # 63;美元/,
装载机:“url-loader”,
选择:{
限制:10000
名称:'字体/[名字]。[散列:7]。[ext]”
}
},
{
测试:/\ .scss/美元,
装载机:“vue-style-loader ! css-loader ! sass-loader”
}
]
}
}
配置包。json
package.json是npm的配置文件,现在,我们需要对脚本选项进行配置
可以参考nuxt的命令列表
<强>改造后的目录
