從客戶端到前端入門總結(jié)

一. 概述

筆者是客戶端研發(fā)出身，如果只有一門技術(shù)傍身颜阐，不足以勝任市場(chǎng)對(duì)客戶端研發(fā)的要求跪解，于是想學(xué)習(xí)大前端技術(shù)棧。但苦于日常工作繁瑣楷兽，一直沒有機(jī)會(huì)學(xué)習(xí)（其實(shí)就是自身懶惰）地熄。直到工作需要，需要寫一個(gè)微信小程序芯杀，這才下決心學(xué)習(xí)前端技術(shù)端考。其實(shí)如果想入門前端，從微信小程序入手不失為一個(gè)好的方法揭厚。初次接觸微信小程序却特，它的數(shù)據(jù)雙向綁定機(jī)制，讓寫習(xí)慣了客戶端的我嘆為觀止筛圆。目前我入門前端的技術(shù)路徑是：客戶端---微信小程序---混合App---H5裂明。一些我自己的經(jīng)驗(yàn)總結(jié)出來，希望對(duì)你有所幫助太援。當(dāng)然閱讀這篇文章的前提是闽晦，你已經(jīng)了解了基本的Html、CSS提岔、JS語法仙蛉。

二. 環(huán)境與工具

1. 前端環(huán)境搭建

筆者使用的Mac電腦，所有的環(huán)境搭建工作都是基于Mac電腦來操作的碱蒙。首先安裝node.js與npm:

node.js

node 是一個(gè)基于 V8 引擎的 Javascript 運(yùn)行環(huán)境荠瘪，它使得 Javascript 可以運(yùn)行在服務(wù)端，直接與操作系統(tǒng)進(jìn)行交互振亮，與文件控制巧还、網(wǎng)絡(luò)交互、進(jìn)程控制等坊秸。簡(jiǎn)單的說node.js就是運(yùn)行在服務(wù)端的 JavaScript麸祷。你可能會(huì)有疑問，我寫前端頁(yè)面為甚么需要一個(gè)運(yùn)行在服務(wù)端的的JS環(huán)境褒搔。其實(shí)我們這里使用node最關(guān)鍵是需要安裝npm.

npm

npm是node.js的包管理工具（package manager）阶牍，為啥我們需要一個(gè)包管理工具呢？因?yàn)槲覀冊(cè)赪eb開發(fā)時(shí)星瘾，會(huì)用到很多別人寫的JavaScript代碼走孽。如果我們要使用別人寫的某個(gè)包，每次都根據(jù)名稱搜索一下官方網(wǎng)站琳状，下載代碼磕瓷、解壓、再使用，非常繁瑣困食。于是一個(gè)集中管理的工具應(yīng)運(yùn)而生：大家都把自己開發(fā)的模塊打包后放到npm官網(wǎng)上边翁，如果要使用，直接通過npm安裝就可以直接用硕盹。他類似于iOS開發(fā)中的cocoapods,Android開發(fā)中的Maven,這樣就好理解了符匾。
node下載地址點(diǎn)擊這里,按照步驟安裝完成后，終端輸入

node -v
npm -v

查看安裝版本瘩例，出現(xiàn)下面的版本號(hào)說明安裝成功啊胶。

node

注意如果提示-bash: node: command not found,說明還需要配置一下環(huán)境變量。配置方式也很簡(jiǎn)單垛贤，在Finder中查找文件夾焰坪，輸入路徑/private/etc,找到profile文件，加上一下語句

pic

export NODE_HOME="node安裝路徑(bin路徑的父級(jí)路徑)" 
export PATH=$PATH:$NODE_HOME/bin

node安裝路徑(bin路徑的父級(jí)路徑):你可以通過命令which node 命令來查看南吮。例如我的本地路徑是/usr/local/bin/node琳彩，那么可以這樣設(shè)置

export NODE_HOME="/usr/local"
export PATH=$PATH:$NODE_HOME/bin

重新保存文件后，再次輸入node -v 驗(yàn)證一下部凑。下面是一些npm常用命令：

// 本地安裝模塊
npm install <Module Name>
// 全局安裝模塊
npm install <Module Name> -g
// 搜索模塊
npm search  <Module Name>
// 更新模塊
npm update <Module Name>
//卸載模塊
npm uninstall <Module Name>
// 安裝項(xiàng)目的全部依賴
npm install

yarn:

