手腳架是什么？

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比梅江網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式梅江網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋梅江地區(qū)。費用合理售后完善，10年實體公司更值得信賴。

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

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

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

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

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

我用的是wbpack這個。

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

vue-cli的使用

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

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

第一步：安裝vue-cli

npm install -g vue-cli

安裝完成后，可以通過命令

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

第二步：搭建項目目錄

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

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

<project-name>： 指自己項目的名稱；

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

第三步：安裝依賴

進入新建立的文件夾里面：

命令格式：cd vuetest

在文件夾里面去安裝依賴

命令格式：npm install

注意：

不用使用cnpm 淘寶這包管理器來安裝依賴，這樣會缺失比較多的東西；

雖然用npm去下載依賴很慢，畢竟連的是國外的鏈接；

下面是以來所在的地方：

第四步：直接運行

命令格式：npm run dev

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

默認是本地的8080端口：

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

使用webpage模板搭建的vue項目目錄就OK了；

注意：

在運行 npm run  dev 中可以使用  cnpm run dev 來代替。

其中

安裝cnpm

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

其他用法和npm差不過。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

新聞標題：vue.js的手腳架vue-cli項目搭建的步驟
網(wǎng)站URL：http://jinyejixie.com/article22/iejjcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、網(wǎng)頁設(shè)計公司、外貿(mào)建站、品牌網(wǎng)站建設(shè)、Google、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)