vue cli3

时间 2019-11-10

标签 vue cli3 cli 繁體版

原文原文链接

新建项目

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

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

# 建立完成后，能够经过命令打开图形化界面，以下图所示
vue ui

vuex-router-sync

多环境开发

rem适配方案

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

选用rem的缘由是由于vant直接推荐了这个适配方案，直接上手:前端

Vant 中的样式默认使用px做为单位，若是须要使用rem单位，推荐使用如下两个工具vue

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

也可用：postcss-px2rem-exclude webpack

lib-flexible 用于设置 rem 基准值

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

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()钩子函数里面添加如下方法:git

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里面.github