link:https://github.com/wangyu po/vue-vuex-router

vueCli3项目脚手架，SPA最佳实践。

注意！ 这是Vue的最佳实践，包括实践展示，但不包括初学者入门。 对于Vue初学者，可以学习Vue，如下所示：

1、在Vue Vue-Router上建立展示网站。 站点按页面划分模块，每一页按section (部分)划分模块。 培养自己的模块化思想。

2、在Vue Vue-Router Axios上建立有请求的网站。 在页面上显示请求的结果。 锻炼要求接口的能力，理解前后端的分离思想。

3、建立可以在Vue Vue-Router Axios Vuex上管理数据的网站。 将请求放入Vuex，在store中管理数据。 了解Vuex在开发中的帮助，提高项目开发能力。

完成以上三个步骤后，我进入了Vue。 接下来，可以使用此最佳实践来构建更优雅的代码和组织更简洁的项目。

常用命令

插件安装

yarn安装

启动项目

yarn服务器

项目打包

yarn build

分析包装体积

yarn analyz

提交代码

雅虎推送

项目结构

- src

- api //接口管理目录

- assets //图像资源目录

- common //公共资源目录(包装器、请求封装器) ) ) ) ) ) ) )。

- components //组件目录

- config //配置文件目录

- env.js //环境配置

- fliters //公共过滤器

- layouts //外层布局

- locale //i18n语言目录

-路由器//路由

- store //Vuex管理目录

- style //公共样式目录

- views //页面目录

推荐规范

1，命名

组件名称：

文件名与组件名称匹配，并使用PascalCase (驼峰字命名法)。 例如，CountDown.vue是倒计时组件。

参考链接：

3359 cn.vue js.org/v2/guide/components-registration.html #组件名称的大小写

页面命名：

在Vue中，任何组件，包括页面，但为了与UI、业务组件区分开来，所有页面组件的名称都以“小驼峰法”命名，如home.vue。

变量命名：

常数——全部加大写下划线，如下所示：

letimage _ server=' http://img.Alibaba.com '；

let MAX_LENGTH=200；

变量——，小驼峰命名法如下：

let maxCount=10；

let tableTitle='LoginTable '；

全局变量——g变量名称，例如：

