前言

如果我们需要对现有的vue项目进行ssr改造，nuxt.js是一个不错的选择。这里作为例子的“现有项目”是一个“高仿”外卖APP spa。然而，我没有开发所有的功能(不可能全部实现)，但我只是做了一些基本的界面含义

这是这个演示对老鼠的ssr转化

准备好

现有目录

显然，这是一个使用vue-cli构建的项目

其中prod.server.js是构建后的启动文件

Dataa.json文件是模拟数据，将在build/dev-server.js中使用

安装和配置

安装nuxt

Npminstall-save-devnuxt创建一个新的nuxt文件夹

我们需要在根目录下建立一个nuxt文件夹，这个文件夹的内部组织是按照nuxt本身的应用目录架构来组织的(参考)

请注意，静态目录中有一个/logo.png，它将用作项目图标。这张图片在nuxt.config.js中的地址直接写成/logo.png，下一节详细描述nuxt文件夹的组织。

创建并设置nuxt.config.js

当然，我们还需要在根目录中创建一个nuxt.config.js文件来组织Nuxt.js应用程序的个性化配置。在本项目中，需要设置以下几点：

源目录路径头中的Meta和link(主要是图标)需要全局使用css样式项目中的图片和字体文件。虽然nuxt默认配置它们，但是我们需要重新定义一些内容(扩展项目中的限制)。sass在项目中使用，需要进行配置。因此，nuxt.config.js的代码如下

module.exports={//设置nuxt源代码srcdir:' nuxt/'、head: {title:' sell-nuxt '、meta 3360[{ charset : ' utf-8 ']的目录路径。{ name: 'viewport '，content : ' width=device-width，initial-scale=1，user-scale=no，maximum-scale=1.0，minimum-scale=1.0' } ]，link :[{ rel : ' short角质层'，type:' image/png '，//注意图片的路径直接指向logo.png href : '/logo . png ' }]}，css: [ '~assets(png|jpe？g|gif|svg)(？*)?$/，loader: 'url-loader '，options: { limit: 10000，name: 'img/[name]。[hash:7]。[ext]' } }，{ test: /。(woff2？|eot|ttf|otf)(？*)?$/，loader: 'url-loader '，options: { limit: 10000，name: 'fonts/[name]。[hash:7]。[ext]' } }，{ test: /。scss $/loader : ' vue-style-loader！css加载器！Sass-loader'}] }}配置package.json

Package.json是npm的配置文件。现在，我们需要配置脚本选项

脚本' : { 'dev': 'nuxt '，' build': 'nuxt build '，' start': 'nuxt start '，' generate': 'nuxt generate '，Lint' :' eslint-ext.js，vue-ignore-path.gitignore . '、' precommit' :' npm run lint'}可以参考nuxt的命令列表

改革后的目录

有一个nuxt.api.js，为ssr转换后的项目提供api接口。它使用koa并在端口3001上运行

Nuxt文件夹组织

因为我们已经开发了项目代码，nuxt文件夹中的大部分代码可以直接从现有代码中复制

布局

布局目录布局用于组织应用程序的布局组件。nuxt可以通过添加layouts/default.vue文件来扩展应用程序的默认布局，并在布局下创建一个新的default.vue

template div id=' app ' v-header v-bind : seller=' seller '/v-header v-tab/v-tab nuxt//div/template script从' axios '导入axios；//从“~/components/header/header.vue”导入组件导入头；从“~/components/tab/tab.vue”导入选项卡；export default { data : function(){ return { seller : } }，create d : function(){ axios . get(' http://localhost :3001/seller ')。然后(RES={ console . log(RES . data)；this . seller=RES . data . data；});}，components : { ' v-header ' : header，' v-tab ' : tab } }/script style lang=' SCS ' rel=' text/CSS '/style text/component用于显示页面的主要内容，即“商品”、“评论”和“商家”

页

Nuxt根据pages目录结构自动生成vue-router模块的路由配置，无疑非常方便

不难看出，商品、出价和卖家分别对应“商品”、“评论”和“商家”

使用此设置，nuxt自动生成的路由配置如下

router : { router :[{ name : ' index '，path: '/'，component : ' pages/index . vue ' }，{ name: 'goods '，path: '/goods '，component : ' pages/goods/index . vue ' }，{ name: 'patings '，path: '/patings '，component : ' pages/patings/index . vue '官方的nuxt文档没有说明如何设置默认路径，这就是为什么我们应该在pages下创建一个index.vue。

template/templatescript导出默认值{ created:function(){ this。$ router . push('/goods ')；//页面加载时跳转} }/script style lang=' SCS ' rel=' text/CSS '/style对于那些不需要asyncData方法特性的组件，比如页面下的页面组件，我们可以把它们放在components目录下

资产

资源目录资产用于组织未编译的静态资源，如LESS、SASS或JavaScript。当我提到路径时，这个目录是最糟糕的。在正式文档中，每个目录都有别名，在nuxt.config.js中配置时是有效的，比如之前配置的css选项，但这并不意味着我们可以在组件中有效地使用这些别名。我们最好在组件中使用相对路径，比如不能直接在components/header/header.vue中写~assets，但是要老老实实写相对路径。

style lang=' scss ' rel=' text/CSS ' src=' http :/./assets/base . scss/' style style type=' text/CSS ' src=' http :/./assets/style . CSS/style style lang=' SCS ' rel=' text/CSS ' @ import '././assets/mixin . scss '；@import。/header . scss '；/style以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。