Vue項目總結

Vue 項目搭建

---

初始化 Vue 項目

1. 安裝全局包 cnpm i vue-cli -g cnpm i cross-env -g :設置項目的環境

2. 在桌面生成項目 在桌面打開命令:

vue init webpack-simple vue_project(簡單版本)

vue init webpack vue_project (完整版)

3. 切換到項目根目錄下安裝依賴包 cd vue_project cnpm install

4. 切換到項目根目錄下運行 npm run dev

---

常見問題 :

項目打包後用服務器打開一片空白 vue / 打包取消生成 map 文件

修改默認的打包路徑文件 config\index.js

//46行
build:{
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),
  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './',//46行修改這個 '/' => './'
  ...
 productionSourceMap: false,//49行改爲false
}

---

項目打包後 css 裏的背景圖片顯示不了

?> 修改 css 打包路徑文件 build/utils.js

if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
    publicPath: '../../' //50行添加這句話
  });
} else {
  return ['vue-style-loader'].concat(loaders);
}

---

vue 打 Hbuilder 打包 app，設置沉浸式狀態欄

?> 在mainfest.json的plus中以下位置添加statusbar內容

"plus": {
  "statusbar":{
    "immersed": true/*添加沉浸式狀態欄*/
  },
  "splashscreen": {
    "autoclose": true,/*是否自動關閉程序啓動界面，true表示應用加載應用入口頁面後自動關閉；false則需調plus.navigator.closeSplashscreen()關閉*/
  "waiting": true/*是否在程序啓動界面顯示等待雪花，true表示顯示，false表示不顯示。*/
},

---

vue 過濾器

?> 時間戳 1534475169000 => 2018-08-17 11:06:09

Vue.filter('formatTime', function(value) {
  if (!value || value == '') {
    return value;
  } else {
    let date = new Date(value); //如果date爲13位不需要乘1000
    let Y = date.getFullYear() + '-';
    let M =
      (date.getMonth() + 1 < 10
        ? '0' + (date.getMonth() + 1)
        : date.getMonth() + 1) + '-';
    let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
    let h =
      (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
    let m =
      (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) +
      ':';
    let s =
      date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
    return Y + M + D + h + m + s;
  }
});

---

vue 路由懶加載

?> 時間戳 1534475169000 => 2018-08-17 11:06:09

import Vue from 'vue'; //vue
import VueRouter from 'vue-router'; //路由
import { isLogin } from '@/api/index.js';
import { Notification } from 'element-ui';
Vue.use(VueRouter); //掛載路由

// 定義路由規則
const routes = [
  {
    path: '/',
    component: resolve => require(['@/views/index.vue'], resolve),
    name: '首頁',
    children: [
      {
        path: '/login',
        component: resolve => require(['@/views/login.vue'], resolve),
        meta: {
          title: '登錄',
          breadcrumb: ['登錄']
        }
      }
    ]
  }
];

// 創建新路由對象
const router = new VueRouter({
  routes
});
// 路由校驗
router.beforeEach((to, from, next) => {
  // 設置標題
  if (to.meta.title) {
    document.title = to.meta.title;
  }
  next();
});
//導出路由
export default router;

---

異步輸出

function sleep(time) {
  return new Promise(resolve => setTimeout(resolve, time));
}
sleep(3000).then(() => {
  console.log('3秒後輸出我');
});

---

Vue ie 兼容

?> 解決方式：安裝 “babel-polyfill” 即可。

//1. 安裝 "babel-polyfill"
cnpm install --save-dev babel-polyfill

//2. 在入口main.js文件引入：
import 'babel-polyfill';

//3. 在build文件夾下找到webpack.base.conf.js.    替換第15行內容

entry: {
  app: ["babel-polyfill", "./src/main.js"]
},

---

vue 路由傳參

?> 方案一 需要在 path 中添加/:id 來對應 $router.push 中 path 攜帶的參數。在子組件中可以使用來獲取傳遞的參數值

this.$router.push({
  path: `/goods/${id}`
});
// router.js
{
  path: '/goods/:id',
  name: 'goods',
  component: goods
}
// 獲取
$route.params.id

?> 方案二 父組件中：通過路由屬性中的 name 來確定匹配的路由，通過 params 來傳遞參數。

this.$router.push({
  name: 'Describe',
  params: {
    id: id
  }
})
// router.js
{
  path: '/goods',
  name: 'goods',
  component: goods
}
// 獲取
$route.params.id

?> 方案三 父組件：使用 path 來匹配路由，然後通過 query 來傳遞參數 query 傳遞的參數會顯示在 url 後面?id=？

this.$router.push({
  path: '/describe',
  query: {
    id: id
  }
})
// router.js
{
  path: '/goods',
  name: 'goods',
  component: goods
}
// 獲取
$route.query.id

手機輸入框獲取焦點是軟鍵盤遮擋輸入框

window.addEventListener('resize', function() {
  if (
    document.activeElement.tagName == 'INPUT' ||
    document.activeElement.tagName == 'TEXTAREA'
  ) {
    window.setTimeout(function() {
      document.activeElement.scrollIntoViewIfNeeded();
    }, 0);
  }
});

vuex 狀態持久化

vuex-persistedstate

// node
cnpm install vuex-persistedstate --save

// store.js
import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
// ...
  plugins: [createPersistedState()]  //會自動保存創建的狀態。刷新還在
})

項目打包 Nginx服務器導致CSS無法解析不起效果

?> 配置Nginx的時候將/etc/nginx/nginx.conf的一行include /etc/nginx/mime.types;誤刪 導致了Nginx無法正確識別CSS文件，因此向瀏覽器發送了錯誤的MIME類型

移動端兼容

頁面上下滾動時卡頓

#app{
  -webkit-overflow-scrolling: touch;
}
body{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

移除移動端頁面點擊延遲

在main.js裏引用fastclick

//node
cnpm install fastclick --save
//main.js
const FastClick = require('fastclick')
FastClick.attach(document.body)

移動端下拉 瀏覽器報錯

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See

body{touch-action: none;}

vue-countupjs 數字跳動插件使用方法

npm : https://www.npmjs.com/package/vue-countupjs

api	註釋	默認
tag	外層標籤	span
startValue	起始值	0
endValue	結束值	0
duration	動畫持續時間	2
delay	延時更新時間	0
immediate	是否立即執行動畫	true
animateClass	執行期間動畫, 執行後刪除，優先級低於animatedClass項
animatedClass	執行前插入, 執行後刪除

還有一個 countup配置項

 options:{
  useEasing: true, // 緩動動畫 easing
  useGrouping: true, // 1,000,000 vs 1000000
  separator: ',', // 數字分隔符
  decimal: '.', // 小數分隔符
  prefix: '', // 前綴
  suffix: '' // 後綴
}

//node 
cnpm install vue-countupjs --save
//home.vue
<template>
  <div class="home">
      <v-countup :start-value="0" :end-value="100.12345678" :decimals="8" tag="span"></v-countup>
  </div>
</template>
<script>
  import VueCountUp from 'vue-countupjs'
  export default {
    name: 'home',
    components: {
      "v-countup": VueCountUp
    }
  }
</script>