前端高階 從零搭建屬於你的腳手架

2021-10-07 04:15:08 字數 1520 閱讀 9588

這裡我就不販賣焦慮了。大家有自己的選擇,只要自己不後悔就好。

二丶市面上腳手架的缺陷

雖然vue-cli等腳手架已經布置好了很多東西,包括router,css的解析等等。

但是!但是啊,但是這些腳手架並不知道我們公司的或者說我們個人專案的網路請求,而且網路請求內部怎麼封裝的也沒有統一的處理。也不知道我們的一些通用的登陸頁等等。這些都需要我們重新的cv一下,或者自己重新做。

三丶過分使用別人搭建的腳手架可能會帶來以下問題

忘記,或者不知道webpack或者路由的配置,經常會在面試的臨時抱佛腳,不能夠真正的掌握,終究是紙上談兵

一些常見的坑點都被別人踩過並鋪好路了,在不了解原理又沒有踩過坑的情況下如果碰到問題很容易耽誤大量的時間

一些新框架的公升級,只能等別人的cli版本公升級之後才可以享受。慢人一步!

配置一些專案相關的東西,經常需要翻看文件。

……四丶原因

我們做腳手架有以下幾個原因

學習腳手架的思想

了解腳手架的構成

省略一下cv的操作,更快更靈活的開始自己公司或者自己個人專案

可以深入的配置自己的專案

開始準備工作

commander

用於node.js命令列介面的完整解決方案。基本上是前端腳手架必備的。

這裡只介紹

version

command

description

action

簡單使用,畢竟只是入門,後續一些複雜的定製化的就需要大家自己去探索了。

好了,收!

怎麼用?

const = require(『commander』)

program

.version(react-cli-mobile $)

.command('create ')

.description(『初始化模板』)

.action((projectname, cmd) => )

複製**

fs-extra

fs-extra模組是系統fs模組的擴充套件,提供了更多便利的 api,並繼承了fs模組的 api

這裡只介紹

copy 複製檔案

existssync

當然了,這只代表我的個人想法,大家可以自行選擇。

怎麼用?

const fs = require(『fs-extra』)

if(fs.existssync(targetdir))

// 複製模板檔案

await fs.copy(src, dest)

複製**

path

很簡單,字面意思,主要是用於配合【fs-extra】這個庫來使用的,主要還是給copy提供路徑,就不多介紹了

怎麼用?

const path = require(『path』)

const src = path.resolve(__dirname, dir);

const dest = path.resolve(process.cwd(), projectname);

Vue Webpack搭建前端腳手架

第一步 安裝node,配置node cache,node modules,指令如下 npm config set prefix d software node v8.9.3 win x86 node global npm config set cache d software node v8.9.3...

vue cli腳手架的搭建

說起 vue 估計腳手架的搭建也是很令人頭疼的問題吧。剛開始接觸腳手架,自己也有一種很矇圈的感覺,現在專案寫多了,慢慢對腳手架的搭建環境也熟悉了。搭建腳手架,第一步要先檢查 node js 的版本問題,可以使用 node v 指令來檢查版本!我的版本是 6.2.0 版本只要是 4.0 以上就可以正常...

vue腳手架的搭建

npminstall g webpack 1安裝vue cli npm install gvue cli 1 使用vue cli構建專案 vue init webpack project name 建立乙個基於webpack模板的名為 project name的專案 1 目前可用的模板包括 brow...