var gConfig={

a:1，

b:2

(；

私有变量——下划线变量名称，例如：

let _name='美妙的歌曲'；

2、身材

样式在style文件夹中保持统一

|- common.scss可以包含公共、全局和常用样式，以便于组织样式。 例如， hide{display: none； }

| -全局填充|- mixin.scss的样式方法已经在webpack中全局部署，使用时使用@include ct (；

| -无需在|- reset.scss中包含重置的页面样式css进行修改

|- var.scss包含用于全局样式(如颜色、字体大小等)的通用变量

3、vuex

store按页面或业务分类，在store/index.js中统一输出

所有mutations方法都需要描述当前最外层的mutation-type.js，然后部署到单个mutations.js中使用

4、求求你

请求在api文件夹下统一管理，可以按页面或业务划分。 所有请求都应该放在vuex的操作中，不能放在页面内。 将数据集中存储在state中，使用getter获取数据，使用mutations修改数据，保持数据的方向性。

Vuex的作用和数据的处理方法是什么？

在前端，Vuex可以被视为后端mvc的m层，即数据处理层。 除了控制器之外，只有它与数据库接触。 控制器只能使用它来调用和检索数据，而不能直接修改数据库数据。 此外，需要m层来修改数据库。

另外一方面，在vuex(store )中，action取数据(要求接口)，getter处理数据并返回到适当格式)，mutation改变数据(即改变数据库)，sster

也就是说，Vuex是简单的数据处理，应该与页面分开，保持数据的独立性和方向性。

5、格式化方法

的数据格式，如时间戳、隐藏手机号码、银行卡格式等操作，不建议在vue页面上通过方法修改数据。 建议在fliters中说明筛选器，并在模板中输入{{data | f

liter}} 格式化数据，可以使数据更干净。

6、语言

建议一直使用i18n作为语言的处理工具，方便国际化和统一管理，它在 config/lang 中（建议按页面区分）。

它的使用方法是，在.vue文件中 {{$t('name')}}

在js中，获取当前语言的方法是，console.log(this.$i18n.locale)，设置语言的方法同样 this.$18n.local = 'zh-CN'

7、vue-router

统一采用按需加载，如：const Home = () => import( /* webpackChunkName: "home" */ '../views/home.vue')，其中的 webpackChunkName 指的是打包出来的包名。

8、布局

布局在 layouts 文件夹中，然后在 App.vue 中引入，放在了路由的最外层，充当整个项目的公共布局，如：页眉、页脚等。

常见问题

1、yarn push 不能用怎么办？

命令行工具切到项目目录下，执行 chmod 755 push.sh

2、如何用手机调试，或者让别人看到？

项目启动的时候已经是你的本地ip了，只需要将手机和电脑连在同一个网络环境下（如：连同一个WIFI），复制地址栏的地址发送给手机即可访问。 之后，你改动任何一个地方，就能方便的在手机上看到改动了。也可以将这个地址发给同一网络环境的其他人，他们也就可以看到效果了。

3、我要开发移动端H5怎么做？

1、切换到mobile_template分支，这是为移动端开发专门准备的模版，执行命令：git checkout mobile_template。 2、查看设计稿的宽度，如750px、375px。 3、将设计稿宽度/10，然后修改 package.json 中的 postcss-px2rem 下的 remUnit 4、样式、css等就可以按照设计稿的大小用px来写了 例子： "postcss": { "plugins": { "autoprefixer": {}, "postcss-px2rem": { "remUnit": 37.5 // 修改这个值为"设计稿宽度/10" } } },

4、我想把格式化后4个空格改成2个怎么改？

.editorconfig 中 indent_size = 2 即可

5、我怎么在组件中引入图片？

图片目录在src/assets下，在组件中引入方式如下： <img :src="reuqire('@/assets/img/demo.png')" alt="" /> Tips：建议动态引入，避免调整页面带来的路径问题

6、我怎么无视层级导入css，或是引入图片？

使用 ~ @import "~@/scss/_var.css"; @import "~@/assets/iconfont/iconfont.css"; background: url("~@/assets/img/xxx.png"); 原理： CSS loader 会把把非根路径的url解释为相对路径，加~前缀才会解释成模块路径。

7、我想修改Toast的样式怎么办？

src/components/toast/toast.vue 修改此文件即可，更多修改可以查找 "vue插件" 资料。

8、我想在本地和服务端调试怎么弄？

修改 vue.config.js 中的 proxy 为你的服务端地址即可，如： proxy: 'http://xxx.com'

9、我引入了第三方组件，如何修改样式？

有两个方法可以解决这个问题： 方法一： 在scoped的scss中使用 >>> 或者 /deep/ ，它们是vue提供的"深度作用选择器"，你可以参考 —— https://vue-loader.vuejs.org/zh/guide/scoped-css.html#%E6%B7%B1%E5%BA%A6%E4%BD%9C%E7%94%A8%E9%80%89%E6%8B%A9%E5%99%A8 <style scoped> .a >>> .b { /* ... */ } .a /deep/ .b { /* ... */ } </style> 方法二： 单独写一个style，不加scoped，在这里面单独修改 <style> .a .b { /* ... */ } </style>

10、UI说我移动端的border太粗了，和他UI严重不符，怎么解决？

移动端屏幕像素比(dpr)导致的，如果你开发移动端，我为你准备了现成的1px border，不要使用border: 1px solid #ff6632，而是用： @include border-bottom(); @include border-top(); @include border-left(); @include border-right(); @include border(); 同时你也可以传入一些配置项来设置border的颜色、粗细等等，详细的请切换到 mobile_template 分支，查看 src/style/mixin.scss 里面的 border 类。

11、在数学运算时，出现了1.1999999999这种无限小数位，我该怎么解决啊？

浮点数运算失精，可以用 number-precision 这个插件，具体使用方法为： yarn add number-precision import NP from 'number-precision' NP.plus(0.1, 0.2) ...... 更多使用方法参考官方文档：https://github.com/nefe/number-precision

12、前端好多日期展示，每次在methods里面处理好麻烦，我又不想修改原数据，有更方便的办法吗？

有！你完全不需要每次写方法处理，只需要在需要<template>模版中用 "| 过滤器" 即可！ 因为我们全局混入了过滤器，内置了常用的方法，因此，对待时间戳转日期、隐藏手机号中间四位等要求，我们可以这样做： 时间戳：{{1544179366 | timeFilter}} => 2018-12-07 18:42:46 手机格式化：{{15311959057 | formatPhone}} => 153****9057 银行卡格式化：{{123123123123132 | formatBank}} => 1231 2312 3123 132 千分位分隔符：{{5000039 | toThousands}} => 5,000,039 如果你需要自定义一些方法，可以在 src/filters/index.js 里自己添加，用法和示例一样。 看，就是如此方便！向一堆重复方法说Bye Bye吧！ 更多使用方法参考官方文档：https://cn.vuejs.org/v2/guide/filters.html

13、我用你这个框架开发微信公众号，在做微信分享的时候wx.config总是不过，一直报"invalid signature"，后端也找不出毛病来，你给我解决解决吧

vue这样引入sdk yarn add weixin-js-sdk import wx from 'weixin-js-sdk' 别的先不说，我先给你解决方案： 1、vue-router用hash模式 2、wx.config里面的url要动态获取并且encode，直接把这个换上去 encodeURIComponent(location.href.split('#')[0]) 3、wx.config放到页面mounted里面，生命周期放的越前越好 为什么？ 首先，wx.config里面的url必须是动态获取的，不能写死，因为在分享的时候微信会给你在链接里下毒，没毒不让分享。 其次，url必须和你后台配置的js安全域名一样，本地测试不了你可以放到开发环境测试，实在不行你过来打我。 最后，微信开发者文档在这里，有不懂的加群问我，群号在最后 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

14、为什么我关了node服务，再次yarn serve的时候，端口号就变了，每关一次，端口号就会变一次，调试起来好麻烦呀，能不能让他不变？

如果你是mac电脑，试试用 control + c 来关闭node服务，而不要用 control + z windows电脑，我不知道

15、我用你这个开发微信公众号，在IOS手机上下滑动的时候，整个页面就被拖着走，这个怎么解决？

使用iNoBounce，使用方法： 1、在public文件夹下自己创建一份inobounce.min.js 2、然后在index.html加这段代码 <script src="./inobounce.min.js"></script> github地址：https://github.com/wangyupo/iNoBounce

16、加上iNoBounce以后IOS不能滚动什么情况？部分页面不能滚动又是什么情况？

所有页面都不能滚动 在最外层加这样的css： overflow-y:scroll; -webkit-overflow-scrolling:touch; 如果有单个页面不滚动，比如你在页面里面加了vant的list组件，发现页面不能上下滑动 本页面最外层的css这样写： height: 100vh; overflow-y:scroll; -webkit-overflow-scrolling:touch;

17、ios input获取焦点有延迟怎么解决？

//main.js 引入 import FastClick from 'fastclick'; FastClick.attach(document.body); FastClick.prototype.focus = (ele) => { 'use strict'; ele.focus(); }; //修改focus()方法 参考链接：https://github.com/ftlabs/fastclick/issues/583