手腳架是什么？

眾所周知，現(xiàn)在的前端項(xiàng)目發(fā)展得越漸越大，我們前端程序員要從0開(kāi)始去搭建一套完整的項(xiàng)目很費(fèi)時(shí)，所以這時(shí)候前端工程的手腳架就出現(xiàn)了。

我用得vue-cli也是其中之一，還有其他的我也說(shuō)不清，我就說(shuō)一下我接觸比較多的這款vue-cli，

但是所有手腳架的核心：都是為了能夠快速搭建一個(gè)完整的項(xiàng)目的結(jié)構(gòu)，開(kāi)發(fā)者只需要在生成的項(xiàng)目結(jié)構(gòu)的基礎(chǔ)上進(jìn)行開(kāi)發(fā)即可，非常簡(jiǎn)單高效。

然后， vue-cli 的腳手架項(xiàng)目模板有browserify 和 webpack ,vue-lic這個(gè)手腳架是把預(yù)定義的模板（存放在不同的服務(wù)器上）復(fù)制到本地作為項(xiàng)目初始結(jié)構(gòu)， 官網(wǎng)給出了兩個(gè)模板： webpack-simple 和 webpack 兩種。

兩種的區(qū)別在于webpack-simple 沒(méi)有包括Eslint 檢查功能等等功能，普通項(xiàng)目基本用webpack-simple 就足夠了。

我用的是wbpack這個(gè)。

關(guān)于自己是否能搭建一套手腳架，這個(gè)是肯定的，只有自己寫(xiě)好模板，放在github上就OK了。在以后的項(xiàng)目搭建就可以使用自己搭建的手腳架了。

vue-cli的使用

在這里，由于我使用的代碼編輯器是vs code，所以我就按著vs code的界面來(lái)展示；

下面講到其他命令在其他的帶有終端的代碼編輯器也可以使用

第一步：安裝vue-cli

npm install -g vue-cli

安裝完成后，可以通過(guò)命令

vue list 查看有哪些模板可以調(diào)用；

第二步：搭建項(xiàng)目目錄

命令格式：vue init <template-name> <project-name>

<template-name>：指上方的眾多模板；

<project-name>： 指自己項(xiàng)目的名稱(chēng)；

例如：我使用的是webpack這個(gè)模板：  vue init webpack vuetest

第三步：安裝依賴(lài)

進(jìn)入新建立的文件夾里面：

命令格式：cd vuetest

在文件夾里面去安裝依賴(lài)

命令格式：npm install

注意：

不用使用cnpm 淘寶這包管理器來(lái)安裝依賴(lài)，這樣會(huì)缺失比較多的東西；

雖然用npm去下載依賴(lài)很慢，畢竟連的是國(guó)外的鏈接；

下面是以來(lái)所在的地方：

第四步：直接運(yùn)行

命令格式：npm run dev

直接在終端里面輸入這段命令就OK了；

默認(rèn)是本地的8080端口：

到這里已經(jīng)OK了!

使用webpage模板搭建的vue項(xiàng)目目錄就OK了；

注意：

在運(yùn)行 npm run  dev 中可以使用  cnpm run dev 來(lái)代替。

其中

安裝cnpm

命令 npm install -g cnpm --registry=https://registry.npm.taobao.org

其他用法和npm差不過(guò)。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com