一、Vue的前世
Vue 框架誕生於2014年，他的作者爲中國人–尤雨溪(江蘇無錫人)。Vue用於構建交互式的Web界面的庫，是一個構建數據驅動的Web界面漸進式框架，該框架遵循CMD規範，並且提供的設計模式爲MVVM模式。發展至今已經有諸多版本,目前推薦使用比較穩定的2.0版本
二、Vue的今生
什麼是Vue?Vue是一套用於構建用戶界面的漸進式框架.提到Vue就不得不提前端框架的三駕馬車:angular 谷歌公司,react Facebook,Vue 尤雨溪.這三種框架都有不同的特性,如要一教高下的話也只能說是伯仲之間,各有千秋.以我目前的能力我還不能將三種框架的特性聊的十分透徹,在這裏只能淺談一下之所以選擇Vue的原因:
首先作爲一名中國人,選擇Vue存在一些主觀因素,我覺得這無可厚非.然後我們來談談Vue的諸多有點:1.不存在依賴關係 2.輕便(25 + gzip 72k min) 3.適用範圍廣 4.學習成本低,語法升級平滑 5.雙向數據綁定(所見即所得) 6.語法非常簡潔.我強烈建議所有的前端開發者和全棧開發人員進行學習和掌握。
三、PC 端項目的使用
1.# 進入項目目錄
cd 你的創建好的VUE 項目
# 安裝依賴
npm install
# 強烈建議不要用直接使用 cnpm 安裝，會有各種詭異的 bug，可以通過重新指定 registry 來解決 npm 安裝速度慢的問題。
npm install --registry=https://registry.npm.taobao.org
# 本地開發 啓動項目
npm run dev
Vant 創建項目1、在新項目中使用 Vant 時，推薦使用 Vue 官方提供的腳手架 Vue Cli 創建項目
# 安裝 Vue Cli
npm install -g @vue/cli
# 創建一個項目
vue create hello-world
# 創建完成後，可以通過命令打開圖形化界面，如下圖所示
vue ui
2、在圖形化界面中，點擊依賴 -> 安裝依賴，然後將 vant 添加到依賴中，同時添加其它需要的依賴，如路由，axios等
3、安裝相關的插件
4、引用babel 插件
babel-plugin-import 是一款 babel 插件，它會在編譯過程中將 import 的寫法自動轉換爲按需引入的方式
（1）# 安裝插件 npm i babel-plugin-import -D
（2）在 babel.config.js 中配置
module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ] };
（3） 接着你可以在代碼中直接引入 Vant 組件，插件會自動將代碼轉化爲按需引入形式
import { Button } from 'vant';
5、安裝好的項目截圖如下：
6、如圖
在VScode中，通過 Ctrl + ~ 組合鍵打開 終端
輸入
npm i vant -S
安裝vant
- 配置
babel.config.js文件，完成按需引入組件功能
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}
- 引入
vant組件測試
首先安裝模塊插件：
npm i babel-plugin-import -D
ps：babel-plugin-import 是一款 babel 插件，它會在編譯過程中將 import 的寫法自動轉換爲按需引入的方式
引入組件方式有兩種（推薦使用局部引入）：
方式一： 在main.js文件中引入，全局使用
import { Toast,Button } from 'vant'
Vue.use(Toast).use(Button)
<van-button type="default">默認按鈕</van-button>
此方法引入的Toast組件，使用方式：
this.$toast({
message: 'test info',
duration: 1000,
forbidClick: true
});
方式二： 在頁面單獨引用，僅作用於此頁面
<template>
<div>
<van-button type="default">默認按鈕</van-button>
</div>
</template>
<script>
import { Button } from 'vant';
import { Popup } from 'vant';
export default {
components:{
Button,
Popup
}
}
</script>
- 運行項目
npm run serve
成功啓動後如下圖：
- 解決移動端適配問題
安裝對應插件
npm i postcss-pxtorem -S
npm i amfe-flexible -S
- 新建
vue.config.js，引入插件，進行相關配置
const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
autoprefixer({
overrideBrowserslist: [
"Android 4.0",
"iOS 7",
"Chrome > 31",
"ff > 31",
"ie >= 8"
]
}),
pxtorem({
rootValue: 37.5, /*37.5對應的是375尺寸的圖，如果是750尺寸的圖則替換成75，以此類推*/
propList: ['*'],
})
]
}
}
},
};
main.js文件中導入amfe-flexible
import 'amfe-flexible'
index.html配置移動端meta信息
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no
到此一個pc 版本的項目就改爲移動端了如果你想在裏面添加任何想創造的組件或者插件自己調整修改就可以了。非常的簡單。值得大學學習和掌握。