Vue-cli初探

之前对vue的使用一直未能做到完全的前后端分离，这样带来的眼前不便是前端开发无法方便的本地调试，长远的影响是建立不起来前端的工程化

题外话，工程化（或者说工业化）的价值体现在工程的协作、积累、沉淀上，所以越大越复杂的项目，工程化的价值越大

这东西无现成之参考，参考后觉得从Vue-cli开始是一个不错的选择

选择了VS CODE作为前端的IDE工具，没什么特别的理由，免费，口碑不错

开始看Vue-cli的官方文档指南 ；创建第一个项目就是文章的前端展示；本文记录前端项目工程化的流程，踩过的坑以及总结

组件库和网络

美观性和可维护性上考量，主要UI组件库element

扩展组件库可考虑vant,尤其是较多有电商平台的业务组件

iviewui也可以考虑

框架

created by vue-cli

网络

基于network library axios

基于统一的network.js 的 network 对象实现了SSO -4003 code码的拦截响应；可传入ssoFunc进行自定义的响应

使用network对象的get/post/postByForm/put/delete/head 方法实现了统一的md5验签，传入 signObject即可启用验签

验签并未使用 axios 的 request Interceptor 机制实现；理由如下：

api 在服务端层面实现的是指定参数的验签机制；所有需要验签的参数打包成一个对象，然后签名后加入sign字段后进行json编码放在data字段里传给服务端；因此js端只对传入的params/data 进行验签处理

这也意味着直接带在url里面的参数不会参与验签

运行逻辑

public/index.html 是页面入口，编译出来的文件会自动注入

main.js是程序入口；引入了App.vue和route

route里面定义了 path 对应的 Component

接下来的就是正常的Vue Component 开发

.vue里面正常引用js和css

Flexible

项目里面采用 1rem等于页面宽度 1/15

瓜子里面采用 1rem等于页面宽度 1/3.75 (为什么要这样设置？)

所以样式借鉴的时候，需要乘以4倍

npm install 以及 ESLINT

npm --registry https://registry.npm.taobao.org install

npm install 会使用环境中的registry，install的时候指定registry可避免覆盖

ESLINT 已有项目的配置

ESLINT 需要忽略的目录配置在 .eslintignore 文件中，src/fe-common 基础代码设置为忽略，基础代码历史原因

多页面

官方文档

设置域名

package.json 中配置scripts中serve设置中增加 --host 选项

更多设置 vue-cli-service serve

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.