- vue2 + vuex + vue-router + axios SPA
- koa2 + koa-router + lowdb + ejs 模板
- webpack3 + HMR
- 模拟后端 + 环境配置 + 打包
- ES6+构建，ES6+代码
node: V8+
为了能正常运行,建议node升级到V8+
npm run dev- 本地开发的时候运行此命令,不需要启动后端服务,会自动开启本地服务。
- 开发服务器启动后，双击命令行上的链接地址即可在浏览器中打开首页。你可以在
config文件夹中修改你的开发服务器配置。 编写代码保存，浏览器即可热刷新。 - 因为前端入口文件只有一个
build/server/views/template.ejs,用html-webpack-plugin插件渲染,通过给html-webpack-plugin传递showHtmlWebpackPlugin:true可以在页面渲染的时候输出htmlWebpackPlugin信息 - 为了方便，
npm run dev改成不走后端路由
npm run build构建生成未压缩的代码到dist目录，方便检查打包之后，而又没有压缩的代码。没有热加载功能
npm run prod打包生成测试环境或者线上环境代码时使用这个命令,此时代码是压缩过的
npm run server开启本地mock api server服务,如果没有dist/manifest.json文件,则会在额外执行一次npm run build --banwatch打包前端代码到硬盘,如果dist/manifest.json文件已经存在,则不会再执行npm run build --banwatch
npm start同时开启本地mock api server服务和前端自动化构建服务(带有前端热加载功能)
npm watch用nodemon监听build目录里的代码变化(即监听构建代码),如果代码有变化则会自动重启服务
npm run build distcustom自定义输出目录为distcustom
npm run build distcustom --banwatch自定义输出目录为distcustom,执行一次打包后就退出,即不监听文件变化
npm run build --report使用webpack-bundle-analyzer插件分析webpack打包生成的资源
项目根目录
|---build 项目构建代码
| |---config 构建项目用到的配置
| |---task 构建任务入口
| |---server 本地server服务器
| |---webpack.config.dev.js webpack开发配置
| |---webpack.config.prod.js webpack上线配置
|---config 项目配置
|---node_modules node模块
|---src 应用源码目录
| |---test 业务级文件入口
| | |---assets 业务资源图片以及样式
| | |---components 业务组件
| | |---views 业务入口
| | |---api.js api调用
| | |---router.js 业务路由
| |---example components组件demo案例目录
| | |---pages demo案例
| | |---config.json demo路由相关配置
| | |---demos.vue demo入口文件
| | |---router.js demo路由
| |---global 全局性资源
| | |---assets 图片以及css文件
| | |---iconfont 字体图标
| |---router SPA站点路由
| | |---index.js
| |---store vuex模块
| | |---index.js
|---dist 打包生成代码目录
|---zip zip包目录
|---.babelrc babel运行时配置
|---.editorconfig 编辑器配置
|---.gitignore git忽略配置
|---package.json npm配置
|---postcss.config.js postcss插件配置
|---README.md 项目自述
vscode安装的vetur插件默认不格式html,格式化html,要在首选项下的设置中配置:
//https://github.com/vuejs/vetur/issues/99
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// js-beautify-html settings, see https://github.com/vuejs/vetur/blob/master/server/src/modes/template/services/htmlFormat.ts
"wrap_attributes": "force-aligned"
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent