{"id":28512060,"url":"https://github.com/luchx/echi_vue_cli3.0","last_synced_at":"2025-07-03T20:31:35.303Z","repository":{"id":39190127,"uuid":"175779109","full_name":"luchx/ECHI_VUE_CLI3.0","owner":"luchx","description":"vue@cli3.0 + axios + mock + typescript + element-ui + scss + webpack4构建的企业级应用项目基础模板;","archived":false,"fork":false,"pushed_at":"2022-12-12T06:16:13.000Z","size":1177,"stargazers_count":15,"open_issues_count":22,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-09T00:08:43.173Z","etag":null,"topics":["mockjs","typescript","vue","vue-cli-3"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/luchx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-15T08:27:20.000Z","updated_at":"2022-09-22T12:36:05.000Z","dependencies_parsed_at":"2023-01-27T14:46:36.948Z","dependency_job_id":null,"html_url":"https://github.com/luchx/ECHI_VUE_CLI3.0","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/luchx/ECHI_VUE_CLI3.0","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luchx%2FECHI_VUE_CLI3.0","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luchx%2FECHI_VUE_CLI3.0/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luchx%2FECHI_VUE_CLI3.0/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luchx%2FECHI_VUE_CLI3.0/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/luchx","download_url":"https://codeload.github.com/luchx/ECHI_VUE_CLI3.0/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luchx%2FECHI_VUE_CLI3.0/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263399212,"owners_count":23460665,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mockjs","typescript","vue","vue-cli-3"],"created_at":"2025-06-09T00:08:42.393Z","updated_at":"2025-07-03T20:31:35.293Z","avatar_url":"https://github.com/luchx.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eVue cli3 template 开发须知\u003c/h1\u003e\n\n## 技术栈及使用要求\n\u003e 1. 基于Vue全家桶 + axios + mockjs + typescript + element-ui + scss + webpack4构建的企业级应用项目;\n\u003e 2. 开发时请确保你已了解或掌握以上技术要求,然后你就可以愉快的玩耍了;\n\n## 从新建项目到设置打包环境\n```\n1. vue create vue-cli3-template\n2. 新建 vue.config.js 文件，设置baseUrl: './';更多配置请[点击链接](https://cli.vuejs.org/zh/guide/)\n3. 新建各个环境的文件，例如：.env.development .env.test .env.production\n4. 在 package.json 中设置打包命令，例如：build:development build:test build:production，在执行命令的语句中设置 mode 环境，例如：--mode test\n```\n\n## 关于环境变量的注意事项\n* 环境名应该与环境文件统一\n* 环境文件放置根目录下\n* 关于打包配置路径,请修改vue.config.js文件下的输出地址\n* 除了 `baseUrl` 和 `NODE_ENV` 其他环境变量使用 VUE_APP 开头\n* 另外还设定本地运行环境`local`,你可以在项目拉取下来后补充 `.env.development.local` 文件,并添加如下信息并替换你自己所在服务器的域名及端口;\n例如 :\n    NODE_ENV='development'\n    VUE_APP_URL='http://localhost:8080'  \n\n##  vue 文件中 TS 上下文顺序\n```\n- data\n- @Prop\n- @State\n- @Getter\n- @Action\n- @Mutation\n- @Watch\n- 生命周期钩子\n    - beforeCreate（按照生命周期钩子从上到下）\n    - created\n    - beforeMount\n    - mounted\n    - beforeUpdate\n    - updated\n    - activated\n    - deactivated\n    - beforeDestroy\n    - destroyed\n    - errorCaptured（最后一个生命周期钩子）\n- 路由钩子\n    - beforeRouteEnter\n    - beforeRouteUpdate\n    - beforeRouteLeave\n- computed\n- methods\n- 组件引用，mixins，filters 等放在 @Component 里面\n```\n\n## 工程目录结构\n```bash\nsrc：项目源码。开发的时候代码写在这里。\n |--api # 服务层ajax请求服务\n |    |--index # api数据入口文件\n |--assets # 项目静态资源\n |--axios # axios封装请求//拦截配置\n |    |--config.ts # axios拦截器配置文件\n |    |--service,ts # axios请求配置文件\n |--components # 项目公共组件库\n |--router # 项目路由\n |    |--index.ts # 入口及路由初始化\n |    |--filterRouter # 页面路由文件\n |--store # 基于Vuex的状态管理模块\n |    |--index.ts # 入口及store初始化\n |    |--modules # 子模块的store对象\n |--utils # 公共库函数\n |--views # 项目应用页面，根据应用需要，还可以有子页面，各子页面目录结构和顶级子页面类似\n |--App.vue # 项目根视图\n |--main.ts # 项目入口文件\n\n ```\n\n## 使用\n\n### 使用命令行\n```bash\n$ git clone git@github.com:luchx/ECHI_VUE_CLI3.0.git\n$ cd ECHI_VUE_CLI3.0\n$ npm install\n$ npm run serve         # 访问 http://localhost:8080\n$ npm run build         # Compiles and minifies for production\n$ npm run lint          # Lints and fixes files\n$ npm run test:unit     # Run your unit tests\n```\n\n## 支持环境\n\n现代浏览器及 IE11。\n\n| [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eIE / Edge | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eFirefox | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eChrome | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eSafari | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png\" alt=\"Opera\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eOpera |\n| --------- | --------- | --------- | --------- | --------- |\n| IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluchx%2Fechi_vue_cli3.0","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluchx%2Fechi_vue_cli3.0","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluchx%2Fechi_vue_cli3.0/lists"}