# 未检前端 **Repository Path**: btyzl_admin/front-end-not-checked ## Basic Information - **Project Name**: 未检前端 - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-01-02 - **Last Updated**: 2021-01-04 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 一、项目部署项目名称：jeecms_admin ## 1、安装软件包 ``` npm install ``` ### 2、启动开发模式 ``` npm run serve ``` ### 3、编辑发布版本 ``` npm run build ``` ### 4、自定义打包配置文档 See [Configuration Reference](https://cli.vuejs.org/config/). ### 5、创建项目 ``` npm install -g @vue/cli vue create projectname vue ui ``` 选项： Manually select features ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◉ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing Sass/SCSS (with node-sass) ESLint + Standard config Lint on save In package.json N ### 6、更新日志 2019/8/24 升级 element-ui 2.8.2 至 2.11.1，解决了表格树默认展开所有行问题 # 二、开发流程 ### 1、接收任务 > 了解任务内容、业务范围 > 仔细研读原型文档、接口文档、UI效果图 > 功能模块分析、优先级安排、难易度分析、工时计划 > 了解前端开发规范，使用eslink，尽量多写注释，方便他人查阅 ### 2、基础工作准备 > 定义接口：在相应文件```src/api/urls```中定义接口地址，地址不重复；在相应文件```src/api/apis```中定义请求方法 > 添加路由：在相应文件```src/routes/asyncRoutes.js```中对应的路由位置添加路由信息 > 建立目录：根据路由信息在```src/views```下相应目录下面建立业务模块目录及文件 > 路由语言：根据路由信息的```name```属性，在相应文件```src/i18n/lang/cn.js```中设置菜单言语名称(menus对象内) > 添加模拟数据：根据接口文档返回数据格式，在数据数据服务页面添加相应模拟接口。 [Mock Server](http://mw.mock.ywzhou.shop/) ### 3、业务页面开发 > 根据业务功能模块，将已开发过的代码复制过来进行修改 > 业务模块尽量封装使用，提高复用性，如现有已封装模块不能满足，根据需要修改的程序来决定是重新封装过一个还是在原来封装的组织上面增加类型 > 整体业务封装思想是尊从渐进增强的模式，同时考虑灵活性以及便捷性，封装组件与mixin数据配合使用，尽量减少调用者的代码量及复杂度；另外要注意mixin间不能有重复的字段名称及方法名称，以免使用多个mixin时冲突。 ### 4、页面样式 > 元素标签上的样式非动态的一律用```class```写 > 页面顶级元素使用不重复的```class```，通过类命名空间来保障样式不冲突，``````标签可以不使用```scoped``` > 涉及到主题色的，使用```src/assets/theme/mixin.scss```中定义的类，如没有可自定义 > 属于UI规范类的样式写在```src/assets/css/index.scss```或```src/assets/css/rewrite.scss```中，前者用于定义自定义的```class```，后者用于定义```element ui class` # 三、文档说明 ### 1、动态切换主题 1.1、使用工具生成样式变量文件 ``` npm i element-theme element-theme-chalk -D node_modules/.bin/et -i ``` 1.2、修改根目录下的```element-variables.scss```变量文件在根目录下生成```theme```主题包注：以上文件和目录添加到svn忽略中不要上传 ``` node_modules/.bin/et ``` 1.3、修改打包配置文件```gulpfile.js```中的变量```customThemeName```，注：不能与assets/css/theme/下的目录名重复安装```gulp```打包工具 ``` npm i gulp -g npm i gulp gulp-css-wrap gulp-clean-css -D ``` 1.4、执行命令打包到```src/assets/css/theme/``` ``` gulp css-wrap gulp move-font ``` 1.5、在入口文件```main.js```中导入新的主题文件切换主题时把空间类名附给body即可 ``` document.body.className = 'custom-' + customThemeName ``` 注：customThemeName可存在vuex中，列表形式，同时存一个当前主题值theme 注：每次更新执行2-4步 ### 2、国际化用法 2.1、组件化本地化用法 ``` const Component1 = { template: `

Component1 locale messages: {{ $t("message.hello") }}

Fallback global locale messages: {{ $t("message.greeting") }}

`, i18n: { // `i18n` 选项，为组件设置语言环境信息 messages: { en: { message: { hello: 'hello component1' } }, ja: { message: { hello: 'こんにちは、component1' } } } } } ``` 2.2、props默认值 bug: 不会随着语言切换改变，需要在template中使用$t() bug: data中使用也不会改变，需要放在computed中使用；或者写在methods里，但同时要watch，lang的改变去调用方法更新data 后端：lang通过headers或cookies去传递 reflush window.reload() ``` props: { name: { type: String, default () { return this.$t('name') } } } ``` 2.3、日期时间本地化 ```

Apr 19, 2017

2017年4月19日(水) 午前2:19

``` 2.4、数字本地化 ```

$100.00

``` 2.5、普通js文件中使用 ``` import i18n from '@/i18n' ... i18n.t('path') ``` ### 3、IconFont图标下载svg文件放到 src/assets/icon/svg/ 目录下即可 3.1、固定颜色使用可以改变大小 ```iconClass``` 值为 src/assets/icon/svg/ 下的文件名称 ``` ``` 3.2、双色动态修改颜色默认通过path的fill固定了，需要在导出iconfont文件之前做去色处理，或者去掉svg文件中的fill属性，才能修改颜色。修改svg文件，将其中一个```path```的```fill```属性设为```currentColor```，将其他```path```的```fill```属性设为空。 ``` ``` 结果：设置```currentColor```的path颜色为红色；其他path颜色为绿色 3.3、使用iconfont.scss文件 ```