Vue SSR 配合Java的Javascript引擎j2v8实现服务端渲染2创建Vue2+webpack4项目
前提
安装好nodejs并配置好环境变量,最好是 node10,https://nodejs.org/en/download/
参考我之前的文章
开始
初始化项目
首先创建一个文件夹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项目的更多相关文章
- Vue SSR配合Java的Javascript引擎j2v8实现服务端渲染1概述
原文地址 http://www.terwergreen.com/post/vue-ssr-j2v8-1.html 初步实现方案探索(Node环境) // 第 1 步:创建一个 Vue 实例 const ...
- 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 ...
- Vue SSR 配合Java的Javascript引擎j2v8实现服务端渲染4支持构建bundle
安装 webpack-node-externals yarn add -D webpack-node-externals
- Vue、Nuxt服务端渲染,NodeJS全栈项目,面试小白的博客系统~~
Holle,大家好,我是李白!! 一时兴起的开源项目,到这儿就告一段落了. 这是一个入门全栈之路的小项目,从设计.前端.后端.服务端,一路狂飙的学习,发量正在欣喜若狂~~ 接触过WordPress,H ...
- Vue(服务端渲染)
一.前言 1.服务端渲染图解 2.简介服务端渲染 ...
- 【分享】Vue 资源典藏(UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例)
Vue 资源典藏,包括:UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...
- 使用 PHP 来做 Vue.js 的 SSR 服务端渲染
对于客户端应用来说,服务端渲染是一个热门话题.然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js 环境开发的人来说. 我发布了两个库让 PHP 从服务端渲染成为可能.spatie/se ...
- 服务端渲染 数据驱动 不是渲染后的网页,而是一个由html和Javascript组成的app ssr 隐藏接口服务器
小结: 1. 服务端渲染主要的工作是把组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序. 服务器给到客户端的已经是 ...
- Vue 爬坑之路(十一)—— 基于 Nuxt.js 实现服务端渲染(SSR)
直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 ...
随机推荐
- Chrome 调试技巧: 调整网速
为了方便调试某些内容,比如我想网速设置为 1kb每秒,甚至0kb每秒. 1.打开chrome DevTool ,切换到 "Network".找到最右侧 "Online&q ...
- sringboot项目在tomcat上的部署
sringboot项目在tomcat上的部署原文链接: https://blog.csdn.net/zhaoyahui_666/article/details/78283559#comments 20 ...
- SNF开发平台WinForm-表单验证控件-通用
CS程序也能做到像BS程序一样的验证效果,如下: 1.验证控件的展示 校验时如果不符合验证条件的控件,会在控件上显示较显眼的图标. 当出现不符合验证的控件时,鼠标悬浮会显示自定义的提示信息. 如:输入 ...
- 我要搬家到csdn,大家到那里来看我吧,平台更大,看到的人更多!
ruby代码 #encoding: utf-8 require 'net/http' require 'open-uri' require 'nokogiri' # 用于解析html的模块 # sud ...
- I帧、P帧、B帧、GOP、IDR 和PTS, DTS之间的关系
一.视频传输原理 视频是利用人眼视觉暂留的原理,通过播放一系列的图片,使人眼产生运动的感觉.单纯传输视频画面,视频量非常大,对现有的网络和存储来说是不可接受的.为了能够使视频便于传输和存储,人们发现视 ...
- Pycharm中.py文件头信息配置
在社区版的Pycharm开发软件中设置每次新建.py文件都会自动生成如下信息 #! /usr/bin/env python # -*- coding:utf-8 -*- # Author: Tdcqm ...
- 推荐几个Windows工具软件: Stickies - 桌面贴
主页: http://www.zhornsoftware.co.uk/stickies/index.html Stickies work like Post-it notes for your PC. ...
- java中的数据加密2 对称加密
对称加密 也叫私钥加密. 采用单钥密码系统的加密方法,同一个密钥可以同时用作信息的加密和解密,这种加密方法称为对称加密,也称为单密钥加密. 需要对加密和解密使用相同密钥的加密算法.由于其速度快,对 ...
- 如何搭建WebRTC信令服务器
WebRTC 有一整套规范,如怎样使用它的接口.使用SDP进行媒体协商.通过ICE收集地址并进行连通性检测等等.除此之外,WebRTC还需要房间服务器将多端聚集到一起管理,以及信令服务器进行信令数据交 ...
- Java知多少(16)StringBuffer与StringBuider
String 的值是不可变的,每次对String的操作都会生成新的String对象,不仅效率低,而且耗费大量内存空间. StringBuffer类和String类一样,也用来表示字符串,但是Strin ...