tbhuabi / new-tbjs

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Vue2-webpack项目模板

本项目demo是基于webpack的Vue2项目 本项目为单页应用,路由组件为vue-router,在正式发布后,后台需配置相关页面解析逻辑,防止404页面出现

如何使用?

  1. 打开控制台,并进入项目根目录
  2. 在控制台输入以下代码npm install并回车,等待安装完毕
  3. 确保安装没有错误,运行npm start,如无意外,这时将自动打开chrome浏览器,并显示出demo的默认页面了

项目约定

  • assets目录存放公共的图片和样式表
  • store如果有采用vuex类的工具,相关文件应该放在这里,如XXX.action.js
  • plugins存放给vue原型扩展的方法
  • directives存放全局指令
  • components目录存放全局组件
  • views存放页面文件夹

你可以在src内扩展你需要的目录

代码风格

  • 项目采用了tslint作为代码检查工具
  • 请确保代码风格符合standard标准,否则启动和构建会不成功,如果不小心写出的代码不符合代码规范,请注意控制台输出错误的信息,并做出相应更改,直到没有代码语法错误

自动化测试

npm run test 为确保项目的健壮性、可维护性和可预期,建议为每一个项目中的文件写单元测试,测试工具为karma,框架为jasmine,相关文档可上互联网上搜索

默认情况下,单元测试文件以XXX.test.js命名

构建发布

  1. 确认本地在开发过程中,没有代码错误,及编译警告
  2. 在控制台输入npm run build
  3. 等编译完成后,会在根目录下生成一个dist的目录,里面存有打包编译后的文件

直接运行打包后的代码

npm run production

调试代理

接口代理默认拦截以/api/开头的请求,并会重写url为/,你需要把全局的api请求加上/api前缀,并在上线发布时去掉这个请求头,推荐的做法是通过配置环境变量的方式实现。

About


Languages

Language:JavaScript 94.5%Language:Vue 3.5%Language:CSS 1.4%Language:HTML 0.6%