yarn是一個(gè)由 Facebook 貢獻(xiàn)的 Javascript 包管理器露乏。yarn是為了彌補(bǔ)npm的一些缺陷而出現(xiàn)的。在日常開發(fā)中你可以使用npm也可以使用yarn進(jìn)行包的管理涂邀，只不過相比npm而言瘟仿，它的速度更快，并提供了離線模式比勉。關(guān)于它我們不會(huì)過多的介紹劳较，你可以去它的中文網(wǎng)站查看.它的安裝方式也很簡(jiǎn)單，直接通過Homebrew進(jìn)行安裝浩聋，命令 brew install yarn. 它的一些常用指令：

// 初始化一個(gè)新項(xiàng)目
yarn init
// 添加依賴包
yarn add [package]
// 添加依賴包的某個(gè)版本
yarn add [package]@[version]
// 升級(jí)依賴包
yarn upgrade [package]
// 移除依賴包
yarn remove [package]
// 安裝項(xiàng)目的全部依賴
yarn install 或者 yarn

可以在項(xiàng)目中混用yarn與npm,但是最好不要這樣观蜗。

2. 開發(fā)工具選擇

pic1

VSCode安裝插件：

chanjian

選擇[擴(kuò)展]-[搜索插件]-安裝即可
下面是我使用的一些常用的VSCode插件：

(1) vue vscode snippets
它是Vue項(xiàng)目代碼的骨架插件，例如輸入vbase,會(huì)直接生成以下代碼

<template>
    <div>

    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>

</style>

相似的還有vdata坊夫、vmethod砖第、vfor等操作
(2) Auto Close Tag 自動(dòng)閉合HTML標(biāo)簽
(3) Auto Rename Tag 修改HTML標(biāo)簽時(shí)，自動(dòng)修改匹配的標(biāo)簽
(4) Color Highlight 顏色值在代碼中高亮顯示
(5) HTML CSS Class Completion CSS class提示插件
(6) Vetur Vue多功能集成插件环凿，包括：語法高亮梧兼，智能提示，emmet智听，錯(cuò)誤提示羽杰，格式化渡紫，自動(dòng)補(bǔ)全，debugger考赛。vscode官方欽定Vue插件腻惠，Vue開發(fā)者必備
(7) VSCode-icons 文件圖標(biāo)，方便定位文件
(8) Color Highlight 顏色值在代碼中高亮顯示
(9) HTML CSS Support 智能提示CSS類名以及id
(10) Beautify 格式化代碼工具,美化javascript欲虚，JSON，CSS悔雹，Sass复哆，和HTML
(11) Open in Browser 直接在瀏覽器中打開你當(dāng)前的文件

三.Vue項(xiàng)目搭建與開發(fā)事項(xiàng)

目前前端幾大主流框架React、Vue腌零、Angular梯找，三個(gè)框架各有優(yōu)劣，個(gè)人感覺Vue的入門難度最小益涧，而且有良好的中文教程和廣泛的第三方支持锈锤，如果要入門前端技術(shù)，從Vue入手是比較明智的闲询。

1.Vue項(xiàng)目搭建

使用Vue CLI腳手架構(gòu)建Vue項(xiàng)目

(1). 使用 npm 或 yarn 全局安裝 Vue CLI

npm install -g @vue/cli
# OR
yarn global add @vue/cli

如果頁(yè)面報(bào)錯(cuò)如下

error

sudo npm install -g @vue/cli

執(zhí)行完成后輸入命令vue -V查看Vue/Cli 版本，出現(xiàn)如下提示說明安裝成功扭弧。

pic

(2). 在工程所在目錄創(chuàng)建項(xiàng)目

執(zhí)行以下命令

vue create my-project
# OR
vue ui

vue create 是使用命令行創(chuàng)建項(xiàng)目阎姥，vue ui是以圖形化界面創(chuàng)建和管理項(xiàng)目。

(3). 配置工程

輸入創(chuàng)建命令后提示：

pic

此時(shí)會(huì)判斷你的npm/yarn源的連接速度鸽捻，詢問你是否切換至淘寶鏡像呼巴，我們輸入n,繼續(xù)

pic

提示：項(xiàng)目是使用默認(rèn)配置（Vue2還是Vue3 都包含babel, eslint)還是手動(dòng)選擇，我們選擇手動(dòng)配置御蒲，繼續(xù)

pic

• Choose Vue version: 選擇Vue的版本 選擇
• Babel :將腳手架中瀏覽器不認(rèn)識(shí)的一切東西翻譯為瀏覽器認(rèn)識(shí)的 選擇
• TypeScript : 強(qiáng)類型的 JaveScript
• Progressive Web App (PWA) Support : 漸進(jìn)式App衣赶，主要用于兼容移動(dòng)端
• Router : Vue 路由管理 選擇
• Vuex: Vue的狀態(tài)管理器 選擇
• CSS Pre-processors : CSS 預(yù)處理器，可選擇使用 less厚满、sass府瞄、stylus等預(yù)處理器 選擇
• Linter / Formatter :代碼檢測(cè)和格式化
• Unit Testing: 單元測(cè)試
• E2E Testing: 端到端測(cè)試
  選中好后繼續(xù)

