快捷搜索：  汽车  科技
当前位置： 爱玩科技 > 生活 > 正文

vue前端项目用什么编辑（前端项目配置项目文档说明）

小君 802

vue前端项目用什么编辑（前端项目配置项目文档说明）标题<h1 2 3>语义<p>段落

vue前端项目用什么编辑（前端项目配置项目文档说明）(1)

项目文档安装

yarn install 本地调试

yarn serve 打包到生产环境

yarn build es Lints 文件格式化

yarn lint 自定义配置项

请查看官文档 Configuration Reference.

环境要求
  • Node.js > 6.x
后端文档
  • 地址：http://xxxx:19096/doc.html
  • 开发环境： http://xxx.xx.xx/doc.html
编码规范
  • 遵循eslint规范代码
  • 通过Prettier格式化代码
eslint 配置
  • vscode或webstore搜索扩展 eslint 插件集成
  • vscode或webstore搜索扩展 Prettier 格式化代码
vscode 插件
  • Auto Import 代码导入
  • ESLint 规范
  • Prettier 自动格式化
  • markdown Preview Enhanced markdown文档
  • Path Intellisense 路经 @ 等别名可以ctrl 鼠标左键查看

vue前端项目用什么编辑（前端项目配置项目文档说明）(2)

vscode 配置

