最新热门、好看前端vue模板大全

<!-- prettier-ignore-start --> <!-- SOMETHING AUTO-GENERATED BY TOOLS - START --> <!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} --> <!-- code_chunk_output --> - [项目运行指南](#项目运行指南) - [开发本地环境变量](#开发本地环境变量) - [开发相关插件/工具](#开发相关插件工具) - [开发规范](#开发规范) - [vue](#vue) - [【保持单向数据流】](#保持单向数据流) - [【慎用全局注册】](#慎用全局注册) - [【组件名称】](#组件名称) - [【组件中的 CSS】](#组件中的-css) - [【统一标签顺序】](#统一标签顺序) - [【其它注意事项】](#其它注意事项) - [【 !!!其它则严格遵守 vue 官方风格指南】](#a-target_blank-hrefhttpscnvuejsorgv2style-guide其它则严格遵守-vue-官方风格指南a) - [vue-router](#vue-router) - [vuex](#vuex) - [模块复用](#模块复用) - [其它杂项](#其它杂项) - [代码注释](#代码注释) - [工程目录结构](#工程目录结构) - [前端部署](#前端部署) - [给 UI 的建议](#给-ui-的建议) <!-- /code_chunk_output --> <!-- SOMETHING AUTO-GENERATED BY TOOLS - END --> <!-- prettier-ignore-end --> # 项目运行指南 - 安装/更新依赖包：`npm install` - 运行： - 启动为 dev 环境：`npm run serve` 或 `npm start` - 打包为 stage 环境：`npm run build:stage` - 打包为 prod 环境：`npm run build:prod` 或 `npm run build` - 检查并修复源码：`npm run lint` - 运行单元测试：`npm run test:unit` # 开发本地环境变量 - 新建 .env.development.local 来重写部分环境变量，如： - 模拟数据：`VUE_APP_MOCK = true` - 接口前缀：`VUE_APP_BASEURL_XXX =` - 接口地址：`DEV_PROXY_TARGET_XXX = http://localhost:8081` - ... # 开发相关插件/工具 - VSCode 相关插件 - 必要插件 - `ESLint` - `Vetur` - `Prettier - Code formatter` - `path Autocomplete` - 推荐插件 - `Debugger for Chrome` - `GitLens -- Git supercharged` - Chrome 相关插件 - 必要插件 - `vue-devtools` - 推荐插件 - `json-formatter` - 其它工具 - 推荐：`Postman` # 开发规范 ## vue ### 【保持单向数据流】 - 单个组件的数据流 ``` props、data/$store、computed (由前面派生) ↓ template/render ↓ 用户交互事件、初始化的异步回调 ↓ data/$store ``` - 组件间的数据流 - 父向子传递用 props - 子向父传递用 vue 内置的自定义事件 - 父子双向传递用 <a target="_blank" href="https://cn.vuejs.org/v2/guide/components-custom-events.html">v-model</a> 或 <a target="_blank" href="https://cn.vuejs.org/v2/guide/components-custom-events.html">.sync</a> - 跨越传递用 vuex（慎用 EventBus） - 紧密耦合的祖孙间传递也可以考虑用父组件作为中间运输层 - 紧密耦合的兄弟间传递也可以考虑用父组件作为中转运输层 ### 【慎用全局注册】 - 组件、混入 ... 应使用局部注册 局部注册可保持清晰的依赖关系，并且 IDE 智能感知更为友好 ### 【组件名称】 - 名称大小写 ```html <script> import MyComponent from '@/components/MyComponent.vue' // 文件名使用 PascalCase 命名法 export default { name: 'ComponentName', // 必须有 name components: { MyComponent }, } </script> <template> <div> <!-- 在 template 中一律使用 kebab-case 方式调用 --> <my-component /> <el-input /> </div> </template> ``` - 使用前缀 - 非业务通用组件使用 Base 前缀 - <a href="#hash_Ex">扩展/包装第三方开源组件或内部公共库组件</a>使用 Ex 前缀 - 单例组件使用 The 前缀 ### 【组件中的 CSS】 - 使用 <a target="_blank" href="https://vue-loader.vuejs.org/zh/guide/css-modules.html">CSS Modules</a>，基于如下考虑： - 不让外部进行样式重写，避免耦合 (与组件通信的唯一方式是 props) - 放心使用简短且语义强的 class 名，无需担心命名空间，使可读性更好 - 使用方式 - 语法 ```less /* 默认为局部 */ .xxx { } /* 从局部转到全局 */ :global(.yyy) { } // or :global { } /* 从全局转到局部 */ :local(.zzz) { } // or :local { } ``` - 单个组件专属 ```html <style lang="less" module></style> ``` - 多个组件共用 (\*.module.less) ```js import style from './style.module.less' ``` ### 【统一标签顺序】 - script --> template --> style，并使用空行分隔 ### 【其它注意事项】 - 慎用 this\.\$refs、this\.\$parent、this\.\$root、provide/inject - this\.\$refs 一般用在第三方开源组件或内部公共库组件或非常稳定的组件，以调用显式声明的方法 - 暴露给外部的方法要加 pub 前缀，如：this\.\$refs.pubFocus() - 尽量不要在 watch 中变更数据，易造成死循环。数据变更应该交给用户交互事件或初始化的异步回调 - 组件中的 data 及 vuex 中的 state 应该可序列化，即不要存 undefined、function 等 ### 【 <a target="_blank" href="https://cn.vuejs.org/v2/style-guide/">!!!其它则严格遵守 vue 官方风格指南</a>】 --- ## vue-router - url 定义准则：path 对应视图变化 (使用 kebab-case 命名法)，query 对应数据变化，hash 对应滚动条位置 `如：/project-list?type=1&search=keyword#position` - 路由的 name 值 (命名路由) 使用驼峰命名法 - 视图跳转尽量使用声明式 ```html <router-link :to="path | { path, ... }">使用声明式</router-link> <!-- 不推荐的做法 --> <a @click="$router.push(...)">使用命令式</a> ``` - 当组件依赖 \$route 时 (特别是 \$route.params)，要使用<a target="_blank" href="https://router.vuejs.org/zh/guide/essentials/passing-props.html">路由组件传参</a>，与 \$route 解耦 --- ## vuex - 需要由 vuex 管理的数据 - 组件间共享的响应式数据 - 组件间需要跨越传递的数据 - getter、mutation、action、module 使用驼峰命名法 - module 应避免嵌套，尽量扁平化 - module 应该启用命名空间 `namespaced: true` --- ## 模块复用 - 避免重复造轮子，多使用成熟的现成工具/类库/组件，如：lodash、qs、url-parse 等 - 模块设计原则： - 高内聚低耦合、可扩展 - 永远不要去改变模块输入的数据，如：函数参数、组件 prop - … - 方法接口的设计 ```js // 参数类型与个数要保持稳定 // 建议参数不要超过3个，且预留一个 options 对象，以提高扩展性 // 方法尽量纯净 (纯函数思想) export function myMethod1(a, options) {} // 当必选参数只有一个时 export function myMethod2(a, b, options) {} // 当必选参数只有两个时 export function myMethod3(options) {} // 当必选参数有两个以上时 export function myMethod4(options) {} // 当所有参数都是可选时 // 有时为了提高灵活性，参数类型可以是两重，一重是期望值，另一重是返回期望值的函数 (可带参) export function myMethod5(a) { a = typeof a === 'function' ? a() : a } ``` - <span id="hash_Ex">扩展/包装第三方开源组件或内部公共库组件</span> - 使用 extends 混入 (相关命名需要加 ex 前缀，防止覆盖) - 使用<a target="_blank" href="https://cn.vuejs.org/v2/guide/render-function.html">函数式组件</a>包装 --- ## 其它杂项 - IDE 统一使用 VSCode，并统一使用相关插件及配置 - js 变量声明尽量使用