vue-cli-plugin-tq-tpl

vue-cli-plugin-tq-tpl

配合 @vue/cli 3.0 通过插件快速生成前端项目模版.

目录

• 使用
• 结构

使用

安装插件

vue add tq-tpl

安装依赖

npm install

vue add tq-tpl 后必须要安装执行 npm install 进行依赖安装

结构

   +-- public -------------------------------------------> 公用文件
   |
   +-- src ----------------------------------------------> 源码目录
   |   +-- assets ---------------------------------------> 全局资源目录
   |   |   +-- css --------------------------------------> 样式资源文件
   |   |   +-- img --------------------------------------> 图片资源文件
   |   |   +-- font -------------------------------------> 全局字体库
   |   |   +-- json -------------------------------------> 静态json文件
   |   |
   |   +-- components -----------------------------------> 全局组件目录
   |   |   +-- App --------------------------------------> App 组件目录 双驼峰
   |   |   |   +-- index.vue ----------------------------> 组件主入口
   |   |   |   +-- cell ---------------------------------> 组件下子组件文件夹
   |   |   +-- Other Component
   |   |   +-- index.js ---------------------------------> 全局注册入口
   |   |
   |   +-- directives -----------------------------------> 全局指令目录
   |   |   +-- resize-dom -------------------------------> 指令目录 命名采用连字符
   |   |   |   +-- index.js -----------------------------> 组件主入口
   |   |   +-- Other Directive
   |   |   +-- index.js ---------------------------------> 全局注册入口
   |   |
   |   +-- lib ------------------------------------------> 第三方库资源文件
   |   |
   |   +-- utils ----------------------------------------> 工具目录
   |   |   +-- index.js ---------------------------------> 注册入口
   |   |
   |   +-- router ---------------------------------------> 路由配置
   |   |
   |   +-- store ----------------------------------------> vuex配置
   |   |   +-- globe ------------------------------------> 持久化缓存的全局状态目录
   |   |   |   +-- modules ------------------------------> globe/[module] 状态模块
   |   |   |   +-- index.js -----------------------------> globe 入口文件
   |   |   +-- common -----------------------------------> 全局状态目录
   |   |   |   +-- modules ------------------------------> common/[module] 状态模块
   |   |   |   +-- index.js -----------------------------> common 入口文件
   |   |   +-- index.js ---------------------------------> store 入口文件
   |   |
   |   +-- views ----------------------------------------> 视图目录
   |   |   +-- tpl --------------------------------------> tpl模块
   |   |   |   +-- views --------------------------------> tpl下的视图文件
   |   |   |   |   +-- children -------------------------> tpl下的子路由
   |   |   |   |       +-- home -------------------------> /tpl/home 目录
   |   |   |   |           +-- components ---------------> /tpl/hone 下的组件目录
   |   |   |   |           |   +-- list -----------------> /tpl/home 下的 list 复杂组件
   |   |   |   |           |   |   +-- index.vue --------> /tpl/home 下的 list 复杂组件入口
   |   |   |   |           |   |   +-- cell -------------> /tpl/home 下的 list 复杂组件生成的 子组件目录
   |   |   |   |           |   |
   |   |   |   |           |   +-- list-item.vue --------> /tpl/home 下的 list-item 简单组件
   |   |   |   |           |
   |   |   |   |           +-- index.vue ----------------> /tpl/hone 下的视图文件
   |   |   |   |           +-- store.js -----------------> /tpl/home 页面使用到的 store
   |   |   |   |
   |   |   |   +-- components ---------------------------> tpl模块下公用的组件目录
   |   |   |   +-- router.js ----------------------------> tpl模块的路由配置
   |   |   |   +-- store.js -----------------------------> tpl的状态管理配置
   |   |   |   +-- index.js -----------------------------> tpl的注册入口
   |   |   |
   |   |   +-- index.js ---------------------------------> 视图统一组册入口
   |   |
   |   +-- app.js ---------------------------------------> app Vue实例生成，各全局组件/指令/函数注册
   |   +-- main.js --------------------------------------> 项目主入口
   |   +-- normalize.js ---------------------------------> 项目适配，主要实现各种 polyfill
   |   +-- pwa.js ---------------------------------------> pwa相关配置
   |
   +-- babel.config.js ----------------------------------> babel相关配置
   +-- vue.config.js ------------------------------------> vue cli 相关配置
   +-- .gitignore ---------------------------------------> git ignore 配置
   +-- package.json -------------------------------------> 项目信息/版本/npm脚本/依赖/eslint配置/postcss配置/游览器适配配置
   +-- README.md ----------------------------------------> 说明文档

注入环境变量

 npm run build -- --app_env='{"DNS_CODE": "test"}'

指令对应的环境变量

 npm run build // NODE_ENV: production
 npm run framework // NODE_ENV: framework
 npm run module // NODE_ENV: module