面試總結

時間 2019-12-13

標籤面試總結欄目快樂工作简体版

原文原文鏈接

vue項目開發流程

建立一個基於 webpack 模板的新項目

vue init webpack my-projecthtml

需求分析

對設計稿進行分析vue

頁面佈局webpack

效果ios

需求web

準備

在 src 文件夾下新建一個 images 文件夾, 把須要用到的圖片素材放到裏面 (名字最好語義化,方便查找) 設計稿標註的尺寸應是實際尺寸的2倍, 因此應在 src/main.js文件中配置vue-router

項目目錄設計

在 src\components 文件夾中建立組件時,最好建立幾個對應模塊的文件夾, 用來存放組件vuex

Zepto

安裝 npm install zepto --save 配置npm

Vue 引入 zeptoaxios

UI組件 - Mint UI

安裝 (2.0版本) npm install mint-ui --save 配置瀏覽器

Vue-router (路由)

安裝 (若是配置腳手架時已經安裝了router, 請跳過此步) npm install vue-router --save

src/router/index.js 配置 vue-router 路由和組件

Vuex

爲何要用Vuex?

咱們知道組件之間是獨立的，組件之間想要實現通訊，我目前知道的就只有props選項，但這也僅限於父組件和子組件之間的通訊。若是兄弟組件之間想要實現通訊呢？嗯..，方法應該有。拋開怎麼實現的問題，試想一下，當作中大型項目時，面對一大堆組件之間的通訊，還有一大堆的邏輯代碼，會不會很抓狂???那爲什麼不把組件之間共享的數據給「拎」出來，在必定的規則下管理這些數據呢？這就是Vuex的基本思想了

安裝 npm install vuex --save 配置 src/store/index.js // 導入變量

import Vue from 'vue'
import Vuex from 'vuex'
複製代碼

// 在模塊化構建系統中，需在開頭調用 Vue.use(Vuex) Vue.use(Vuex);

// 本來直接export外部是沒法識別的，加上default就能夠了.可是一個文件內最多隻能有一個export default // export能夠多個,但在導入時要加{}，export default則不須要 export default new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ } } })

Less

簡介

Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增長了變量、Mixin、函數等特性，使 CSS 更易維護和擴展

安裝 npm install less less-loader --save-dev

配置

less 引用與配置

Axios 數據交互

安裝 npm install axios --save

mock（模擬後臺數據）

src/utils/mock.js

打包

路由懶加載

當打包構建應用時，JavaScript 包會變得很是大，影響頁面加載。若是咱們能把不一樣路由對應的組件分割成不一樣的代碼塊，而後當路由被訪問的時候才加載對應組件，這樣就更加高效了。結合 Vue 的異步組件和 Webpack 的代碼分割功能，輕鬆實現路由組件的懶加載。結合這二者，這就是如何定義一個可以被 Webpack 自動代碼分割的異步組件。 const Foo = () => import('./Foo.vue') 在路由配置中什麼都不須要改變，只須要像往常同樣使用 Foo router.vuejs.org/zh/guide/ad…