{ "editor.tabSize": 2 "eslint.validate": [ "javascript" // 用eslint的规则检测js文件 "vue" "html" "typescript" "typescriptreact" ] "editor.codeActionsOnSave": { "source.fixAll.eslint": true } "Files.autoSave": "off" "editor.formatOnSave": false "editor.formatOnPaste": false "editor.suggestSelection": "first" "eslint.codeAction.showDocumentation": { "enable": true } "[vue-html]": { "editor.formatOnSave": true "editor.formatOnPaste": true } "[vue]": { "editor.formatOnSave": true "editor.formatOnPaste": true } "[javascript]": { "editor.formatOnSave": true "editor.formatOnPaste": true } "[javascriptreact]": { "editor.formatOnSave": true "editor.formatOnPaste": true } "editor.defaultFormatter": "esbenp.prettier-vscode" "[typescript]": { "editor.formatOnSave": true "editor.formatOnPaste": true } "[typescriptreact]": { "editor.formatOnSave": true "editor.formatOnPaste": true } "search.followSymlinks": false "files.exclude": { "**/node_modules": true "**/public": true } "editor.quickSuggestions": { "strings": true } "git.autorefresh": false "git.detectSubmodules": false "search.exclude": { "**/.idea": true "**/public": true } "typescript.updateImportsOnFileMove.enabled": "always" "javascript.updateImportsOnFileMove.enabled": "always" "git.autofetch": true "security.workspace.trust.untrustedFiles": "open" "git.enableSmartCommit": true "debug.javascript.autoAttachFilter": "always" "explorer.confirmDelete": false "path-intellisense.mappings": { "@": "${workspaceRoot}/src" "@@": "${workspaceRoot}/public" } } 目录命名

  • 能直观地感受当前目录文件的作用
  • 单个单词以小写命名
  • 以多个单词为my-name方式命名
页面命名
  • 能直观地感受当前文件的作用
  • 单个单词以小写命名
  • 以多个单词为小驼峰方式命名
组件命名-全局组件
  • 能直观地感受当前组件的用途
  • 组件命名尽量是多个单词的，避免跟html元素或标签冲突
  • 大写开头
  • 组件以文件夹方式封装，内部文件以大驼峰方式命名
命名总结
  • 大驼峰为组件命名-组件无论文件夹还是文件都以大驼峰方式
  • 小驼峰针对文件
  • 多个单词为my-name方式只针对文件夹 或 router 路由
图片命名
  • 图片文件夹一般遵从页面或者模块命名 如：login/）
  • 图片不可随意命名，且严禁使用0，1，等数字直接命名图片。
  • 图片命名可遵循：用途 描述，多个单词用下划线隔开，如：login_icon.png pwd_icon.png
  • 10k以下图片建议放置assets/img下（webpack打包时直接转为base64嵌入）
  • 大图且不常更换的图片放置public/img下
  • 可用css编写的样式严禁使用图片
  • 国际化图片，后缀使用简体-cn 英文-en 繁体-tw

│ ├── assets/ │ │ ├── img/ # 图片 │ │ │ ├── common/ # 公共图片 │ │ │ │ ├── default_avatar.png # 默认头像 │ │ │ ├── login/ # 登录模块 │ │ │ │ ├── login1.png # 登录模块图片 │ │ │ │ ├── login_icon-en.png │ │ │ │ ├── login_icon-cn.png │ │ │ │ ├── login_icon-tw.png │ │ │ ├── userInfo/ # 用户中心模块的图片 项目路由

  • 普通路由(非动态多级)命名，可以直接使用页面组件的命名。
  • 动态多级路由，遵循：用途或作用或功能。

/user/personal/infomaition 用户中心 -> 个人中心 -> 个人信息 /user/company/infomaition 用户中心 -> 企业中心 -> 企业信息 语义化

语义的HTML结构，有助于机器搜索，保证代码可读性。

常见的标签语义

标签

语义

<p>

段落

<h1 2 3>

标题

<ul>

无序列表

<ol>

有序列表

<blockquote>

大段引用

<cite>

一般引用

<b>

为样式加粗

<strong>

为强调加粗

<i>

为样式倾斜

<em>

为强调倾斜

<code>

代码标识

……

……

例如：

  • h1 大标题，一般用于banner背景，一个页面有且只有一个
  • h2 章节标题，可以有多个
  • h3 章节内的文章标题
  • h4 h5 h6 小标题/副标题
  • p 段落

├── h1---文章大标题 │ ├── h2--- 这里是一个节点 │ │ ├──h3--- 节点内的文章标题 │ │ │ ├── h4 h5 h6--- 副标题/作者等信息 │ │ │ ├── p---段落 │ ├── h2--- 这里是一个节点 │ │ ├──h3--- 节点内的文章标题 │ │ │ ├── h4 h5 h6--- 副标题/作者等信息 │ │ │ ├── p---段落

vue前端项目用什么编辑（前端项目配置项目文档说明）(3)

注释规范

<!-- 头部 --> <view class="header"> <!-- LOGO --> <image class="logo"></image> <!-- /LOGO --> <!-- 详情 --> <view class="detail"> </view> <!-- /详情 --> </view> <!-- /头部 -->

  • 变量命名：小驼峰命名
  • 参数名：小驼峰命名
  • 函数名：小驼峰命名
  • 方法/属性名：小驼峰命名
  • 类名开头大写
  • 私有属性、变量和方法以下划线 _ 开头。
  • 常量名：全部使用大写 下划线
  • 由多个单词组成的缩写词，在命名中，根据当前命名法和出现的位置，所有字母的大小写与首字母的大小写保持一致。
  • 语义变量应当使用名词，尽量符合当时语义boolean类型应当使用 is has 等开头点击事件命名方式：tap onClick()

let loadingModules = {}; const HTML_ENTITY = {}; function stringFormat(theBells) {} function insertHTML(element html) {} function Engine(options) {} Vue编写顺序

<template> <div> 内容 </div> </template> <script lang="ts"> import { defineComponent } from "vue"; export default defineComponent({ name: "name" mixin: [] components: { } props:{ name: { type: String required: true } } data(){} setup() { return{} } computed: { } watch: {} filters:{} beforeCreate(){} created(){} beforeMount(){} mounted(){} beforeUpdate(){} updated(){} methods: {} beforeDestroy(){} destroyed(){} }) </script> <style lang="less" scoped> </style> 项目介绍

1、项目基于以前项目复制而来，因需要统一代码所以版本、框架等都有限制。 2、项目还使用vue2 和 ivew 进行代码开发、vue3暂未做升级尝试。 环境配置

1、env为常用环境配置文件 2、其它配置见 vue.config 常用模块结构

  • 所有非全局功能都写在模块中
  • 模块按功能拆分
  • 模块数据需要抽离出来

// 以用户列表为说明 ├── index.vue # 模块入口 ├── static # 静态文件 ├── modules # 功能模块 │ ├── form.vue # 新增 │ ├── upload.vue # 上传 ├── topBar.vue # 头部搜索等功能 ├── tablist.vue # 列表展示 ├── store.js # 搜索，列表，上传，创建等数据操作 ├── service.js # 接口请求封装 公共组件

├── DefaultUserImg # 用户默认头像 ├── Pagination/ # 分页-统一配置项 ├── SDrawer/ # 抽屉统一配置项 ├── Platform/ # 平台切换 ├── config/ # 与项目构建相关的常用的配置选项； │ ├── index.js # 主配置文件 └── 其它 # 其它开发人员项目 目录结构

├── vue.config.js/ # webpack 配置文件； ├── config/ # 与项目构建相关的常用的配置选项； │ ├── index.js # 主配置文件 │ ├── src/ │ ├── main.js # webpack 的入口文件； │ ├── App.vue # APP页面入口 │ ├── assets/ # 共用的代码以外的资源，如：图片、图标、视频 等； │ ├── api/ # 网络模块，如：接口； │ ├── router/ # 路由模块 │ ├── I18n/ # 国际化模块 │ ├── directive/ # 指令 │ ├── vuex/ # 组件共享状态 │ ├── libs/ # 工具 │ ├── components/ # 共用的组件；； 这里的存放的组件应该都是展示组件 │ │ ├── base/ # 基本组件，如：共用的弹窗组件，loading加载组件，提示组件。 │ ├── utils/ # 共用的资源，如：常用的图片、图标，共用的组件、模块、样式，常量文件等等； │ │ ├── util/ # 自己封装的一些工具 │ │ └── ... │ ├── layout # 公共局页面； │ └── view/ # 存放项目业务代码； │ ├── home # 首页； │ ├── application-service # 应用服务 │ ├── image # 镜像 │ ├── team # 团队成员 │ ├── code-manage # 代码管理 ├── App.vue # app 的根组件； ├── public/ # 纯静态资源，该目录下的文件不会被webpack处理，该目录会被拷贝到输出目录下； ├── .babelrc # babel 的配置文件 ├── .editorconfig # 编辑器的配置文件；可配置如缩进、空格、制表类似的参数； ├── .eslintrc.js # eslint 的配置文件 ├── .eslintignore # eslint 的忽略规则 ├── .gitignore # git的忽略配置文件 ├── jsconfig.json # 别名配置，用于ctrl 鼠标左建查看文件 ├── package.json # npm包配置文件，里面定义了项目的npm脚本，依赖包等信息 └── README.md # 项目信息文档 辅助开发

vue前端项目用什么编辑（前端项目配置项目文档说明）(4)

模块引用

const files = require.context("." false /\.js$/); const modules = {}; files.keys().forEach((key) => { if (key === "./index.js") return; modules[key.replace(/(\.\/|\Store.js)/g "")] = files(key).default; }); export default modules; vue.json 片段

vue3 和 vue 快捷键

{ "vue3": { "prefix": "vue3" "body": [ "<template>" "\t<div>$1</div>" "</template>" "<script lang=\"ts\">" "/**" "* author : bo.peng" "* createTime ： ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}" "* description : $1" "*/" "\timport { defineComponent } from \"vue\";" "\texport default defineComponent({" "\t\tsetup() {" "\t\t\treturn{}" "\t\t}" "\t})" "</script>" "<style lang=\"less\" scoped>" "</style>" ] "description": "jsx components" } "vue-default": { "prefix": "vue" "body": [ "<template>" "\t<div>$1</div>" "</template>" "<script>" "/**" "* author : bo.peng" "* createTime ： ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}" "* description : $1" "*/" "\texport default {" "\t\tdata() {" "\t\t\treturn{}" "\t\t} " "\t\tmethods:{" "\t\t}" "\t}" "</script>" "<style lang=\"less\" scoped>" "</style>" ] "description": "jsx components" } } javascript.json 片段

js 快捷键

const export 对外变量模块

"jsconst": { "prefix": "constexport" "body": [ "/**" "* author : bo.peng" "* createTime ： ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}" "* description : $1" "*/" "export const $2={};" ] "description": "js" } export const name = () =>{} 对外方法模块

"jsfunction": { "prefix": "fnexport" "body": [ "/**" "* author : bo.peng" "* createTime ： ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}" "* description : $1" "*/" "export const $2= () =>{};" ] "description": "js" } vue.observable 局部数据共享

"observable": { "prefix": "vueobservable" "body": [ "/**" "* author : bo.peng" "* createTime ： ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}" "* description : $1" "*/" "import Vue from \"vue\";" "const store = Vue.observable({});" "const mutations = {" "\tinit() {} " "};" "export { store as $2Store mutations as $2Mutations };" ] "description": "js" } vuex 相关快捷键vuex 首页

"vuexHome": { "prefix": "vuexHome" "body": [ "/**" "* author : bo.peng" "* createTime ： ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}" "* description : $1" "*/" "import Vue from \"vue\";" "import Vuex from \"vuex\";" "import createPersistedState from \"vuex-persistedstate\";" "import getters from \"./getters\";" "import modules from \"./modules\";" "Vue.use(Vuex);" "const storeKey = \"APP_STORE\";" "export default new Vuex.Store({" "\tplugins: [" "\t\tcreatePersistedState({" "\t\t\tkey: storeKey " "\t\t\treducer(state) {" "\t\t\t\treturn {" "\t\t\t\t\tapp: state.app " "\t\t\t\t\tuser: state.user " "\t\t\t\t};" "\t\t\t} " "\t\t}) " "\t] " "\tmodules " "\tgetters " "});" ] "description": "js" } getters

"getters": { "prefix": "getters" "body": [ "/**" "* author : bo.peng" "* createTime ： ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}" "* description : $1" "*/" "const getters = {" "// 当前用户" "\tcurrentUser: (state) => state.user " "};" "export default getters;" ] "description": "js" } vuex module 模块

"vuex": { "prefix": "vuex" "body": [ "/**" "* author : bo.peng" "* createTime ： ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}" "* description : $1" "*/" "const _mutations = {" "\tname: \"NAME\"" "};" "const _actions = {" "\tname: \"NAME\"" "};" "const $2 = {" "\tstate: {" "\t\tinfo:{}" "\t} " "\tmutations: {" "// 更新" "\t\t[_mutations.name]: (state payload) => {" "\t\t\tstate.info = payload;" "\t\t} " "\t} " "\tactions: {" "\t\t[_actions.name]({ commit state }) {" "\t\t\treturn new Promise((resolve reject) => {" "\t\t\t\t/*commit(_mutations.name res.data);" "\t\t\t\tresolve(res.data);*/" "\t\t\t});" "\t\t} " "\t} " "\tgetters: {" "\t\tname: (state) => state.info " "\t} " "};" "const name = \"$2/\";" "const $2Mutations = {" "\t//name: name _mutations.name " "};" "const $2Actions = {" "\t//name: name _actions.name " "};" "const $2Getters = {" "\t//info: name \"info\" " "};" "export {" "\tname as $2ModuleName " "\t$2Mutations " "\t$2Actions " "\t$2Getters " "};" "export default $2;" ] "description": "js" } package包介绍

包名

介绍

备注

@antv/g6

图可视化引擎

https://g6.antv.vision/zh

svg-sprite-loader

svg处理

nprogress

进度条

clipboard

一种将文本复制到剪贴板的现代方法

https://clipboardjs.com/

codemirror

在线编辑代码，风格包括js java php c 等等100多种语言

https://codemirror.net/

countup

数值动画效果

https://inorganik.github.io/countUp.js/

cropperjs

裁剪图片并上传

https://fengyuanchen.github.io/cropperjs/

dayjs

处理时间和日期

和moment重复了

echarts

图表

http://echarts.apache.org/

html2canvas

项目中生成截图

https://html2canvas.hertzen.com/

insert-css

插入样式

已删除

view-design

ui组件

https://iview.github.io/

iview-area

城市级联组件，数据包含中国的省(直辖市)、市、县区和乡镇街

https://iview.github.io/iview-area/

js-cookie

cookie

https://www.npmjs.com/package/js-cookie

js-md5

md5

github.com/emn178/js-md5

moment

处理时间和日期

https://momentjs.com/

mqtt

mqtt协议方式是发布/订阅者模式

https://www.npmjs.com/package/mqtt

simplemde

markown编辑器

https://simplemde.com/

sortablejs

功能强大的JavaScript 拖拽库

http://sortablejs.github.io/Sortable/

tree-table-vue

表格树，antd有该功能，因为ivew功能不全而安装

https://www.npmjs.com/package/tree-table-vue

v-org-tree

组织结构树组件，有点类式思维导图

vue

核心模块

vue-draggable-resizable

可拖拽缩放的组件

https://www.npmjs.com/package/vue-draggable-resizable

vue-draggable-resizable-gorkys

拖拽组件使用时，在提供的方法上添加自定义的参数

https://www.npmjs.com/package/vue-draggable-resizable-gorkys

vue-giant-tree

基于ztree封装的Vue树形组件

https://www.npmjs.com/package/vue-giant-tree

vue-i18n

国际化

vue-json-viewer

简单易用的json内容展示组件

https://github.com/chenfengjw163/vue-json-viewer

vue-particles

粒子特效

https://vue-particles.netlify.app/

vue-router

路由

vuedraggable

基于sortablejs拖拽功能

https://www.itxst.com/vue-draggable/tutorial.html

vuex

vue数据共享

vuex-persistedstate

vuex数据缓存

wangeditor

富文本

https://www.wangeditor.com/

xlsx

导出excel的工具

https://sheetjs.com/

axios

接口调用

chai

单元测试， 断言库

http://chaijs.com/

mockjs

模拟数据~~

http://mockjs.com/

vue-clipboard2

复制内容至剪切板

https://www.npmjs.com/package/vue-clipboard2

部署jenkins

http://xxx.com.cn:8080/ 部署地址

https://xxx.com.cn/

方法：

  • 选择DevOps 进入
  • 选择应用列表 wutong-devops 进入
  • 选择列表中的 wutong-devops-ui 进入
  • 选择右上角的构建
  • 构建完成后选择更新(滚动)
访问地址

http://xxx.com.cn/

Copyright (c) 2021-present

网站首页

返回栏目

猜您喜欢：

相关文章