按方向鍵是進(jìn)行上下移動(dòng)，空格是選中/取消，回車是確定當(dāng)前所選內(nèi)容油宜，繼續(xù)下一步操作

pic

提示：選擇Vue版本脂凶，我們選擇Vue3版本，繼續(xù)

pic

提示：路由方式是否使用history模式团搞。一般都是單頁(yè)面開發(fā)不選擇history，輸入n繼續(xù)

pic

提示：選擇CSS預(yù)處理器

• node-sass 是自動(dòng)編譯多艇，實(shí)時(shí)的
• dart-sass 需要保存后才會(huì)生效
• Less 最終會(huì)通過編譯處理輸出css到瀏覽器逻恐，Less 既可以在客戶端上運(yùn)行，也可在服務(wù)端運(yùn)行 (借助 node.js)
• Stylus 主要用來給node項(xiàng)目進(jìn)行CSS預(yù)處理支持，Stylus功能上更為強(qiáng)壯复隆，和Js聯(lián)系更加緊密拨匆，可創(chuàng)建健壯的、動(dòng)態(tài)的的CSS

我們選擇 Sass/SCSS (with node-sass)挽拂，繼續(xù)

pic

提示：Babel, ESLint是使用獨(dú)立文件惭每，還是在package.json一個(gè)文件中保存所有配置信息。選擇第一個(gè)亏栈，繼續(xù)

pic

提示：是否為以后創(chuàng)建的項(xiàng)目保存我們當(dāng)前所選的這些配置台腥，我們選擇否,開始自動(dòng)創(chuàng)建項(xiàng)目

pic

項(xiàng)目創(chuàng)建完成后，cd到當(dāng)前工程目錄下绒北，執(zhí)行yarn serve,就可以運(yùn)行當(dāng)前項(xiàng)目了黎侈。

pic

在瀏覽器中輸入上面的地址就可看到我們當(dāng)前創(chuàng)建的Vue工程了

pic

至此，我們整個(gè)工程創(chuàng)建完成闷游。接下來總結(jié)一下在移動(dòng)Web開發(fā)中常用的三方庫(kù)峻汉。

2.第三方庫(kù)使用總結(jié)

(1).移動(dòng)Web布局庫(kù)

我們?cè)谶M(jìn)行移動(dòng)Web頁(yè)面開發(fā)時(shí)，需要對(duì)頁(yè)面進(jìn)行布局脐往，常用的布局方式有用rem來作單位休吠，配合h5新的meta屬性來適配屏幕做開發(fā)的，也有直接使用三方庫(kù)postcss-px-to-viewport來進(jìn)行頁(yè)面布局的业簿。我們直接使用第二種方式：
使用yarn進(jìn)行安裝,cd 到工程目錄后執(zhí)行

$ yarn add -D postcss-px-to-viewport

執(zhí)行完成后蛛碌，在postcss.config.js中進(jìn)行參數(shù)配置

module.exports = {
  plugins: {'postcss-px-to-viewport': {
    unitToConvert: 'px',// 要轉(zhuǎn)化的單位
    viewportWidth: 375,// UI設(shè)計(jì)稿的寬度
    unitPrecision: 5,// 轉(zhuǎn)換后的精度，即小數(shù)點(diǎn)位數(shù)
    propList: ['!*'],// 指定轉(zhuǎn)換的css屬性的單位辖源，*代表全部css屬性的單位都進(jìn)行轉(zhuǎn)換
    viewportUnit: 'vw',// 指定需要轉(zhuǎn)換成的視窗單位蔚携，默認(rèn)vw
    fontViewportUnit: 'vw',// 指定字體需要轉(zhuǎn)換成的視窗單位，默認(rèn)vw
    selectorBlackList: [],// 指定不轉(zhuǎn)換為視窗單位的類名克饶，
    minPixelValue: 1,// 默認(rèn)值1酝蜒，小于或等于1px則不進(jìn)行轉(zhuǎn)換
    mediaQuery: false,// 是否在媒體查詢的css代碼中也進(jìn)行轉(zhuǎn)換，默認(rèn)false
    replace: true,// 是否轉(zhuǎn)換后直接更換屬性值
    exclude: [],// 設(shè)置忽略文件矾湃，用正則做目錄名匹配
    landscape: false,// 是否處理橫屏情況
    landscapeUnit: 'vw',//橫屏單位
    landscapeWidth: 568//橫屏寬度
  }}
}

