前提

安装好nodejs并配置好环境变量,最好是 node10,https://nodejs.org/en/download/

参考我之前的文章

debian安装nodejs

Yarn && npm设置镜像源

开始

初始化项目

首先创建一个文件夹webapp,并使用yarn初始化

yarn init

完整命令

➜  main git:(j2v8-version) ✗ mkdir webapp
➜  main git:(j2v8-version) ✗ cd webapp
➜  webapp git:(j2v8-version) ✗ pwd
/mnt/c/Users/Terwer/IdeaProjects/jvue/src/main/webapp
➜  webapp git:(j2v8-version) ✗ yarn init
yarn init v1.13.0
question name (webapp): jvue
question version (1.0.0):
question description: Next light-weight,responsive project With Vue,webpack,Spring Boot and eclipse j2v8 Script engine for server-side-rendering
question entry point (index.js): server.js
question repository url:
question author: Terwer
question license (MIT):
question private:
success Saved package.json
Done in 317.09s.
➜  webapp git:(j2v8-version) ✗

初始化类库

➜  webapp git:(j2v8-version) ✗ yarn
yarn install v1.13.0
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.

安装项目依赖

yarn add vue vue-router

安装webpack打包

yarn add -D webpack webpack-cli

项目结构

所有源码放在src子文件下

app.js : 项目入口

import Vue from "vue";
import App from "./App.vue";
new Vue({
  el: "#app",
  render: h => h(App)
});

App.vue: 根组件

<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

pages: 页面,每个文件对应一个路由

components: 子组件

router: 路由配置

store: vuex配置(稍后添加)

config: 项目配置

eslint美化代码

yarn add -D  eslint babel-eslint eslint-config-google eslint-loader eslint-plugin-html eslint-plugin-vue @vue/eslint-config-prettier

.eslintrc.js

const config = require("./config");

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    "google",
    "eslint:recommended",
    "plugin:vue/essential",
    "@vue/prettier"
  ],
  // required to lint *.vue files
  plugins: ["html"],
  settings: {
    "import/resolver": {
      webpack: {
        config: "build/webpack.base.conf.js"
      }
    }
  },
  // add your custom rules here
  rules: {
    "no-console": "off",

    // allow debugger; instruction during development
    "no-debugger": config.isProduction ? 2 : 0,

    "no-unused-vars": [
      2,
      {
        vars: "local",
        args: "none"
      }
    ],
    semi: ["error", "always"],

    // don"t require comma in the last line of an object/dictionary declaration
    "comma-dangle": ["error", "never"],

    // force space after and before curly braces in object/dict declarations
    "object-curly-spacing": ["error", "always"],

    // ignore max-len for comments
    "max-len": [
      "error",
      {
        code: 100,
        ignoreComments: true,
        ignoreTrailingComments: true,
        ignoreUrls: true,
        ignoreStrings: true
      }
    ],

    // force "===" in comparisons when ambiguous
    eqeqeq: ["error", "smart"],

    // force double quotes
    quotes: ["error", "double"],

    "require-jsdoc": 1,

    "new-cap": ["error", { capIsNew: false }]
  },
  parserOptions: {
    sourceType: "module",
    parser: "babel-eslint"
  }
};

package.json 添加命令

 "lint": "eslint --ext .js,.vue,.html --ignore-path .gitignore --ignore-pattern !.eslintrc.js --ignore-pattern !.babelrc.js . --fix --color",

webpack项目打包配置

安装 vue-loader

yarn add -D vue-loader vue-template-compiler vue-style-loader css-loader

首先配置非服务端渲染

安装 webpack-dev-server 以及 html-webpack-plugin

yarn add -D webpack-dev-server html-webpack-plugin

webpack.nossr.config.js

const { VueLoaderPlugin } = require("vue-loader");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  mode: "development",
  node: {
    fs: "empty",
    module: "empty"
  },
  entry: "./src/app.js",
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: "vue-loader"
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: "./public/index.ejs",
      title: "Next Vue SSR Project for Java j2v8 Script engine",
      favicon: "./public/favicon.ico",
      inject: true
    })
  ],
  devServer: {
    host: "0.0.0.0",
    port: 8888
  }
};

package.json 添加命令

 "nossr": "webpack-dev-server --config build/webpack.nossr.config.js --progress"

查看结果

运行 yarn nossr ,查看结果

