vue.js的手腳架vue-cli項目搭建的步驟

手腳架是什么？

眾所周知，現(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了；

默認(rèn)是本地的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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。