(2). UI庫(kù)

pic

在進(jìn)行移動(dòng)Web開發(fā)中亡脑，第三方UI庫(kù)的使用是少不了的，我們最常用的有vant邀跃、Element UI等霉咨，我們以vant來說明,進(jìn)行工程目錄執(zhí)行

# Vue 2 項(xiàng)目，安裝 Vant 2：
npm i vant -S

# Vue 3 項(xiàng)目拍屑，安裝 Vant 3：
npm i vant@next -S

# 通過 yarn 安裝vant3
yarn add vant@next

注意對(duì)于Vue2和Vue3項(xiàng)目引入方式是不一樣的途戒，我們是Vue3項(xiàng)目，因此執(zhí)行npm i vant@next -S或者yarn add vant@next

安裝完成后就可以引入組件了僵驰，也需要注意喷斋，Vue2與Vue3的配置方式也是不同的唁毒，具體可以去查看Vant官網(wǎng)查看，這里不在贅述星爪。

(3). 網(wǎng)絡(luò)請(qǐng)求庫(kù)

在項(xiàng)目中進(jìn)行網(wǎng)絡(luò)請(qǐng)求時(shí)浆西，最常用的第三方庫(kù)是axios,他的引入方式也很簡(jiǎn)單：

$ npm install axios
OR 
$ yarn add axios

對(duì)于Vue2項(xiàng)目而言安裝完成后在mian.js中引用axios，并綁到原型鏈上顽腾。使用插件的時(shí)候近零，一般要在入口文件main.js中引入，因?yàn)閙ian.js是項(xiàng)目首先運(yùn)行的文件：

import Vue from 'vue'
import axios from ‘a(chǎn)xios’
Vue.prototype.$http = axios

它的用法很簡(jiǎn)單：

// get請(qǐng)求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
// post 請(qǐng)求
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
// 執(zhí)行多個(gè)并發(fā)請(qǐng)求
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) {
    // 兩個(gè)請(qǐng)求現(xiàn)在都執(zhí)行完成
  }));

但是對(duì)于Vue3項(xiàng)目而言抄肖，除了引入axios外秒赤，還需要引入vue-axios,引入方式：

$ npm install --save axios vue-axios

vue-axios是將axios集成到Vue.js的小包裝器，可以像插件一樣進(jìn)行安裝憎瘸。在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).項(xiàng)目中的圖片使用

在開發(fā)項(xiàng)目時(shí)幌甘，免不了要使用到圖片，目前項(xiàng)目常用的矢量圖片庫(kù)非阿里的iconfont莫屬了痊项，它最大的好處是你可以像調(diào)整文字一樣锅风，設(shè)置圖片的顏色和大小，而不用擔(dān)心圖片失真問題鞍泉。它的使用方式也很簡(jiǎn)單：
把我們要使用的圖片添加到項(xiàng)目中皱埠，然后點(diǎn)擊下載到本地

pic

• 支持多色圖標(biāo)了，不再受單色限制托修。
• 通過一些技巧忘巧，支持像字體那樣，通過font-size,color來調(diào)整樣式睦刃。
• 兼容性較差砚嘴，支持 ie9+,及現(xiàn)代瀏覽器。
• 瀏覽器渲染svg的性能一般涩拙，還不如png际长。
  使用步驟如下：

第一步：拷貝下載文件iconfont.js到項(xiàng)目目錄

在需要用到iconfont 的地方引入這個(gè)js文件目錄

import '../utils/iconfont';

第二步：加入通用css代碼（引入一次就行）

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

第三步：挑選相應(yīng)圖標(biāo)并獲取類名，應(yīng)用于頁(yè)面：

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

#icon-xxx 就是你選的圖片類名
如果要調(diào)整大小兴泥、顏色工育、位置等

.icon {
  font-size: 30px;
  color: orange;
  position:relative;
  display:inline-block;
  top: calc(12px + 0.15rem);
  right: 6px;
}

注意：加入的圖片最好是去掉填充色的,然后你才能修改顏色,否則設(shè)置顏色不生效。

四.總結(jié)

轉(zhuǎn)眼做前端已經(jīng)小半年了搓彻，越學(xué)習(xí)越感覺前端內(nèi)容的復(fù)雜翅娶，越感覺自己所學(xué)知識(shí)的淺薄文留，寫這篇文章也算是對(duì)這段時(shí)間的總結(jié)。關(guān)于ESlint的使用可以參考這個(gè)文章：
參考：
postcss-px-to-viewport
element UI
axios
iocnfont
https://v3.cn.vuejs.org/
https://cli.vuejs.org/zh/guide/