從客戶端到前端入門總結
一. 概述
筆者是客戶端研發出身，如果只有一門技術傍身，不足以勝任市場對客戶端研發的要求，于是想學習大前端技術棧。但苦于日常工作繁瑣，一直沒有機會學習（其實就是自身懶惰）。直到工作需要，需要寫一個微信小程序，這才下決心學習前端技術。其實如果想入門前端，從微信小程序入手不失為一個好的方法。初次接觸微信小程序，它的數據雙向綁定機制，讓寫習慣了客戶端的我嘆為觀止。目前我入門前端的技術路徑是：客戶端---微信小程序---混合App---H5。一些我自己的經驗總結出來，希望對你有所幫助。當然閱讀這篇文章的前提是，你已經了解了基本的Html、CSS、JS語法。
二. 環境與工具
1. 前端環境搭建
筆者使用的Mac電腦，所有的環境搭建工作都是基于Mac電腦來操作的。首先安裝node.js與npm:
node.js
node 是一個基于 V8 引擎的 Javascript 運行環境，它使得 Javascript 可以運行在服務端，直接與操作系統進行交互，與文件控制、網絡交互、進程控制等。簡單的說node.js就是運行在服務端的 JavaScript。你可能會有疑問，我寫前端頁面為甚么需要一個運行在服務端的的JS環境。其實我們這里使用node最關鍵是需要安裝npm.
npm
npm是node.js的包管理工具（package manager），為啥我們需要一個包管理工具呢？因為我們在Web開發時，會用到很多別人寫的JavaScript代碼。如果我們要使用別人寫的某個包，每次都根據名稱搜索一下官方網站，下載代碼、解壓、再使用，非常繁瑣。于是一個集中管理的工具應運而生：大家都把自己開發的模塊打包后放到npm官網上，如果要使用，直接通過npm安裝就可以直接用。他類似于iOS開發中的cocoapods,Android開發中的Maven,這樣就好理解了。
node下載地址點擊這里,按照步驟安裝完成后，終端輸入
node -v
npm -v
查看安裝版本，出現下面的版本號說明安裝成功。
注意如果提示
-bash: node: command not found,說明還需要配置一下環境變量。配置方式也很簡單，在Finder中查找文件夾，輸入路徑/private/etc,找到profile文件，加上一下語句
export NODE_HOME="node安裝路徑(bin路徑的父級路徑)"
export PATH=$PATH:$NODE_HOME/bin
node安裝路徑(bin路徑的父級路徑):你可以通過命令which node 命令來查看。例如我的本地路徑是/usr/local/bin/node，那么可以這樣設置
export NODE_HOME="/usr/local"
export PATH=$PATH:$NODE_HOME/bin
重新保存文件后，再次輸入node -v 驗證一下。下面是一些npm常用命令：
// 本地安裝模塊
npm install <Module Name>
// 全局安裝模塊
npm install <Module Name> -g
// 搜索模塊
npm search <Module Name>
// 更新模塊
npm update <Module Name>
//卸載模塊
npm uninstall <Module Name>
// 安裝項目的全部依賴
npm install
yarn:
yarn是一個由 Facebook 貢獻的 Javascript 包管理器。yarn是為了彌補npm的一些缺陷而出現的。在日常開發中你可以使用npm也可以使用yarn進行包的管理，只不過相比npm而言，它的速度更快，并提供了離線模式。關于它我們不會過多的介紹，你可以去它的中文網站查看.它的安裝方式也很簡單，直接通過Homebrew進行安裝，命令 brew install yarn. 它的一些常用指令：
// 初始化一個新項目
yarn init
// 添加依賴包
yarn add [package]
// 添加依賴包的某個版本
yarn add [package]@[version]
// 升級依賴包
yarn upgrade [package]
// 移除依賴包
yarn remove [package]
// 安裝項目的全部依賴
yarn install 或者 yarn
可以在項目中混用
yarn與npm,但是最好不要這樣。
2. 開發工具選擇
前端的開發工具基本就兩個選擇
Visual Studio Code 或者 WebStorm,兩者選擇哪一個都可以，我個人更喜歡Visual Studio Code,其實選擇它最主要原因是免費且開源，而且有強大的插件庫。
VSCode安裝插件：
選擇[擴展]-[搜索插件]-安裝即可
下面是我使用的一些常用的VSCode插件：
(1) vue vscode snippets
它是Vue項目代碼的骨架插件，例如輸入vbase,會直接生成以下代碼
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>
相似的還有vdata、vmethod、vfor等操作
(2) Auto Close Tag 自動閉合HTML標簽
(3) Auto Rename Tag 修改HTML標簽時，自動修改匹配的標簽
(4) Color Highlight 顏色值在代碼中高亮顯示
(5) HTML CSS Class Completion CSS class提示插件
(6) Vetur Vue多功能集成插件，包括：語法高亮，智能提示，emmet，錯誤提示，格式化，自動補全，debugger。vscode官方欽定Vue插件，Vue開發者必備
(7) VSCode-icons 文件圖標，方便定位文件
(8) Color Highlight 顏色值在代碼中高亮顯示
(9) HTML CSS Support 智能提示CSS類名以及id
(10) Beautify 格式化代碼工具,美化javascript，JSON，CSS，Sass，和HTML
(11) Open in Browser 直接在瀏覽器中打開你當前的文件
三.Vue項目搭建與開發事項
目前前端幾大主流框架React、Vue、Angular，三個框架各有優劣，個人感覺Vue的入門難度最小，而且有良好的中文教程和廣泛的第三方支持，如果要入門前端技術，從Vue入手是比較明智的。
1.Vue項目搭建
使用Vue CLI腳手架構建Vue項目
(1). 使用 npm 或 yarn 全局安裝 Vue CLI
npm install -g @vue/cli
# OR
yarn global add @vue/cli
如果頁面報錯如下
說明執行權限不夠，可以在在前面加
sudo
sudo npm install -g @vue/cli
執行完成后輸入命令vue -V查看Vue/Cli 版本，出現如下提示說明安裝成功。
(2). 在工程所在目錄創建項目
執行以下命令
vue create my-project
# OR
vue ui
vue create是使用命令行創建項目，vue ui是以圖形化界面創建和管理項目。
(3). 配置工程
輸入創建命令后提示：
此時會判斷你的npm/yarn源的連接速度，詢問你是否切換至淘寶鏡像，我們輸入n,繼續
提示：項目是使用默認配置（Vue2還是Vue3 都包含babel, eslint)還是手動選擇，我們選擇手動配置，繼續
- Choose Vue version: 選擇Vue的版本 選擇
- Babel :將腳手架中瀏覽器不認識的一切東西翻譯為瀏覽器認識的 選擇
- TypeScript : 強類型的 JaveScript
- Progressive Web App (PWA) Support : 漸進式App，主要用于兼容移動端
- Router : Vue 路由管理 選擇
- Vuex: Vue的狀態管理器 選擇
- CSS Pre-processors : CSS 預處理器，可選擇使用 less、sass、stylus等預處理器 選擇
- Linter / Formatter :代碼檢測和格式化
- Unit Testing: 單元測試
- E2E Testing: 端到端測試
選中好后繼續
按方向鍵是進行上下移動，空格是選中/取消，回車是確定當前所選內容，繼續下一步操作
提示：選擇Vue版本，我們選擇Vue3版本，繼續
提示：路由方式是否使用history模式。一般都是單頁面開發不選擇history，輸入n繼續
提示：選擇CSS預處理器
- node-sass 是自動編譯，實時的
- dart-sass 需要保存后才會生效
- Less 最終會通過編譯處理輸出css到瀏覽器，Less 既可以在客戶端上運行，也可在服務端運行 (借助 node.js)
- Stylus 主要用來給
node項目進行CSS預處理支持，Stylus功能上更為強壯，和Js聯系更加緊密，可創建健壯的、動態的的CSS
我們選擇 Sass/SCSS (with node-sass)，繼續
提示：Babel, ESLint是使用獨立文件，還是在package.json一個文件中保存所有配置信息。選擇第一個，繼續
提示：是否為以后創建的項目保存我們當前所選的這些配置，我們選擇否,開始自動創建項目
項目創建完成后，cd到當前工程目錄下，執行yarn serve,就可以運行當前項目了。
在瀏覽器中輸入上面的地址就可看到我們當前創建的Vue工程了
至此，我們整個工程創建完成。接下來總結一下在移動Web開發中常用的三方庫。
2.第三方庫使用總結
(1).移動Web布局庫
我們在進行移動Web頁面開發時，需要對頁面進行布局，常用的布局方式有用rem來作單位，配合h5新的meta屬性來適配屏幕做開發的，也有直接使用三方庫postcss-px-to-viewport來進行頁面布局的。我們直接使用第二種方式：
使用yarn進行安裝,cd 到工程目錄后執行
$ yarn add -D postcss-px-to-viewport
執行完成后，在postcss.config.js中進行參數配置
module.exports = {
plugins: {'postcss-px-to-viewport': {
unitToConvert: 'px',// 要轉化的單位
viewportWidth: 375,// UI設計稿的寬度
unitPrecision: 5,// 轉換后的精度，即小數點位數
propList: ['!*'],// 指定轉換的css屬性的單位，*代表全部css屬性的單位都進行轉換
viewportUnit: 'vw',// 指定需要轉換成的視窗單位，默認vw
fontViewportUnit: 'vw',// 指定字體需要轉換成的視窗單位，默認vw
selectorBlackList: [],// 指定不轉換為視窗單位的類名，
minPixelValue: 1,// 默認值1，小于或等于1px則不進行轉換
mediaQuery: false,// 是否在媒體查詢的css代碼中也進行轉換，默認false
replace: true,// 是否轉換后直接更換屬性值
exclude: [],// 設置忽略文件，用正則做目錄名匹配
landscape: false,// 是否處理橫屏情況
landscapeUnit: 'vw',//橫屏單位
landscapeWidth: 568//橫屏寬度
}}
}
(2). UI庫
在進行移動Web開發中，第三方UI庫的使用是少不了的，我們最常用的有vant、Element UI等，我們以vant來說明,進行工程目錄執行
# Vue 2 項目，安裝 Vant 2：
npm i vant -S
# Vue 3 項目，安裝 Vant 3：
npm i vant@next -S
# 通過 yarn 安裝vant3
yarn add vant@next
注意對于Vue2和Vue3項目引入方式是不一樣的，我們是Vue3項目，因此執行
npm i vant@next -S或者yarn add vant@next
安裝完成后就可以引入組件了，也需要注意，Vue2與Vue3的配置方式也是不同的，具體可以去查看Vant官網查看，這里不在贅述。
(3). 網絡請求庫
在項目中進行網絡請求時，最常用的第三方庫是axios,他的引入方式也很簡單：
$ npm install axios
OR
$ yarn add axios
對于Vue2項目而言安裝完成后在mian.js中引用axios，并綁到原型鏈上。使用插件的時候，一般要在入口文件main.js中引入，因為mian.js是項目首先運行的文件：
import Vue from 'vue'
import axios from ‘axios’
Vue.prototype.$http = axios
它的用法很簡單：
// get請求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// post 請求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 執行多個并發請求
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 兩個請求現在都執行完成
}));
但是對于Vue3項目而言，除了引入axios外，還需要引入vue-axios,引入方式：
$ npm install --save axios vue-axios
vue-axios是將axios集成到Vue.js的小包裝器，可以像插件一樣進行安裝。在mian.js中引用axios，vue-axios，通過全局方法Vue.use()使用插件：
import { createApp } from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'// Vue3 使用 axios 需要配合 vue-axios 一起使用
// 全局引入組件
createApp(App).use(VueAxios, axios).mount('#app');
使用方法：
export default {
name: 'App',
methods: {
getList() {
this.axios.get(api).then((response) => {
console.log(response.data)
})
// or
this.$http.get(api).then((response) => {
console.log(response.data)
})
}
}
}
(4).項目中的圖片使用
在開發項目時，免不了要使用到圖片，目前項目常用的矢量圖片庫非阿里的iconfont莫屬了，它最大的好處是你可以像調整文字一樣，設置圖片的顏色和大小，而不用擔心圖片失真問題。它的使用方式也很簡單：
把我們要使用的圖片添加到項目中，然后點擊下載到本地
它有三種引入方式分別是：
unicode 引用、font-class 引用、symbol 引用,我們只介紹symbol 引用,這也是官方最推薦的引用方式，相比前兩種有如下特點：
- 支持多色圖標了，不再受單色限制。
- 通過一些技巧，支持像字體那樣，通過font-size,color來調整樣式。
- 兼容性較差，支持 ie9+,及現代瀏覽器。
- 瀏覽器渲染svg的性能一般，還不如png。
使用步驟如下：
第一步：拷貝下載文件iconfont.js到項目目錄
在需要用到iconfont 的地方引入這個js文件目錄
import '../utils/iconfont';
第二步：加入通用css代碼（引入一次就行）
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
第三步：挑選相應圖標并獲取類名，應用于頁面：
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
#icon-xxx就是你選的圖片類名
如果要調整大小、顏色、位置等
.icon {
font-size: 30px;
color: orange;
position:relative;
display:inline-block;
top: calc(12px + 0.15rem);
right: 6px;
}
注意：加入的圖片最好是去掉填充色的,然后你才能修改顏色,否則設置顏色不生效。
四.總結
轉眼做前端已經小半年了，越學習越感覺前端內容的復雜，越感覺自己所學知識的淺薄，寫這篇文章也算是對這段時間的總結。關于ESlint的使用可以參考這個文章：
參考：
postcss-px-to-viewport
element UI
axios
iocnfont
https://v3.cn.vuejs.org/
https://cli.vuejs.org/zh/guide/
