项目初始化
- 安装 ves-cli 命令行工具
$ npm instal ves-cli -g
$ ves --help
Commands:
init [options] init boilerplate
dev start ves project for develoment mode
start start ves project for production mode
build [options] [env] webpack building
debug start project for develoment debug mode
test unit test
cov code cov
add add tempplate or component
print [options] [env] print webpack config, support print by env or config key
server [options] static file web http server
dll [env] webpack dll build
clean [dir] webpack cache dir clean, if dir == "all", will clean cache dir and build dir
open [dir] open webpack cache dir
kill [port] kill port process
upgrade [options] upgrade project package to latest version
tsc [options] typescript compile- 初始化项目
可以通过 ves init 和 git clone 初始化代码
➜ $ ves init
$ ? please choose the boilerplate mode? create ves single page application
$ ? Please input project name: ves-app
$ ? Please input project description:
$ ? Please choose css style: css
$ ? Please choose the way to install dependency: none
$ [ves-cli]:query npm info of ves-admin
$ [ves-cli]:downloading https://registry.npmjs.org/ves-admin/-/ves-admin-0.3.0.tgz
$ [ves-cli]:extract to /var/folders/hj/fs_pkpfn7vdcg176058mb1540000gn/T/ves-cli-init
$ [ves-cli]:init ves-app project successfully!
$ [ves-cli]:Now, start coding by follow step:
$ 1) cd ves-app
$ 2) npm install or yarn install
$ 3) npm run dev or npm start- 本地开发运行
- 服务端渲染需要通过 Webpack 构建两份配置，一份给 服务端用，一份给客户端用
- 前端渲染时，只需要构建一份配置，这个时候需要在 ves.config.js 加入
target: web指定只构建前端运行文件
npm run dev
- 项目构建
npm run build- 项目发布
npm run build 项目构建后，需要把构建后的文件和项目一起发布，可以排除所有 ts 结尾的文件。
模板代码
Node代码
使用 json-typescirpt-mapper 实现 JSON to Model 和 Model to JSON 功能
前端代码
前端使用 TypeScript vue-property-decorator 和 vuex-class 插件
运行效果
TypeScript 编写的 Vue 服务端渲染的单页面骨架项目
