脚本宝典收集整理的这篇文章主要介绍了

VUEJS开发规范

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0">VUEJS开发规范</h2> <ol> <li>基于组件化开发理解</li> <li>组件命名规范</li> <li>结构化规范</li> <li>注释规范</li> <li>编码规范</li> </ol> <hr> <h3 id="articleHeader1">基于组件化开发理解</h3> <ul> <li> <p>什么是组件?</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" 组件其实就是页面组成的一部分,好比是电脑中的每一个元件(如硬盘、键盘、鼠标),它是一个具有独立的逻辑和功能或界面,同时又能根据规定的接口规则进行相互融化,变成一个完整的应用。 页面只不过是这样组件的容器,组件自由组合形成功能完整的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行。前端组件化的核心思想就是将一个巨大复杂的东西拆分成粒度合理的小东西。" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code> 组件其实就是页面组成的一部分,好比是电脑中的每一个元件(如硬盘、键盘、鼠标),它是一个具有独立的逻辑和功能或界面,同时又能根据规定的接口规则进行相互融化,变成一个完整的应用。 页面只不过是这样组件的容器,组件自由组合形成功能完整的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行。前端组件化的核心思想就是将一个巨大复杂的东西拆分成粒度合理的小东西。</code></pre> </li> <li> <p>组件化开发的好处</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" 提高开发效率 方便重复使用 简化调试步骤 提升整个项目的可维护性 便于协同开发 使其高内聚,低耦合,达到分治与复用的目的。" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code> 提高开发效率 方便重复使用 简化调试步骤 提升整个项目的可维护性 便于协同开发 使其高内聚,低耦合,达到分治与复用的目的。</code></pre> </li> <li> <p>组件化和模块化的区别</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" 组件化是从产品功能角度进行分割,模块化是从代码实现角度进行分割,模块化是组件化的前提和基础。" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code style="word-break: break-word; white-space: initial;"> 组件化是从产品功能角度进行分割,模块化是从代码实现角度进行分割,模块化是组件化的前提和基础。</code></pre> </li> <li> <p><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>组件化开发</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>=" 单文件系统,样式局部作用域<br /> 基本组成结构:<template></span> <script></script> </p> <style scoped></style> <p> 组件注册方式:1)公共组件全局注册 2)其余组件局部注册" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code> 单文件系统,样式局部作用域 基本组成结构:<span class="hljs-tag">&lt;<span class="hljs-name">template</span>/&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>/&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>/&gt;</span><span class="undefined"> 组件注册方式:1)公共组件全局注册 2)其余组件局部注册</span></code></pre> </li> </ul> <h3 id="articleHeader2">组件命名规范</h3> <p><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>官方文档给予以下说明:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="当注册组件 (或者 prop) 时,可以使用 kebab-case (短横线分隔命名)、camelCase (驼峰式命名) 或 PascalCase (单词首字母大写命名)。 PascalCase 是最通用的声明约定而 kebab-case 是最通用的使用约定。" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code>当注册组件 (或者 prop) 时,可以使用 kebab-<span class="hljs-keyword"><a href="http://www.js-code.com/tag/case" title="浏览关于“case”的文章" target="_blank" class="tag_link">case</a></span> (短横线分隔命名)、camelCase (驼峰式命名) 或 PascalCase (单词首字母大写命名)。 PascalCase 是最通用的声明约定而 kebab-<span class="hljs-keyword">case</span> 是最通用的使用约定。</code></pre> <p>命名可遵循以下规则:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" 1、有意义的名词、简短、具有可读性 2、以小写开头,采用短横线分割命名 3、公共组件命名以公司名称简拼为命名空间(app-xx.vue) 4、文件夹命名主要以功能模块代表命名 同时还需要注意:必须符合自定义元素规范: 使用连字符分隔单词,切勿使用保留字。app- 前缀作为命名空间: 如果非常通用的话可使用一个单词来命名,这样可以方便于其它项目里复用。 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code> 1、有意义的名词、简短、具有可读性 2、以小写开头,采用短横线分割命名 3、公共组件命名以公司名称简拼为命名空间(<span class="hljs-selector-tag">app-xx</span><span class="hljs-selector-class">.vue</span>) 4、文件夹命名主要以功能模块代表命名 同时还需要注意:必须符合自定义元素规范: 使用连字符分隔单词,切勿使用保留字。<span class="hljs-selector-tag">app-</span> 前缀作为命名空间: 如果非常通用的话可使用一个单词来命名,这样可以方便于其它项目里复用。 </code></pre> <h3 id="articleHeader3">结构化规范</h3> <ul> <li> <p>基于<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>-cli脚手架的结构基础划分</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" ├── index.html 入口页面 ├── build 构建脚本目录 │ ├── build-server.js 运行本地构建服务器,可以访问构后的页面 │ ├── build.js 生产环境构建脚本 │ ├── dev-client.js 开发服务器热重载脚本,主要用来实现开发阶段的页面自动刷新 │ ├── dev-server.js 运行本地开发服务器 │ ├── utils.js 构建相关工具方法 │ ├── webpack.base.conf.js wabpack基础配置 │ ├── webpack.dev.conf.js wabpack开发环境配置 │ └── webpack.prod.conf.js wabpack生产环境配置 ├── config 项目配置 │ ├── dev.env.js 开发环境变量 │ ├── index.js 项目配置文件 │ ├── prod.env.js 生产环境变量 │ └── test.env.js 测试环境变量 ├── mock mock数据目录 │ └── hello.js ├── package.json npm包配置文件,里面定义了项目的npm脚本,依赖包等信息 ├── src 项目源码目录 │ ├── main.js 入口js文件 │ ├── App.vue 根组件 │ ├── components 公共组件目录 │ │ └── title.vue │ ├── assets 资源目录,这里的资源会被wabpack构建 │ │ ├── css 公共样式文件目录 │ │ ├── js 公共js文件目录 │ │ └── img 图片存放目录 │ ├── routes 前端路由 │ │ └── index.js │ ├── store 应用级数据(state) │ │ └── index.js │ └── views 页面目录 │ ├── hello.vue │ └── notfound.vue ├── static 纯静态资源,不会被wabpack构建。 └── test 测试文件目录(unit&amp;e2e) └── unit 单元测试 ├── index.js 入口脚本 ├── karma.conf.js karma配置文件 └── specs 单测case目录 └── Hello.spec.js " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code> ├── <span class="hljs-selector-tag"><a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>dex</span><span class="hljs-selector-class">.html</span> 入口页面 ├── <span class="hljs-selector-tag">build</span> 构建脚本目录 │ ├── <span class="hljs-selector-tag">build-server</span><span class="hljs-selector-class">.js</span> 运行本地构建服务器,可以访问构后的页面 │ ├── <span class="hljs-selector-tag">build</span><span class="hljs-selector-class">.js</span> 生产环境构建脚本 │ ├── <span class="hljs-selector-tag">dev-client</span><span class="hljs-selector-class">.js</span> 开发服务器热重载脚本,主要用来实现开发阶段的页面自动刷新 │ ├── <span class="hljs-selector-tag">dev-server</span><span class="hljs-selector-class">.js</span> 运行本地开发服务器 │ ├── <span class="hljs-selector-tag">utils</span><span class="hljs-selector-class">.js</span> 构建相关工具方法 │ ├── <span class="hljs-selector-tag">webpack</span><span class="hljs-selector-class">.base</span><span class="hljs-selector-class">.conf</span><span class="hljs-selector-class">.js</span> <span class="hljs-selector-tag">wabpack</span>基础配置 │ ├── <span class="hljs-selector-tag">webpack</span><span class="hljs-selector-class">.dev</span><span class="hljs-selector-class">.conf</span><span class="hljs-selector-class">.js</span> <span class="hljs-selector-tag">wabpack</span>开发环境配置 │ └── <span class="hljs-selector-tag">webpack</span><span class="hljs-selector-class">.prod</span><span class="hljs-selector-class">.conf</span><span class="hljs-selector-class">.js</span> <span class="hljs-selector-tag">wabpack</span>生产环境配置 ├── <span class="hljs-selector-tag">config</span> 项目配置 │ ├── <span class="hljs-selector-tag">dev</span><span class="hljs-selector-class">.env</span><span class="hljs-selector-class">.js</span> 开发环境变量 │ ├── <span class="hljs-selector-tag">index</span><span class="hljs-selector-class">.js</span> 项目配置文件 │ ├── <span class="hljs-selector-tag">prod</span><span class="hljs-selector-class">.env</span><span class="hljs-selector-class">.js</span> 生产环境变量 │ └── <span class="hljs-selector-tag">test</span><span class="hljs-selector-class">.env</span><span class="hljs-selector-class">.js</span> 测试环境变量 ├── <span class="hljs-selector-tag">mock</span> <span class="hljs-selector-tag">mock</span>数据目录 │ └── <span class="hljs-selector-tag">hello</span><span class="hljs-selector-class">.js</span> ├── <span class="hljs-selector-tag"><a href="http://www.js-code.com/tag/package" title="浏览关于“package”的文章" target="_blank" class="tag_link">package</a></span><span class="hljs-selector-class">.json</span> <span class="hljs-selector-tag">npm</span>包配置文件,里面定义了项目的<span class="hljs-selector-tag">npm</span>脚本,依赖包等信息 ├── <span class="hljs-selector-tag">src</span> 项目源码目录 │ ├── <span class="hljs-selector-tag">main</span><span class="hljs-selector-class">.js</span> 入口<span class="hljs-selector-tag">js</span>文件 │ ├── <span class="hljs-selector-tag">App</span><span class="hljs-selector-class">.vue</span> 根组件 │ ├── <span class="hljs-selector-tag">components</span> 公共组件目录 │ │ └── <span class="hljs-selector-tag">title</span><span class="hljs-selector-class">.vue</span> │ ├── <span class="hljs-selector-tag">assets</span> 资源目录,这里的资源会被<span class="hljs-selector-tag">wabpack</span>构建 │ │ ├── <span class="hljs-selector-tag">css</span> 公共样式文件目录 │ │ ├── <span class="hljs-selector-tag">js</span> 公共<span class="hljs-selector-tag">js</span>文件目录 │ │ └── <span class="hljs-selector-tag">img</span> 图片存放目录 │ ├── <span class="hljs-selector-tag">routes</span> 前端路由 │ │ └── <span class="hljs-selector-tag">index</span><span class="hljs-selector-class">.js</span> │ ├── <span class="hljs-selector-tag">store</span> 应用级数据(<span class="hljs-selector-tag">state</span>) │ │ └── <span class="hljs-selector-tag">index</span><span class="hljs-selector-class">.js</span> │ └── <span class="hljs-selector-tag">views</span> 页面目录 │ ├── <span class="hljs-selector-tag">hello</span><span class="hljs-selector-class">.vue</span> │ └── <span class="hljs-selector-tag">notfound</span><span class="hljs-selector-class">.vue</span> ├── <span class="hljs-selector-tag"><a href="http://www.js-code.com/tag/static" title="浏览关于“static”的文章" target="_blank" class="tag_link">static</a></span> 纯静态资源,不会被<span class="hljs-selector-tag">wabpack</span>构建。 └── <span class="hljs-selector-tag">test</span> 测试文件目录(<span class="hljs-selector-tag">unit</span>&amp;<span class="hljs-selector-tag">e2e</span>) └── <span class="hljs-selector-tag">unit</span> 单元测试 ├── <span class="hljs-selector-tag">index</span><span class="hljs-selector-class">.js</span> 入口脚本 ├── <span class="hljs-selector-tag">karma</span><span class="hljs-selector-class">.conf</span><span class="hljs-selector-class">.js</span> <span class="hljs-selector-tag">karma</span>配置文件 └── <span class="hljs-selector-tag">specs</span> 单测<span class="hljs-selector-tag">case</span>目录 └── <span class="hljs-selector-tag">Hello</span><span class="hljs-selector-class">.spec</span><span class="hljs-selector-class">.js</span> </code></pre> </li> <li>vue文件基本结构</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>=" <template></p> <div> <!--必须在div中编写页面--> </div> <p> </template><br /> <script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> <a href="http://www.js-code.com/tag/default" title="default" target="_blank">default</a> { components : { }, data () { <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> { } }, methods: { }, mounted() {</p> <p> } } </script><br /> <!--声明语言,并且添加scoped--></p> <style lang=&quot;less&quot; scoped> </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code> <span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span>&gt;</span> <span class="hljs-comment">&lt;!--必须在div中编写页面--&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/default" title="浏览关于“default”的文章" target="_blank" class="tag_link">default</a></span> { <span class="hljs-attr">components</span> : { }, data () { <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> { } }, <span class="hljs-attr">methods</span>: { }, mounted() { } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-comment">&lt;!--声明语言,并且添加scoped--&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"less"</span> <span class="hljs-attr">scoped</span>&gt;</span><span class="undefined"> </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> </code></pre> <ul> <li> <p>vue文件方法声明顺序</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" - components - props - data - created - mounted - activited - update - beforeRouteUpdate - metods - filter - computed - watch" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs haskell"><code> - components - props - <span class="hljs-class"><span class="hljs-keyword">data</span> </span> - created - mounted - activited - update - be<a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a>eRouteUpdate - metods - filter - computed - watch</code></pre> </li> </ul> <h3 id="articleHeader4">注释规范</h3> <p>代码注释在一个项目的后期维护中显的尤为重要,所以我们要为每一个被复用的组件编写组件使用说明,为组件中每一个方法编写方法说明。<br />以下情况,务必添加注释</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="1.公共组件使用说明 2.各组件中重要函数或者类说明 3.复杂的业务逻辑处理说明 4.特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的hack、使用了某种算法或思路等需要进行注释描述 5.注释块必须以/**(至少两个星号)开头**/; 6.单行注释使用//; " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code><span class="hljs-number">1.</span>公共组件使用说明 <span class="hljs-number">2.</span>各组件中重要函数或者类说明 <span class="hljs-number">3.</span>复杂的业务逻辑处理说明 <span class="hljs-number">4.</span>特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的hack、使用了某种算法或思路等需要进行注释描述 <span class="hljs-number">5.</span>注释块必须以<span class="hljs-comment">/**(至少两个星号)开头**/</span>; <span class="hljs-number">6.</span>单行注释使用<span class="hljs-comment">//;</span> </code></pre> <ul> <li> <p>单行注释</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" 普通方法一般使用单行注释// 来说明该方法主要作用 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code> 普通方法一般使用单行注释<span class="hljs-comment">// 来说明该方法主要作用</span> </code></pre> </li> <li> <p>多行注释</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a>" class="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="浏览关于“top”的文章" target="_blank" class="tag_link">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>=" 组件使用说明,和调用说明<br /> <!--公用组件:数据表格 /** * 组件名称 * @module 组件存放位置 * @desc 组件描述 * @author 组件作者 * @date 2017年12月05日17:22:43 * @param {<a href="http://www.js-code.com/tag/Object" title="Object" target="_blank">Object</a>} [title] - 参数说明 * @param {Str<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>g} [columns] - 参数说明 * @example 调用示例 * <hbTable :title=&quot;title&quot; :columns=&quot;columns&quot; :tableData=&quot;tableData&quot;></hbTable> */ -->" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code> 组件使用说明,和调用说明 <span class="hljs-comment">&lt;!--公用组件:数据表格 /** * 组件名称 * @module 组件存放位置 * @desc 组件描述 * @author 组件作者 * @date 2017年12月05日17:22:43 * @param {<a href="http://www.js-code.com/tag/Object" title="浏览关于“Object”的文章" target="_blank" class="tag_link">Object</a>} [title] - 参数说明 * @param {<a href="http://www.js-code.com/tag/String" title="浏览关于“String”的文章" target="_blank" class="tag_link">String</a>} [columns] - 参数说明 * @example 调用示例 * &lt;hbTable :title="title" :columns="columns" :tableData="tableData"&gt;&lt;/hbTable&gt; */ --&gt;</span></code></pre> </li> </ul> <h3 id="articleHeader5">编码规范</h3> <p>优秀的项目源码,即使是多人开发,看代码也如出一人之手。统一的编码规范,可使代码更易于阅读,易于理解,易于维护。<strong>尽量按照ESL<a href="http://www.js-code.com/tag/int" title="int" target="_blank">int</a>格式要求编写代码</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" 1.使用ES6风格编码源码 定义变量使用let ,定义常量使用const 使用export ,import 模块化 2.组件 props 原子化 提供默认值 使用 type 属性校验类型 使用 props 之前先检查该 prop 是否存在 3.避免 this.$parent 4.谨慎使用 this.$refs 5.无需将 this 赋值给 component 变量 6.调试信息console.log() debugger 使用完及时删除 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code> <span class="hljs-number">1.</span>使用ES6风格编码源码 定义变量使用<span class="hljs-keyword"><a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a></span> ,定义常量使用<span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> 使用<span class="hljs-keyword">export</span> ,<span class="hljs-keyword">import</span> 模块化 <span class="hljs-number">2.</span>组件 props 原子化 提供默认值 使用 <span class="hljs-keyword">type</span> 属性校验类型 使用 props 之前先检查该 prop 是否存在 <span class="hljs-number">3.</span>避免 <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.$<a href="http://www.js-code.com/tag/parent" title="浏览关于“parent”的文章" target="_blank" class="tag_link">parent</a> <span class="hljs-number">4.</span>谨慎使用 <span class="hljs-keyword">this</span>.$refs <span class="hljs-number">5.</span>无需将 <span class="hljs-keyword">this</span> 赋值给 component 变量 <span class="hljs-number">6.</span>调试信息<span class="hljs-built_in">console</span>.log() <a href="http://www.js-code.com/tag/debugger" title="浏览关于“debugger”的文章" target="_blank" class="tag_link">debugger</a> 使用完及时删除 </code></pre> <p></code></p>

总结

以上是脚本宝典为你收集整理的

VUEJS开发规范

全部内容,希望文章能够帮你解决

VUEJS开发规范

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过