后端，你再不懂vue就out了
肉眼品世界导读： 没错，我也是一个后端，我也是一个曾经不想写前端的人；由于偶尔在外做技术顾问赚点儿外快，创业公司居多，人家全是node.js,vue,看在钱的面子上，硬上呀；如果你还没有学过前端，便不能更称职的成为一个人技术leader,当然这一切建立在你对本职后端工作比较得心应手的基础上 ；vue是创业公司前端的不二选择，这里就系统化的讲一下vue相关入门操作 ，相关知识点很多地方找不到的哦，记得转发
更多优质内容请关注微信公众号“肉眼品世界”（ID：find_world_fine），深度价值体系传递
我是后端我不干前端的活儿
项目经理：看看这个地方是什么问题，不显示数据？
我：我这里用postman接口都请求通了，和后端没关系
项目经理：前端同学，你看看这个地方不显示数据是不是需要查看一下？
前端：omg, 我看看
过了半天，测试继续跟进：好像没动静也没提交代码，omg
项目经理一看，急了，再不上线老板得打人了
.....一番理论过后，发现后端的同学干活儿快，看看前端的问题是可以的
然后对项目经理对后端说：“干活儿这么利索，看看前端是可以的，下班后请你吃顿大餐”
后端说：我只认真学后端，后端还没学精呢（心里其实是想烫手的山芋我还不想接呢）
项目经理并不认怂，通知：相关人今天通宵加班
通宵两三天后，还是不行
项目经理认怂了，给老板如实汇报
后面来了一个更好的前端，也来了一个愿意偶尔帮点忙做前端的后端，没多久就升职了
问题就摆在那，解不解决都在摆在那，让老板来解决就不好了
人就这么多，所以有富裕精力的同学稍微能了解一下前端，其实都差不多，你就拥有更出色的竞争力
下面就几个初步搭建vue,uiapp框架常见遇到的坑做一下梳理，方便大家快速上手
光会vue还不行，得学会体系化思维，要解决vue这一个体系的事情,从vue环境搭建，到文档规范，到代码规划，到部署上线，这样一件事公司交给你，会觉得放心，这里仅仅从纯技术方面展开，文档规范和代码规范
文档管理工具
有人wiki工具有哪些
confluence,showdoc,redmine,tapd每个工具都很强大，看个人喜欢
confluence做api接口列表，看起来比较美观，用得比较多
redmine强大的集成项目管理各方面功能比较强大
showdoc简易功能齐全
tapd常用功能和项目管理，bug管理都比较完善了，一般可以直接使用
api接口文档
做前端第一个就得让后端把api接口定出来，当然自己也要理解业务能协助后端一起把api接口字段对得准确，前期准备越充分，后期扯皮越少
java用swagger等工具自动生成
showdoc也有自动生成api接口文档的功能，没错，直接用
php也是有的，反射一下读取类的注释，都是这么搞的
架构设计文档
这个每家公司都有自己的搞法，但是重要的设计必不可少,五视图和uml要做得怎么样灵活把我，以大家好信息同步，新人上手一看即懂为止
其他文档
新人入职手册（账号、权限、常用软件），服务器列表，项目对应域名与仓库,软件版本规范等等
知识管理中心
除了日常的各种文档，流程，api接口之外，另外一个非常重要的因素，其实好多时候被忽略了，那就是知识管理中心，一些很常用有用的东西都分门别类的额放到文档中心，时间久了，这个强大的力量可能远超一个leader口头说了，沉淀下来的东西是最好的
node js环境搭建
我是喜欢一般到官网下载的http://nodejs.cn/,下载之前先看公司wiki版本规范，或者问一下同事，nodejs这东西不同版本下的表现不一样，到时可别发现各种问题还不知道情况,下载后:
vi /etc/profile
#加上:末尾 export PATH=$PATH:/usr/local/node/bin
source /etc/profile
#查看是否设置成功
node -v
别说我第一次上手还被坑了， 还有一种方式就是通过nvm安装了，nvm用于管理node版本，也就是可以任意版本切换的，omg，原来还有这个好东西，至于nvm怎么安装,百度一下，小编就不写了
安装好了是不是觉得挺high的，正当你npm install时，你发现my god，怎么到处报错，没事这个时候百度还是挺好用的，虽然google可能更好，root账户运行的时候需要加上:
npm install --production --unsafe-perm=true --allow-root
加上它界面上给你报错报的就是no access啥的，哈哈，可别按照字面意思直接硬杠，百度一下有时还是挺好使的，大多数软件为了安全问题是避免使用root账户执行的，别继续加个777,也是没用的
当你安装错了版本，好不容易换上新的版本来npm install时，满怀希望，结果咔嚓还是报错，莫慌，先把目录下的 node_modules删除,再npm run start 一下，你可以发现哇撒，原来node也可以不要nginx 这类server自己跑起来了,至此对js的看画风突转，程序员鼓励师正快步走来
vue 发布环境搭建
上服务器git pull挺快的，但是你要让一个前端工程师经常上服务器git pull，或者让运维老是给你git pull，她会烦的，这个时候jenkins上场
1:安装jdk
yum install -y java
2、安装jenkins
添加Jenkins库到yum库，Jenkins将从这里下载安装。
1 wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo
2 rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key
3 yum install -y jenkins
如果不能安装就到官网下载jenkis的rmp包，官网地址（http://pkg.jenkins-ci.org/redhat-stable/）
1 wget http://pkg.jenkins-ci.org/redhat-stable/jenkins-2.7.3-1.1.noarch.rpm
2 rpm -ivh jenkins-2.7.3-1.1.noarch.rpm
配置jenkis的端口
vi /etc/sysconfig/jenkins
找到修改端口号：
JENKINS_PORT="8080" 此端口不冲突可以不修改
3、启动jenkins
service jenkins start/stop/restart
安装成功后Jenkins将作为一个守护进程随系统启动
系统会创建一个“jenkins”用户来允许这个服务，如果改变服务所有者，同时需要修改/var/log/jenkins, /var/lib/jenkins, 和/var/cache/jenkins的所有者
启动的时候将从/etc/sysconfig/jenkins获取配置参数
默认情况下，Jenkins运行在8080端口，在浏览器中直接访问该端进行服务配置
Jenkins的RPM仓库配置被加到/etc/yum.repos.d/jenkins.repo
初始化
4、打开jenkins
在浏览器中访问
首次进入会要求输入初始密码如下图，
初始密码在：/var/lib/jenkins/secrets/initialAdminPassword
输入你上面获取到的初始化密码，下一步我选择的是推荐安装，后面自己需要的自己可以再去插件库安装。
插件安装
初始化成功之后前往系统设置->插件管理安装几个必要插件：
Publish Over SSH
GitLab Plugin #因为是使用的Gitlab所以要安装这个
NodeJS Plugin #我们前端使用的Vue所以要用到node
开始征程
一、基础配置
安装完插件之后需要配置一些基础内容如jdk、node、ssh等
1.ssh安装
进入：Manage Jenkins-> Configure System
点击高级：
点击Test Configuration测试是否连接成功,这里最好不要用root相关账户来操作，因为通过jenkins也能执行shell,就指定目录限定发布代码目录即可
2.jdk、git
进入：Manage Jenkins-> Global Tool Configuration
我这里jdk、git采用自动安装，jdk安装时候需要一个账号，去注册下就可以
二、创建工程
新建一个工程
选择自由风格
三、配置工程
设置最多保留几个版本构建
使用git源码工具，输入git地址、添加git用户
if [ -f test.tar.gz ];then
rm testv.tar.gz
fi
tar -zcvf test.tar.gz ./*
这里为什么要把项目打包呢，因为下面要配置的ssh不支持文件夹传输，所以需要先将内容进行打包然后去服务器进行解包
全部保存好就可以去构建了,这里只是将一个简单的test.tar.gz文件从jenkins服务器发送到远程服务器的操作， test.tar.gz包含编译过后需要全部发送的内容，至于这个test.tar.gz 怎么来的，java maven 就在execute shell里增加命令 maven clean，maven install ,vue就npm install ,npm run build，更详细的java版查看「Jenkins+Git+Maven+Shell+Tomcat持续集成」经典教程
如果你在ssh server 里配置了目录的话，这里的Remote directory就是为ssh server配置的相对目录
按照一般的教程这个时候可能觉得大功告成了，那不是，常常会遇见一些小问题，比如在添加源码git的时候：Jenkins源码管理git报错：Host key verification failed
首先进入jenkins账号，直接sudo su jenkins还不行，看cat /etc/passwd 是把shell禁了的
sudo su -s /bin/bash jenkins
执行命令：
git ls-remote -h git@ip:xxx.git HEAD
点击然后下一步 ，点击yes ,ok，这时，ip就已经添加到~/.ssh/known_hosts。
记住一点，jenkins的相关操作都是以jenkins默认启动用户jenkins来操作的，这样遇到一些问题就好办了
耶~
vue项目配置:
vue现在在各个创业公司中用到比较多，用jenkins来部署vue其实很不错，最重要的思想就是编译打包都在内网jenkins机器完成，发布到服务器端的都是打包过后的html，这样技能提升效率，也能保障源码的安全:
1:部署vue先得安装node.js,在插件管理里安装好NodeJS plugin的插件,然后选择版本配置
这样我们就能在自动构建发布的配置里看到nodejs的编译选项了
二、发布配置
首先新建一个自由风格的项目
同上填写上构建源码：
在构建的时候execute shell
echo $PATH
node -v
npm -v
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
npm install
npm run build
cd dist
rm -rf vue-mall.tar.gz
tar -zcvf vue-mall.tar.gz *
cd ../
然后代码会从jenkins机器拉取下来，然后发送到已经配置好的服务器(ssh server)
cd /usr/local/nginx/html
rm -rf mall
mkdir mall
tar -zxvf vue-mall.tar.gz -C mall/
rm -rf vue-mall.tar.gz
ok,以上就可以顺利用jenkins发布vue了，前端的同学是不是感觉瞬间爽了呢
vue 代码规范
一、 目录结构
|— build 构建脚本目录
|— build.js 生产环境构建（编译打包）脚本
|— check-versions.js 版本验证工具
|— utils.js 构建相关工具方法（主要用来处理css类文件的loader）
|— vue-loader.conf.js 处理vue中的样式
|— webpack.base.conf.js webpack基础配置
|— webpack.dev.conf.js webpack开发环境配置
|— webapck.prod.conf.js webpack生产环境配置
|— config 项目配置
|— dev.env.js 开发环境变量
|— index.js 主配置文件
|— prod.env.js 生产环境变量
|— test.env.js 测试环境变量
|— node_modules 项目依赖模块
|— mock mock数据目录，用于本地数据模拟
|— src 项目源码目录
|— assets 资源目录，资源会被webpack构建
|— js 公共js文件目录
|— css 公共样式文件目录
|— images 图片存放目录
|— components 公共组件目录
|— common
|— network 存放项目的网络模块，接口
|— tools 自己封装的一些工具
|— App.vue 根组件
|— main.js 入口js文件
|— routers 前端路由目录
|— index.js
|— pages 前端页面文件
|— store 应用级数据管理
|— index.js 组装模块并导出，统一管理导出，也可命名为store.js
|— state.js 单一状态树，定义应用数据结构及初始化状态
|— getters.js 获取state中的状态，仅单向获取数据，不做任何修改
|— actions.js 调用mutation方法对数据进行操作
|— mutation-types.js 存放vuex常用的变量
|— mutations.js 定义state数据的修改操作
|— static 纯静态资源，不会被webpack构建，eg:没有npm包模块
|— test 测试
|— unit 单元测试
|— e2e e2e测试
|— .babelrc babel的配置文件
|— .editorconfig 编辑器的配置文件
|— .gitignore git的忽略配置文件
|— .postcssrc.js postcss的配置文件
|— index.html html模板，入口页面
|— package.json npm包配置文件，依赖包信息
|— README.md 项目介绍
二、 UI框架选择
PC端Vue项目UI框架优先选择：Element UI、iView
移动端Vue项目UI框架：mint-ui（优先）
三、 CSS预处理器选择
Stylus
选择原因：Stylus是来源于Node.js社区，与js关系密切，富于表现力、动态的、健壮的 CSS、支持省略花括号、支持省略分号，灵活、整洁。
四、 文件夹、组件命名规范，组件结构规范
文件夹：
文件夹名称应统一格式，小写开头，见名思意，page页面下的文件夹名称统一以page结尾，例如：homePage,loginPage。其余文件夹名称统一按照项目结构目录命名规范统一命名。
组件：
组件名以单词大写开头，当多个单词拼写成的组件时，采用驼峰式命名规则。一般是多个单词全拼，减少简写的情况，这样增加可读性。
组件应该都放到components文件夹下，单个页面独立一个文件夹，用来放相对应的vue文件以及页面相关的样式文件，样式少可直接写到页面组件里边，这样更符合组件化的思想。
公用组件应该统一放到public文件下。
基础组件：
当项目中需要自定义比较多的基础组件的时候，比如一些button，input，icon，建议以一个统一的单词Base开头，或者放到base文件夹统一管理，这样做的目的是为了方便查找。
页面级组件应该放到相对应页面文件夹下，比如一些组件只有这个页面用到，其他地方没有用到的，可以直接放到页面文件夹，然后以父组件开头命名，例如：HomeHeader.vue,HomeNav.vue。
项目级组件一般放到公共文件夹public下给所有的页面使用。
组件结构：
组件结构遵循从上往下template，script，style的结构。
五、 组件样式
单个组件样式一般可直接写到组件下style标签下，为了防止样式污染，可添加scoped 属性，也可以通过设置作用域来防止样式污染，写样式的时候尽量少写元素选择器，为了提高代码查找速度，可以用类选择器。
六、 文件格式
UTF-8格式
七、 Template模板文件
尽量使用以.vue结束的单文件组件，方便管理，结构清晰。
标签语义化，避免清一色的div元素
样式class的命名：统一以小写字母开头，小写字母、下划线和数字组成。命名中尽量避免使用中文拼音，应该采用更简明有语义的英文单词进行组合。不建议使用驼峰法命名class属性。使用下划线的目的是为了和第三方库中的命名冲突。例如：xx_left,xx_line。
多特性，分行写，提高可读性。即一个标签内有多个属性，属性分行写。
自定义标签：使用自闭标签的写法。例如：，如果自定义标签中间需要传入slot，则写开始标签和结束标签，结束标签必须加/。
组件/实例选项中的空行。便于阅读和代码架构清晰。
八、 Script
在 script 标签中，你应该遵守 Js 的规范和ES6规范。
组件名称：必须以大写字母开头驼峰法命名。
Data必须是一个函数。
Props定义：提供默认值，使用type属性校验类型，使用props之前先检查prop是否存在
调试信息 console.log() debugger使用完及时删除。
为v-for设置Key值。
使用计算 规避v-if和v-for用在一起。
无特殊情况不允许使用原生API操作dom,谨慎使用this.$refs直接操作dom。
使用ES6风格编码源码,定义变量使用let,定义常量使用const,使用export,import模块化。
指令缩写：都用指令缩写 (用 : 表示 v-bind: 和用 @ 表示 v-on:)。
使用 data 里的变量时请先在 data 里面初始化。
函数中统一使用_this=this来解决全局指向问题。
能用单引号不用双引号。
尽量使用===。
声明变量必须赋值。
九、 Style
使用 scoped关键字，约束样式生效的范围。
避免使用标签选择器（效率低、损耗性能）。
非特殊情况下，禁止使用 ID 选择器定义样式。有 JS 逻辑的情况除外。
CSS 属性书写顺序：先决定定位宽高显示大小，再做局部细节修饰！推荐顺序：定位属性(或显示属性，display)->宽高属性->边距属性(margin, padding)->字体，背景，颜色等，修饰属性的定义。
十、 注释规范
注意在注释的前后各有一个空格。
HTML注释：
CSS注释：/* write your HTML comment! */
Stylus注释：
a) 单行注释：// 我是less注释，和js的单行注释一样，在css中不输出
b) 多行注释
在这里插入代码片
/*
* less的多行注释，只有在compress选项未启用的时候
* 才会被输出
*/
c) 多行缓冲注释：
/*！
* less的多行缓存注释, Stylu压缩的时候这段代码无视
*/
JS注释：
a) 行级注释（注意//后面空格）：// 正确的注释
b) 变量声明注释：如果是在类似 Vue 项目的 data 属性中的变量，直接用行级样式跟在后面。
例如：rightExample: ‘yes’, // 注释直接写这里
c) 如果是在类，构造函数，或者常量定义中的变量，使用块级注释。
例如：
/*
* 错误码常亮定义
* @type {number}
*/
d) 函数声明注释：不必要在每一个函数都写注释，但是在公共函数，还是建议补全注释，让后面的人不需要重复早轮子。
e) 复杂的业务逻辑处理说明、特殊情况的代码处理说明，对于特殊用途的变量、存在临界值、使用了某种算法思路进行注释说明
十一、 资源路径的配置、引入规则
路径配置
在build/webpack.base.conf.js文件中配置。
alias: {
‘@’: resolve(‘src’), // 默认配置，设置src目录别名
‘childRouter’: resolve(‘src/pages/menuRouter’), // 子路由路径配置
‘#’: resolve(‘src/assets’) // 配置assets文件夹路径
}
路径导入
a) Js文件中导入实例：
导入node_modules模块中的文件，直接引入即可，不需要加文件后缀名。
导入自定义文件的时候，使用相对路径或者使用路径配置别名，不许要加文件后缀名。
导入node_modules模块：import Vue from ‘vue’
导入自定义文件：
import router from ‘./router’
import scrollConfig from ‘#/js/vuescroll.config’
b) css或者stylus样式导入需要使用 ~@ 开头
@import ‘~common/stylus/variable’
十二、 数据中心
各个文件的命名根据上面的项目结构命名。
应用层级的状态应该集中到单个 store 对象中。
action和mutation中的函数统一声明在mutation-type.js内。
mutation-types里面的常量、常量值全部用大写+英文单词配合下划线的形式：例如：export const UPDATE_USERINFO = “UPDATE_USERINFO”。
提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
异步逻辑都应该封装到 action 里面。
vuex 的dispatch和commit提交mutation的区别：dispatch=>actions用来触发异步操作，commit=>mutation用来触发同步操作的方法。当操作行为中含有异步操作，比如向后台发送请求获取数据，就需要使用action的dispatch去完成，其他使用commit即可。
十三、 路由
路由至少包含三个选项：path、name、component。path统一小写；name对应于组件中的name，大写开头驼峰；component组件名称大写开头的组件驼峰。
一级路由统一使用相对路径的形式。二级路由可以配置，配置见资源路径的配置、引入规则。
十四、 axios
根据需要配置post、get请求，一个是取一个是贴，只需要读取文件，put（PUT 往服务器上上传文件）、delect（删除）直接对数据进行操作相对不安全 。
axios的挂载：Vue.prototype.$http = axios;
axios使用封装后的get/post请求。
ajax的判断
首先 ajax 请求可以写在 actions也可以直接写在 .vue 页面里。
我们判断的依据是回调是否需要调用页面结构来区分,
比如在.vue页面中发送完请求后需要调用 this.$refs.element等,或者需要利用组件的独立性的效果时 后，那就写在.vue页面,否则就写在 actions 里。
十五、 api管理
新建src/ network/api.js
放置api路径，要注意 axios已经有了前缀,所以这里的 api 值需要写前缀之后的路径。当路径较多时可以再多建几个文件,分类放置。
// 统一管理接口export default { manage: { fertilizerStation: '/api/AllFertSiteNameList', // 获取列表 userLogin: '/api/Login' // 用户登录 }}br
挂载
在main.js中引入：import api from ‘./request/api’。
使用Vue.prototype.api = api挂载到原型链上即可处处使用。
十六、 依赖规范
在package.json里增加包依赖
“dependencies”: { "axios": "^0.18.0"}br
十七、 Web字体规范
优先使用框架中的字体图标，比如element ui中的
使用iconfont字体图标代替图片
在规范中包括的字体格式有：
woff: WOFF (Web Open Font 格式)
ttf: TrueType
ttf, otf: OpenType
eot: 嵌入式 OpenType
svg, svgz: SVG 字体
字体规则
a) 为了防止文件合并及编码转换时造成问题，建议将样式中文字体名字改成对应的英文名字，如：黑体(SimHei)、宋体(SimSun)、微软雅黑(Microsoft Yahei)。
b) 字体粗细采用具体数值，粗体bold写成700，正常normal写成400。
c) font-size必须以px为单位。
为了对font-family取值进行统一，更好的支持各个操作系统上各个浏览器的兼容性，font-family不允许在业务代码中随意设置
是不是感觉瞬间变专业了，放心，没人认得你是后端,前端已经抱着一朵鲜花来了
本地开跑vue
工欲善其事，必先利其器;先得找款ide呀，有的用vscode，有的用官方工具，这里我们直接用hbuilderX，别说，还挺好用
标准版和App开发版的区别说明
用哪个都行。HBuilderX 标准版可直接用于 web 开发、markdown、字处理场景。做 App 仍需要安装插件。App 开发版预置了 App/uni-app 开发所需的插件，开箱即用。标准版也可以在插件安装界面安装 App 开发所需插件，App 开发版只是一个预集成作用。App 开发插件体积大的原因主要有2方面：
真机运行基座，Android 版、iOS 版、iOS 模拟器版，加起来体积就1百多M。真机运行基座需要把所有模块都内置进去，方便大家开发调试。开发者自己做 app 打包是不会这么大的，因为可以在 manifest 里选模块来控制体积。
uni-app 的编译器，依赖 webpack 和各种 node 模块，node_modules 就是这么一个生态现状，文件超级多，几万个文件，解压起来很慢。
如果你使用 uni-app cli 方式创建项目，编译器会在项目下，且你不开发 App，只用 uni-app 做小程序和 H5，那使用标准版就可以。
作为不缺硬盘的你直接就下包的那个就行了，安装好后导入工程
然后运行，运行到内置浏览器,卡擦又是报错，先npm install一下把模块都装上，还提示一些less之类的插件的话，通过hbuilderX 的工具=》插件管理给安装上；再run一下，跑起来了
如果是uniapp，需要云打包为ios和android的话，需要到https://dev.dcloud.net.cn/注册一个账户，新建一个app并给同事相关权限加上，然后在manifest.json里把appid填写为你创建的。
开始run,一般都是能跑起来了，然后在chrome里按下f12，打几个断点，哈哈，是不是开始便起来了，可别，立马来了一个测试环境bug，看你如何调试，发现把api地址改成测试环境地址，运行的时候出错了，本地运行起来的是localhost:8080，访问远程端口不行呀，这个时候你当然可以让服务器端给你开权限啊(这玩意儿还是有安全隐患的,别上来就来个'Access-Control-Allow-Origin: *'，你在服务器端指定单个域名访问是没问题的)，还是前端自己来得快，vue是有一个proxy模块的，在manifest.json里配置:
"h5" :
{
"devServer":
{
"port": 8080,
"disableHostCheck": true,
"proxy":
{
"/api": {
"target": "http://api.xxx.com",
"changeOrigin": true,
"secure": false,
"pathRewrite":{"^/api":""}
}
}
},
}
呼啦，在本地也可以远程改bug了，记得在上线的时候把这个文件忽略掉，当然管理上线标准文件的配置可以单独拉个库管理，避免本地环境配置覆盖线上环境，也可以根据情况尝试使用chromed的一款插件xswitch，直接用浏览器帮你代理了
至此，就可以愉快的玩耍vue了，就和你debug你的java一样...
结论思考
代码大多大同小异，特别是在常用的功能上，只是花的时间多少的问题，搜索是个好帮手，勤学好问，周围的同事也会乐于帮助的；帮公司解决多少问题，就能赢得多少未来；当然不鼓励在后端还未到得心应手的情况下花更多精力做前端的事情
在创业公司，vue,thinkphp,springboot已经接近国内解决方案的标配，也是成本最小的最有效的解决方式，当你多会一门语言你就会有触类旁通的感觉，自信心增强
这篇文章把常见遇到的坑和相关知识系统性梳理了一遍，可以作为创业公司刚开始的模板使用，觉得有用，帮忙点赞，转发，码字不易
关于服务器基础安全的模版可以查看:从微盟删库事件血亏1.5亿，聊几点服务器安全
关于创业公司的技术选型可以查看创业公司技术选型及管理注意事项