使用vue一年多了，做了一个javaee的项目（全栈，前端使用的mvvm框架vue），三个移动端项目，其中两个钉钉子应用（钉钉的坑很多，心累），一个微信的（ing）。自己也慢慢摸索出一些项目中的最佳实践，整理了一下，做个记录一起交流。如果你在阅读过程中，觉得我某些地方做的不对或者有更好的方法时，欢迎交流~
项目结构
清晰的目录结构不仅可以展现一个团队的水平，而且别人维护（接锅）的时候，也能更好的理解你的项目。这个每个团队都有自己的标准或者风格，没有固定的格式。我一般是这么安排的（vue-cli项目），下面是src目录：
—— src
|—— assets // 项目资源目录
|—— styles // 样式文件
|—— reset.scss // reset css，会在 /src/main.js 中被导入
|—— variables.scss // 项目中的变量，混合（mixin）等公有样式变量
|—— ...
|—— images // 图片
|—— fonts // 字体
|—— ...
|—— components // 组件目录
|—— layout // 布局相关组件
|—— Header.vue // 头部
|—— BottomMenu.vue // 底部菜单
|—— ...
|—— common // 公有组件
|—— base // 基础组件
|—— ...
|—— pages // 页面目录
|—— user // 用户相关页面
|—— Login.vue // 登录页面
|—— Register.vue // 注册页面
|—— Info.vue // 详情页面
|—— order // 订单相关页面
|—— List.vue // 订单列表
|—— Detail.vue //订单详情
|—— ...
|—— Home.vue // 主页
|—— ...
|—— router // 路由
|—— modules // 存放各个模块的路由
|—— user.js // 用户模块
|—— order.js // 订单模块
|—— index.js // 路由主js，整合各个模块，并且还会定义一些全局钩子等其他
|—— store // 全局状态管理目录
|—— mutation-types.js // mutation types
|—— index.js // 主js，整合各个模块的
|—— actions.js // actions
|—— modules // 各个模块的states
|—— user.js
|—— order.js
|—— common // 全局工具方法
|—— data-format.js // 数据转换
|—— http.js // 网络请求
|—— ...
|—— App.vue
|—— main.js
|—— init-plugins.js // 依赖的第三方的初始化，会在main.js中引入以上只是我个人的习惯，不过这个结构要根据具体的项目情况调整。不必为了模块化而模块化。如果你的项目业务逻辑不复杂，整个项目也就十几个页面，可以适当的删减部分模块。
组件
你的项目可能需要一些这样的组件，来提升用户体验。
no-data-found
这个存在的场景是，比如你加载数据列表或者筛选列表查询等数据操作，如果请求成功但是没有数据，这时候有必要提供一个no-data-found的组件。
error
当你的应用出错的时候，比如网络超时加载不了数据，也可以给一个组件做提示
- …
方法抽取
在开始我们项目之前，我们应该知道，有哪些方法是必要的、共有的，类似于我们的工具方法一样。这里我罗列一些供参考：
网络请求
- 项目可能用到几种请求？（POST,GET,PUT,DELETE…）
对于不同的请求，我们的请求头也需要改变，是抽取成四个方法，还是在一个方法上变异？
哪种更适合现在的业务场景？ - 请求出错如何处理（组件内捕获？全部捕获？其他？…）
为什么提出这个问题呢？因为这是我前不久我的leader给我提的优化方案。之前的项目都没在意过这个，后来是把axios包了一层，使用了类似jQuery的请求方式，实现了组件内捕获业务场景错误（校验失败之类的），全部捕获请求错误（404，500，400等）。
数据转换
- 日期格式转换
日期与字符串转换
关于日期都所有操作，建议采用
momentJs。功能强大而且兼容性好，我深深的记得之前一个钉钉项目中日期操作不兼容iphone手机的时候，那个bug让我找了半天才找到根源。
官网传送门：http://momentjs.cn/数字与字符串转换
交互方法
你的应用应该包含一套用于提示用户的组件：
Toast
用于提示用户一些信息
Confirm
用户提示用户是否确认接下来的操作。对于一些重要的操作，比如提交表单，删除信息等操作，务必使用。
Loading
当用户在上传或者下载图片等其他资源的时候，用于提示进度信息。当然这个请求方法要能够获得到相应的进度信息才行，伪造须谨慎（手动斜眼笑）。
Spinner
加载数据时的提示，俗称“菊花图“
mint-ui：http://mint-ui.github.io/docs/#/
vux：https://doc.vux.li/zh-CN/
这里要说的是，你可以对这些方法进行二次封装，以便更方便的使用。包装后，可能就可以像下面这样使用了：
Dialog.toast('cool')
Dialog.confirm('Are you sure?',()=>{Dialog.toast('confirm')})
Dialog.spinner('loading...')如何管理css
该分离还是该合并
我们知道vue的SFC(单文件组件，即以.vue结尾的文件)，提供了三个基础的顶级标签：<template>, <style>,<script>。我个人比较喜欢把样式也写进SFC中，因为这样针对性很强，调试某个页面样式的时候，只要打开一个文件就行了。（这么说是因为我一开始是隔离所有的css文件到assets目录下，这样虽然代码看起来漂亮了，你只要在style标签内import样式就可以了，但是调试的时候非常不方便。）
可以使用全局变量吗
当然，前提是在你使用css预处理器的情况下：
为了系统的UI一致性（consistency），我们的设计稿肯定是一套统一的主题的。所以我们不同页面的边框粗细颜色，按钮背景色，字体大小颜色，一级边框二级边框…，一级标题二级标题…等等众多的样式需要保持一致。如果在每个页面都定义一次，这可行，但是工作量和做法都是不值得提倡的。
有一些loader就是负责处理这类情况的，以sass为例，你可以使用 sass-resources-loader 来完成全局变量的共享。使用方法也很简单：
- 安装
npm install sass-resources-loader --save-dev- 使用
如果你使用的vue-cli版本是3之前的话，修改项目中/build/utils.js中的scss成如下：
scss: generateLoaders('sass').concat({
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/assets/styles/variables.scss')
}
})接下来就可以在任意的组件中使用这个varibles.scss里面的样式了。
reset.css
有的ui框架会修改默认样式，而且不同浏览器的样式标准也有一些不同，所以resetcss很有必要。国内诸如淘宝，百度等都有自己的resetcss，你可以参考这篇博客获得帮助，也可以根据这个自定义自己项目的resetcss。
https://meyerweb.com/eric/tools/css/reset/
<style scoped> with <style>
也许你遇到过这种情况，需要修改某一个ui框架的默认样式，但是在scoped的style块中修改不成功。不得不将style块的scoped属性拿掉，或者将这个要改变的样式放进全局样式里再在main.js中导入，或者直接将样式定义在App.vue里面。这些都是可行的，但是要注意命名空间要是正确的，不然是找不到样式的。
这里提供另一种方法。其实在vue的SFC中，是允许多个style块的。你可以像下面这样使用：
<style scoped lang="scss">
.order-detail {
// put your local style here
}
</style>
<style>
.mint-button{
// put your global style here if you want to change the lib's style
}
</style>善用vue-router的meta
可能很多人用vue-router的时候，只是用来做路由跳转，配置路由的时候，添加一个path和component就完事了。如果这样能满足你的所有需求，那也ok。但是有一些业务场景，使用meta属性可以非常巧妙的解决问题。
这里分享一下我使用过的例子：
title
想要动态的显示应用/系统的标题，你会怎么做呢？
你可能会在每一个页面的钩子中给document.title赋值，但是有更简单的方法，比如我定义一个下面的router：
{
name:'user-detail',
path:'/user-detail',
component: UserDetail,
meta: {
title: '用户信息'
}
},接着在App.vue里面，添加下面的代码：
watch:{
'$route':function(to, from){
document.title = to.meta.title
}
}这样每次定义router的时候，只要填写了meta属性，系统的title就会跟着改变了。
另外，在App.vue里面watch的$route，还有很多用处，比如处理前进后退的动画等。
keepAlive
我们知道vue提供了一个<keep-alive> 组件，用户缓存组件以获得更快的交互。简单介绍一下，当设置某一页面为keep-alive的时候，它的mounted只会在第一次加载的时候执行一次，后面在打开该页面的时候都不会执行。但是activated和deactivated两个钩子可以捕获页面进入和退出的动作。
根据不同的业务逻辑，有些页面需要缓存有些页面不需要缓存，所以我们也可以定义在router中：
{
name:'user-detail',
path:'/user-detail',
component: UserDetail,
meta: {
title: '用户信息',
keepAlive: true
}
},然后修改主路由入口的代码（App.vue)
<template v-if="$route.meta.keepAlive">
<keep-alive>
<router-view/>
</keep-alive>
</template>
<template v-else>
<router-view/>
</template>这样你就可以根据自己的需要，决定哪些页面需要缓存了。
关于<keep-alive> 组件的更多用法，参考：https://cn.vuejs.org/v2/api/#keep-alive
scrollToTop
我们知道，vue-router提供了页面的滚动行为。vue-router的滚动行为
我们也可以在路由中配置该属性，来细粒度的控制我们页面的滚动行为。
scrollBehavior方法，摘自官网例子 。我给注释翻译了一下。
https://github.com/vuejs/vue-router/blob/next/examples/scroll-behavior/app.js
// - 只在支持html5 history 模式的浏览器中有效
// - 默认无滚动行为
// - 返回false的话，会阻止滚动行为
const scrollBehavior = (to, from, savedPosition) => {
if (savedPosition) {
// savedPosition 只在popstate的导航中有效
// popstate：https://developer.mozilla.org/zh-CN/docs/Web/Events/popstate
return savedPosition
} else {
const position = {}
// 通过返回选择器来滚动到锚点位置
if (to.hash) {
position.selector = to.hash
}
// 检查路由元数据（meta）配置中是否是返回顶部的需求
if (to.matched.some(m => m.meta.scrollToTop)) {
// 设置滚动位置的x和y坐标：顶部
position.x = 0
position.y = 0
}
// 如果返回的位置是假值（falsy）或者是空对象，将会返回当前滚动的位置
return position
}
}OK，今天就说这么多，还有一些，比如异常处理，vuex使用场景，一致性（consistency）等，下次有机会在写一篇，今天头有点痛，得睡觉了。
有一些实践我已经用到这个项目https://github.com/JerryYuanJ/a-vue-app-template中了，但是由于这个项目写的时间比较早，而且主要是为了熟悉vue和其他一些练习为主，那时候还不懂事，所以很多地方还是得改的，如果你需要拿项目来练手上面的一些实践的话，这会是个不错的选择。你可以pull requeset，我会merge的～欢迎star