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