使用Nuxt.js改造已有项目的方法


Posted in Javascript onAugust 07, 2018

前言

如果我们需要对现有的vue项目进行ssr改造,使用nuxt.js是一个不错的选择。这里用作例子的“现有项目”是一个“高仿”饿了么外卖APP的spa。不过我没有把全部功能开发出来(全部做出来就不得了了),只是做出几个基本界面意思意思

使用Nuxt.js改造已有项目的方法 

下面就以这个demo为小白鼠进行ssr改造

准备

现有目录

使用Nuxt.js改造已有项目的方法 

很明显,这是使用vue-cli搭建的项目

其中prod.server.js是build之后的启动文件

dataa.json文件是模拟数据,在build/dev-server.js中会用到它

安装与配置

安装nuxt

npm install --save-dev nuxt

新建nuxt文件夹

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

使用Nuxt.js改造已有项目的方法 

注意,在static目录下有一个logo.png,它将作为项目图标,在nuxt.config.js中这张图片的地址直接写成/logo.png。下一节会对nuxt文件夹的组织进行详细说明。

新建并设置nuxt.config.js

当然,我们也需要在根目录下创建nuxt.config.js文件用于组织Nuxt.js 应用的个性化配置,在这个项目中,需要进行设置的点有:

  1. 源码目录路径
  2. head中的meta以及link(主要是图标)
  3. 全局的css样式
  4. 项目中需要使用图片和字体文件,虽然nuxt默认对其进行配置,但我们需要重新定义部分内容(项目中是扩大limit)
  5. 项目中使用了sass,需要对其进行配置

所以,nuxt.config.js的代码如下

module.exports = {
  // 设置nuxt源码目录路径
  srcDir: "nuxt/",
  head: {
    title: "sell-nuxt",
    meta: [
      {
        charset: "utf-8"
      },
      {
        name: "viewport",
        content: "width=device-width, initial-scale=1,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"
      }
    ],
    link: [
      {
        rel: "shortcut icon",
        type: "image/png",
        // 注意图片的路径直接指向static下的logo.png
        href: "/logo.png"
      }
    ]
  },
  css: [
    "~assets/reset.css"
  ],
  build: {
    vendor: ['axios'],
    loaders: [
      {
        test: /\.(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-loader!sass-loader"
      }
    ]
  }
}

配置package.json

package.json是npm的配置文件,现在,我们需要对script选项进行配置

"scripts": {
  "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.js改造已有项目的方法 

其中有个nuxt.api.js,这个文件是为完成ssr改造后的项目提供api接口的,使用koa,运行在3001端口

nuxt文件夹组织

因为我们已经把项目代码开发出来了,所以nuxt文件夹里面的大部分代码可以直接从已有代码中拷贝

layouts

布局目录 layouts 用于组织应用的布局组件,nuxt可通过添加 layouts/default.vue 文件来扩展应用的默认布局,在layouts下新建default.vue

<template>
 <div id="app">
  <v-header v-bind:seller="seller"></v-header>
  <v-tab></v-tab>
  <nuxt/>
 </div>
</template>

<script>
 import axios from 'axios';
 // 引入组件
 import header from "~/components/header/header.vue";
 import tab from "~/components/tab/tab.vue";
 export default {
  data:function(){
   return {
    seller:{}
   }
  },
  created:function(){
   axios.get("http://localhost:3001/seller").then(res=>{
    console.log(res.data);
    this.seller = res.data.data;
   });
  },
  components:{
   "v-header":header,
   "v-tab":tab
  }
 }
</script>

<style lang="scss" rel="text/css">

</style>

<nuxt/> 组件用于显示页面的主体内容,即“商品”、“评论”、“商家”这几个部分

pages

nuxt依据 pages 目录结构自动生成 vue-router 模块的路由配置,这无疑是非常方便的

使用Nuxt.js改造已有项目的方法 

不难看出goods、patings、seller分别对应“商品”、“评论”、“商家”

这样子设置,则nuxt自动生成的路由配置如下

router: {
 routes: [
  {
   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'
  },
  {
   name: 'seller',
   path: '/seller',
   component: 'pages/seller/index.vue'
  }
 ]
}

但我们希望默认进入goods,nuxt官方文档并没有说如何设置默认路径,这就是为什么要在pages下面创建一个index.vue

<template>

</template>

<script>
 export default {
  created:function(){
   this.$router.push('/goods'); // 页面加载时跳转
  }
 }
</script>

<style lang="scss" rel="text/css">

</style>

对于那些不需要像在pages下的页面组件那样有 asyncData 方法的特性的组件,我们可以将他们放到components目录下

assets

资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript,这个目录是我感觉在引用路径时最坑的一个。
在官方文档中,每个目录都有别名,这些别名在nuxt.config.js中配置时是有效的,比如之前配置的css选项,但不代表我们在组件中使用这些别名会有效,在组件中我们最好使用相对路径,比如在components/header/header.vue中就不能直接写~assets,而得老老实实写相对路径

<style lang="scss" rel="text/css" src="../../assets/base.scss"></style>
<style type="text/css" src="../../assets/style.css"></style>
<style lang="scss" rel="text/css">
  @import "../../assets/mixin.scss";
  @import "./header.scss";
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
jQuery中eq()方法用法实例
Jan 05 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
浅谈JavaScript字符串拼接
Jun 25 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
Vue.js一个文件对应一个组件实践
Oct 27 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
vue + vuex todolist的实现示例代码
Mar 09 Javascript
mpvue性能优化实战技巧(小结)
Apr 17 Javascript
如何在JavaScript中等分数组的实现
Dec 13 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
Aug 07 #Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 #Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 #Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 #Javascript
React-router4路由监听的实现
Aug 07 #Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 #Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 #Javascript
You might like
php魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
探讨php中防止SQL注入最好的方法是什么
2013/06/10 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
2012/03/07 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
Python读写Excel文件的实例
2013/11/01 Python
python练习程序批量修改文件名
2014/01/16 Python
介绍Python的Django框架中的QuerySets
2015/04/20 Python
Python 序列的方法总结
2016/10/18 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
python为什么要安装到c盘
2020/07/20 Python
俄罗斯首家面向中国消费者的一站式购物网站:Wruru
2020/05/08 全球购物
Ibatis如何使用动态表名
2015/07/12 面试题
写给保洁员表扬信
2014/01/08 职场文书
我未来的职业规划范文
2014/01/11 职场文书
总经理司机岗位职责
2014/02/06 职场文书
机关节能减排实施方案
2014/03/17 职场文书
家长会感言
2015/08/01 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
创业计划书之甜品店
2019/09/18 职场文书
比较node.js和Deno
2021/04/27 Javascript