Vue SSR 配合Java的Javascript引擎j2v8实现服务端渲染2创建Vue2+webpack4项目的更多相关文章

  1. Vue SSR配合Java的Javascript引擎j2v8实现服务端渲染1概述

    原文地址 http://www.terwergreen.com/post/vue-ssr-j2v8-1.html 初步实现方案探索(Node环境) // 第 1 步:创建一个 Vue 实例 const ...

  2. Vue SSR 配合Java的Javascript引擎j2v8实现服务端渲染3配置webpack支持ssr

    安装 cross-env yarn add -D cross-env 安装 html-webpack-plugin yarn add -D html-webpack-plugin 安装 webpack ...

  3. Vue SSR 配合Java的Javascript引擎j2v8实现服务端渲染4支持构建bundle

    安装 webpack-node-externals yarn add -D webpack-node-externals

  4. Vue、Nuxt服务端渲染,NodeJS全栈项目,面试小白的博客系统~~

    Holle,大家好,我是李白!! 一时兴起的开源项目,到这儿就告一段落了. 这是一个入门全栈之路的小项目,从设计.前端.后端.服务端,一路狂飙的学习,发量正在欣喜若狂~~ 接触过WordPress,H ...

  5. Vue(服务端渲染)

    一.前言 1.服务端渲染图解                                                 2.简介服务端渲染                             ...

  6. 【分享】Vue 资源典藏(UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例)

    Vue 资源典藏,包括:UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...

  7. 使用 PHP 来做 Vue.js 的 SSR 服务端渲染

    对于客户端应用来说,服务端渲染是一个热门话题.然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js 环境开发的人来说. 我发布了两个库让 PHP 从服务端渲染成为可能.spatie/se ...

  8. 服务端渲染 数据驱动 不是渲染后的网页,而是一个由html和Javascript组成的app ssr 隐藏接口服务器

    小结: 1. 服务端渲染主要的工作是把组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序. 服务器给到客户端的已经是 ...

  9. Vue 爬坑之路(十一)—— 基于 Nuxt.js 实现服务端渲染(SSR)

    直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 ...

随机推荐

  1. ql.io来自ebay的api快速集成的构建api的框架

    说的有点绕口,实际上是为了减轻在Web上请求数据的复杂度,eBay推出了自己的Web查询语言——ql.io,ql.io将多个独立的API请求绑定成一个单独的请求. ---待续

  2. 谈谈MySQL的do语句

    [select在某些场景下的不足] 比如说我们想让MySQL暂停5秒.那么可以这样写 ); +----------+ ) | +----------+ | +----------+ row in se ...

  3. GuavaCache学习笔记一:自定义LRU算法的缓存实现

    前言 今天在看GuavaCache缓存相关的源码,这里想到先自己手动实现一个LRU算法.于是乎便想到LinkedHashMap和LinkedList+HashMap, 这里仅仅是作为简单的复习一下. ...

  4. tensorflow 笔记10:tf.nn.sparse_softmax_cross_entropy_with_logits 函数

    函数:tf.nn.sparse_softmax_cross_entropy_with_logits(_sentinel=None,labels=None,logits=None,name=None) ...

  5. Go Revel - Cache(缓存)

    revel在服务器端提供了`cache`库用以低延迟的存储临时数据.它缓存那些需要经常访问数据库但是变化不频繁的数据,也可以实现用户会话的存储. ##有效期 一下三种方法为缓存元素设置过期时间: 1. ...

  6. Brainfuck反汇编-高级版(Python)

    import re def sym2cal(s): if '>' in s: return len(s) else: return -len(s) def cal(s): if '+' in s ...

  7. EntityFramework 多数据库链接,MySql,SqlServer,Oracel等

    环境:EntityFramework5.0,MySql5.6,MSSQL2012 EF是强大的ORM工具,真正意义上的多数据库链接指的是不同类型的数据库,以及同种类型的数据库多个库,EF很好的支持这一 ...

  8. Entity Framework定义外键,限制通过migration命令自动更改字段名称

    1.问题 在定义一个表的外键时,通过add-migration命令生成,并通过update-database更新到数据库,发现外键名称发生了重命名.举例说明: 人员表[User](Id,Name,Pa ...

  9. Caltech数据使用详情

    Caltech官网: http://www.vision.caltech.edu/Image_Datasets/CaltechPedestrians/ 以Caltech测试集为例(大概是4095个图片 ...

  10. Oracle调整内存超出限制出现ORA-27100: shared memory realm already exists问题解决办法

    今天测试服务器遇到问题 ORA-04030:out of process memory when trying to allocate string bytes 一看就猜到是内存不足了,把Oracle ...