使用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 相关文章推荐
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
JavaScript中的集合及效率
Jan 08 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
Apr 12 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
详解jquery中$.ajax方法提交表单
Nov 03 Javascript
thinkphp实现无限分类(使用递归)
Dec 19 Javascript
基于AngularJS的简单使用详解
Sep 10 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
JavaScript惰性载入函数实例分析
Mar 27 Javascript
layui多图上传实现删除功能的例子
Sep 23 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
js作用域及作用域链工作引擎
Jul 07 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
20个PHP常用类库小结
2011/09/11 PHP
PHP实现多图片上传类实例
2014/07/26 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
php 常用的系统函数
2017/02/07 PHP
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
Python向日志输出中添加上下文信息
2017/05/24 Python
一看就懂得Python的math模块
2018/10/21 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
JACK & JONES荷兰官网:男士服装和鞋子
2021/03/07 全球购物
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
法学院方阵解说词
2014/01/29 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
初中教师个人工作总结
2015/02/10 职场文书
文明礼仪倡议书
2015/04/28 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
教师读书笔记
2015/06/29 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
SQL Server表分区删除详情
2021/10/16 SQL Server
python中取整数的几种方法
2021/11/07 Python
JavaScript 对象创建的3种方法
2021/11/17 Javascript
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL