easy-team / egg-vue-typescript-boilerplate Goto Github PK

View Code? Open in Web Editor NEW

72.0 6.0 18.0 2.17 MB

Egg Vue TypeScript Server Side Render (SSR) / Client Side Render (CSR)

Home Page: https://easyjs.cn/egg-vue

License: MIT License

TypeScript 53.02% JavaScript 16.33% Vue 30.64%

eggjs vue typescript webpack easywebpack ts-loader webpack3 nodejs ts-node wepback4

egg-vue-typescript-boilerplate's Introduction

egg-vue-typescript-boilerplate

基于 Egg + Vue + Webpack SSR 服务端渲染和 CSR 前端渲染工程骨架项目。

Single Page Application Isomorphic Example for Egg + Vue, Front-End and Node of The Application are Written in TypeScript.

Document

QuickStart

Development

$ npm install -g easywebpack-cli
$ easy init
$ npm install
$ npm run dev
$ open http://localhost:7001

Publish

npm run tsc
npm run build
npm start

Features

✔︎ Single Page Application, Support Vue Server Side Render and Client Side Render Modes, Rendering Cache, Automatic Downgrade
✔︎ Front-End and Node of The Application are Written in TypeScript, Use vue-property-decorator and vuex-class
✔︎ Build with Webpack + TypeScript, Auto Building, Hot Reload, Code Splitting, High Speed, Performance Optimization

Rendering

Front-End TypeScript

Node TypeScript

UI ScreenShot

TypeScript

License

MIT

egg-vue-typescript-boilerplate's People

Contributors

Stargazers

Watchers

Forkers

wuzhuojun lu592674374 zqun xfh0192 lymne baibangyi isinry sclihuiming johnzhaoxiaohu jjmini luoxiapeng morkro luobinbinchina keyzf daizhiyu howaboutryze npmmirror boonville

egg-vue-typescript-boilerplate's Issues

构建项目出错

使用脚手架构建项目出现如下错误：
`> egg-bin dev -r 'egg-ts-helper/register'

Error: Cannot find module ''egg-ts-helper/register''
at Function.Module._resolveFilename (module.js:536:15)
at Function.Module._load (module.js:466:25)
at Module.require (module.js:579:17)
at Function.Module._preloadModules (module.js:736:12)
at preloadModules (bootstrap_node.js:471:38)
at startup (bootstrap_node.js:184:9)
at bootstrap_node.js:608:3
⚠️ Error: D:\www\egg-vue-typescript\node_modules\egg-bin\lib\start-cluster {"typescript":true,"baseDir":"D:\www\egg
-vue-typescript","framework":"D:\www\egg-vue-typescript\node_modules\egg","workers":1} exit with code 1
⚠️ Command Error, enable DEBUG=common-bin for detail
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: egg-bin dev -r 'egg-ts-helper/register'
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Raytine\AppData\Roaming\npm-cache_logs\2018-09-12T16_09_28_549Z-debug.log `

typescript版本无法集成：sequelize-typescript

使用了typescript版本，但是无法集成：sequelize-typescript

看起来并没有集成 egg官方的typescript方案，如：egg-bin dev -r egg-ts-helper/register

layout/admin/index.vue插入cdn后，webpack打包会卡住

在layout里面的index.vue中(app/web/component/layout/admin/index.vue)
用来显示首页的地方
在<head>内试着插入cdn连结，假设polyfill.js
插入<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>后
执行npm run dev，webpack打包过程就会停住完全不动

个人猜测是把js的内容一起打包进去所以导致特别久，但不确定对不对

2019-04-17 09:13:57,774 INFO 2428 [master] node version v11.14.0
2019-04-17 09:13:57,776 INFO 2428 [master] egg version 2.21.1
2019-04-17 09:14:03,577 INFO 2428 [master] agent_worker#1:9892 started (5544ms)
2019-04-17 09:14:07,843 INFO 2428 [master] egg started on http://127.0.0.1:7001 (10067ms)
webpack build [==========                                                                                          ] 10% (0.0 seconds)
 [webpack-tool] start webpack node building server: http://127.0.0.1:9001
webpack build [==========                                                                                          ] 10% (0.0 seconds)
 [webpack-tool] start webpack web building server: http://127.0.0.1:9000
webpack build [=============                                                                                       ] 13% (2.9 seconds)

自己试过的方向：

放置不理会，看看最终有无打包好，放了近1小时仍没反应
插入别的js(如jquery, bootstrap)，照卡，只是停的%数不同。也就是只要有插入一个js的cdn就会卡住
换作业系统，在MacOS、Windows 下都一样
翻过不少webpack的文件，找不到解决方向
执行npm cache clean --force，一样无效
重新安装所有套件，无用

PS: 有使用npm-check-updates把所有套件都更新到最新，且使用目前最新版本的Node.Js

先谢谢协助了

请问有考虑集成typeORM吗

eggjs官方并没特别支持typeORM
还是说是建议用官方推荐的egg-sequelize呢？

webpack 5

Hello easy-team,

I really like your tools!

I tried upgrading this example to webpack 5 by upgrading the following dependencies:

"easywebpack-cli": "^5.0.0"
"easywebpack-vue": "^5.0.1"
"egg-webpack": "^5.0.1"

However it does not work ... the generated browser code is not executable.

Could you give it a try?

Miguel

在Vue文件中使用Typescript的语法报错

在app/web/page/app/app.vue里面增加了一句const a:string = 'a'，编译报错

ERROR in ./app/web/page/app/app.vue (./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/web/page/app/app.vue)
    Module build failed (from ./node_modules/babel-loader/lib/index.js):
    SyntaxError: Unexpected token (18:7)
    
      16 | sync(store, router);
      17 | 
    > 18 | const a:string = 'a'
         |        ^
      19 | 
      20 | export default {
      21 |   router,
    
     @ ./app/web/page/app/app.vue 3:0-109 3:0-109 4:0-122 17:2-16
     @ ./node_modules/babel-loader/lib!./app/web/framework/vue/entry/client-loader.ts!./app/web/page/app/app.vue
     @ multi (webpack)-hot-middleware/client?path=http://10.254.48.36:9000/__webpack_hmr&noInfo=false&reload=false&quiet=false babel-loader!./app/web/framework/vue/entry/client-loader.ts!./app/web/page/app/app.vue

"egg-view-vue-ssr": "^3.0.5",
"egg-webpack": "^4.4.9",
"egg-webpack-vue": "^2.0.2",
"vue": "^2.5.21",
"vue-property-decorator": "^7.2.0",
"vue-router": "^3.0.2",
"vuex": "^3.0.1",
"vuex-class": "^0.3.1",
"vuex-router-sync": "^5.0.0"

ctx.render('admin/home.js') 过于复杂了（这个是一个SPA？），能否再写一个单页面的。
ctx.renderClient('admin/login.js') 没有使用的代码，
- 我在router定义路由访问 router.get('/login', controller.admin.login)，得到的是一个仅有 layout.html 里的公共代码的空白页面
- 新建 renderClient 渲染的页面也全是仅有 layout.html 公共代码的空白页面

弄了几天了。还是没搞定

vue不使用typescript如何配置。

这个项目里 vue不想使用ts，只有egg使用ts。该如何配置？

提供的debug模式不能用

使用debug模式启动

npm run debug

结果访问对应的应用如下图所示

还有希望可以提供vscode debug的配置例子

egg2.6 TypeScript tool support，是否有计划更新ts版的脚手架

eggjs/egg#2272