/vue-team-template

vue-team-template

Primary LanguageCSS

vue team template

作者:月下独奏

在线查看demo:https://woleicom.github.io/vue-team-template/dist

这里只是提供一种构建vue项目的选择方案,如果喜欢欢迎Star

这里整合gulp的主要好处就是可以让webpack专注与vue file的模块打包,而不再考虑图片、css等非js文件

脚手架整合:babel+gulp+webpack+browserSync
前端整合:vue+vue-router+vuex+vuex-router-sync+axios+jquery+boostrap
前端整合新增:element-ui组件按需加载


dir:

  • build:打包脚手架文件夹
  • config:打包目录配置文件夹
  • dist:测试站打包文件夹
  • src:项目文件开发文件夹
    • assets:公共资源
    • components:组件
    • directives:指令
    • filters:过滤器
    • router:路由
    • serves:服务
    • store:商店
    • styles:公共样式
    • utils:工具
    • views:视图(视图用lazyLoading进行加载)
  • .babelrc:babel脚手架配置文件ES6语法支持文件
  • .gitignore:git上传忽略文件配置文件
  • gulpfile.babel.js:gulp脚本任务babel版文件
  • index.html:本地开发环境运行首页
  • tpl.html:开发首页模版
  • package.json:依赖文件
  • README.md:项目说明

项目依赖环境:

项目命令
  • 安装依赖:npm install
  • 拷贝element-ui样式文件:gulp plugin:element-ui
  • 启动服务:gulp dev:serve
  • 编译打包:gulp build
  • 本地启动服务查看打包项目:gulp build:serve

关于element-ui样式在src/styles/elementUI/src/文件夹中修改(dist中的css为编译后样式)