新建项目

https://github.com/2384830985...


# 安装 Vue Cli
npm install -g @vue/cli

# 创建一个项目
vue create hello-world

# 创建完成后，可以通过命令打开图形化界面，如下图所示
vue ui

vuex-router-sync

多环境开发

rem适配方案

还是那句话，用vw还是用rem，这是个问题？

选用rem的原因是因为vant直接推荐了这个适配方案，直接上手:

Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具

postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

也可用：postcss-px2rem-exclude

lib-flexible 用于设置 rem 基准值

下面提供了一份基本的 postcss 配置，可以在此配置的基础上根据项目需求进行修改

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

移动端console.log

vconsole(在移动端查看调试器)

常见运行依赖

qs
lodash
moment
vue-router(路由跳转)
axios(数据请求)
vuex(状态管理)
vue-awesome-picker
vue-awesome-swiper
vue-lazyload(图片懒加载)
fastclick(解决移动端浏览器 300 毫秒点击延迟问题)
vue-touch(手势判断)

常见开发依赖

@vue/cli-plugin-eslint
@vue/cli-plugin-babel
@vue/cli-plugin-pwa
@vue/cli-service
@vue/eslint-config-standard
http-push-webpack-plugin
compression-webpack-plugin
html-webpack-inline-source-plugin
px2rem-loader
cross-env
mock.js(模拟后台数据)

生产环境使用CDN

优化方案

腾讯智图(压缩图片，减少图片的体积)
vue-lazyload(图片懒加载，缓解加载数据,提高网页性能)
fastclick(解决移动端300ms延迟，提高页面交互流畅度)
vue-rouer(路由懒加载,分离app的js为多个js文件，到对应的页面再执行对应的js)
webpack(config/index.js文件内的productionSourceMap改为false,这样打包出来的文件可以没有.map结尾的js文件，且文件体积减少至少一半)
Vuex刷新保存状态

使用Vuex做状态管理的时候，当用户刷新页面，Vuex里面的状态会全部丢失，从而引起程序的一场。解决思路是在creared()钩子函数里面添加以下方法:

created(){
   console.log('页面执行刷新时，保存Vuex的状态到LocalStorage')
    //在页面加载时读取localStorage里的状态信息
    localStorage.getItem("userMsg") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("userMsg"))));
    
    //在页面刷新时将vuex里的信息保存到localStorage里
    window.addEventListener("beforeunload",()=>{
        localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
    })
  }

上面代码的原理是，当页面刷新时，会将当前Vuex的状态存储到LocalStorage里面，刷新成功，再从LocalStorage赋值到Vuex里面.

pwa

https://github.com/JXtreehous...
https://zhuanlan.zhihu.com/p/...

错误监控

持续集成服务 Travis CI/ gitlab-ci

项目升级vue cli3

「Vue实践」项目升级vue-cli3的正确姿势

vue-cli3 项目从搭建优化到docker部署

通过vue-cli3构建一个SSR应用程序

常见问题

关于tunneling socket could not be established , cause=getaddrinfo ENOTFOUND 错误的解决方法

初始化一个vue项目的时候，出现了一些问题

因为我的代理设置的是这个：

团队建设

生鲜 B2B 技术平台的前端团队该如何搭建
技术栈：小菜前端的技术栈是如何规划和演进的
技术栈：为什么 Node 是小菜前端团队的核心技术栈

架构

大型项目前端架构浅谈
Vue 项目架构设计与工程化实践
前端工程师必备：前端的模块化
用 Feature First 的方式管理前端项目复杂度

参考

封装Vue组件的一些技巧
基于vue-cli3.0构建功能完善的移动端架子
「Vue实践」武装你的前端项目
Vue CLI 3结合Lerna进行UI框架设计
技术地图 - vue-cli
一张图教你快速玩转vue-cli3
Vue全家桶商城全站升级之引入HTTPS,PWA,错误监控,持续构建。

vue cli3