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

手腳架是什麼？

衆所周知，如今的前端項目發展得越漸越大，咱們前端程序員要從0開始去搭建一套完整的項目很費時，因此這時候前端工程的手腳架就出現了。

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

可是全部手腳架的核心：都是爲了可以快速搭建一個完整的項目的結構，開發者只須要在生成的項目結構的基礎上進行開發便可，很是簡單高效。

而後， vue-cli 的腳手架項目模板有browserify 和 webpack ,vue-lic這個手腳架是把預約義的模板（存放在不一樣的服務器上）複製到本地做爲項目初始結構， 官網給出了兩個模板： webpack-simple 和 webpack 兩種。

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

我用的是wbpack這個。

關於本身是否能搭建一套手腳架，這個是確定的，只有本身寫好模板，放在github上就OK了。在之後的項目搭建就可使用本身搭建的手腳架了。

vue-cli的使用

在這裏，因爲我使用的代碼編輯器是vs code，因此我就按着vs code的界面來展現；

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

第一步：安裝vue-cli

npm install -g vue-cli

安裝完成後，能夠經過命令

vue list 查看有哪些模板能夠調用；

第二步：搭建項目目錄

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

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

<project-name>： 指本身項目的名稱；

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

第三步：安裝依賴

進入新創建的文件夾裏面：

命令格式：cd vuetest

在文件夾裏面去安裝依賴

命令格式：npm install

注意：

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

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

下面是以來所在的地方：

第四步：直接運行

命令格式：npm run dev