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

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

一. 概述

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

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

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

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

node.js

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

npm

npm是node.js的包管理工具（package manager），為啥我們需要一個包管理工具呢？因為我們在Web開發(fā)時，會用到很多別人寫的JavaScript代碼。如果我們要使用別人寫的某個包，每次都根據(jù)名稱搜索一下官方網(wǎng)站，下載代碼、解壓、再使用，非常繁瑣。于是一個集中管理的工具應(yīng)運(yùn)而生：大家都把自己開發(fā)的模塊打包后放到npm官網(wǎng)上，如果要使用，直接通過npm安裝就可以直接用。他類似于iOS開發(fā)中的cocoapods,Android開發(fā)中的Maven,這樣就好理解了。
node下載地址點擊這里,按照步驟安裝完成后，終端輸入

node -v
npm -v

查看安裝版本，出現(xiàn)下面的版本號說明安裝成功。


node

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

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

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

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 貢獻(xiàn)的 Javascript 包管理器。yarn是為了彌補(bǔ)npm的一些缺陷而出現(xiàn)的。在日常開發(fā)中你可以使用npm也可以使用yarn進(jìn)行包的管理，只不過相比npm而言，它的速度更快，并提供了離線模式。關(guān)于它我們不會過多的介紹，你可以去它的中文網(wǎng)站查看.它的安裝方式也很簡單，直接通過Homebrew進(jìn)行安裝，命令 brew install yarn. 它的一些常用指令：

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

可以在項目中混用yarn與npm,但是最好不要這樣。

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

pic1

前端的開發(fā)工具基本就兩個選擇Visual Studio Code 或者 WebStorm,兩者選擇哪一個都可以，我個人更喜歡Visual Studio Code,其實選擇它最主要原因是免費且開源，而且有強(qiáng)大的插件庫。

VSCode安裝插件：

chanjian

選擇[擴(kuò)展]-[搜索插件]-安裝即可
下面是我使用的一些常用的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標(biāo)簽
(3) Auto Rename Tag 修改HTML標(biāo)簽時，自動修改匹配的標(biāo)簽
(4) Color Highlight 顏色值在代碼中高亮顯示
(5) HTML CSS Class Completion CSS class提示插件
(6) Vetur Vue多功能集成插件，包括：語法高亮，智能提示，emmet，錯誤提示，格式化，自動補(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項目搭建與開發(fā)事項

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

1.Vue項目搭建

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

(1). 使用 npm 或 yarn 全局安裝 Vue CLI
npm install -g @vue/cli
# OR
yarn global add @vue/cli

如果頁面報錯如下

error

說明執(zhí)行權(quán)限不夠，可以在在前面加sudo

sudo npm install -g @vue/cli

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

pic

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

執(zhí)行以下命令

vue create my-project
# OR
vue ui

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

(3). 配置工程

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


pic

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

pic

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

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

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

pic

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

pic

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

pic

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

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

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

pic

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

pic

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

pic

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

pic

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

pic

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

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

(1).移動Web布局庫

我們在進(jìn)行移動Web頁面開發(fā)時，需要對頁面進(jìn)行布局，常用的布局方式有用rem來作單位，配合h5新的meta屬性來適配屏幕做開發(fā)的，也有直接使用三方庫postcss-px-to-viewport來進(jìn)行頁面布局的。我們直接使用第二種方式：
使用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è)計稿的寬度
    unitPrecision: 5,// 轉(zhuǎn)換后的精度，即小數(shù)點位數(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庫
pic

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

# 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項目，因此執(zhí)行npm i vant@next -S或者yarn add vant@next

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

(3). 網(wǎng)絡(luò)請求庫

在項目中進(jìn)行網(wǎng)絡(luò)請求時，最常用的第三方庫是axios,他的引入方式也很簡單：

$ npm install axios
OR 
$ yarn add axios

對于Vue2項目而言安裝完成后在mian.js中引用axios，并綁到原型鏈上。使用插件的時候，一般要在入口文件main.js中引入，因為mian.js是項目首先運(yùn)行的文件：

import Vue from 'vue'
import axios from ‘a(chǎn)xios’
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);
  });
// 執(zhí)行多個并發(fā)請求
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) {
    // 兩個請求現(xiàn)在都執(zhí)行完成
  }));

但是對于Vue3項目而言，除了引入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).項目中的圖片使用

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

pic

它有三種引入方式分別是：unicode 引用、font-class 引用、symbol 引用,我們只介紹symbol 引用,這也是官方最推薦的引用方式，相比前兩種有如下特點：

  • 支持多色圖標(biāo)了，不再受單色限制。
  • 通過一些技巧，支持像字體那樣，通過font-size,color來調(diào)整樣式。
  • 兼容性較差，支持 ie9+,及現(xiàn)代瀏覽器。
  • 瀏覽器渲染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>
第三步：挑選相應(yīng)圖標(biāo)并獲取類名，應(yīng)用于頁面：
<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é)知識的淺薄，寫這篇文章也算是對這段時間的總結(jié)。關(guān)于ESlint的使用可以參考這個文章：
參考：
postcss-px-to-viewport
element UI
axios
iocnfont
https://v3.cn.vuejs.org/
https://cli.vuejs.org/zh/guide/

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容