vue - vue-cli腳手架安裝和webpack-simple模板項目生成

ue-cli 是一個官方發佈 vue.js 項目腳手架，使用 vue-cli 能夠快速建立 vue 項目。

GitHub地址是：https://github.com/vuejs/vue-cli

1、安裝Nodejs

首先須要安裝Node環境。安裝完成以後，能夠在命令行工具中輸入node -v和npm -v,若是能顯示出版本號，就說明安裝成功。

2、安裝vue-cli

安裝好node以後，咱們就能夠直接全局安裝vue-cli:

npm install -g vue-cli

使用這種方式可能會安裝比較慢，推薦你們使用國內的淘寶鏡像來安裝。(以前安裝過了就不過多贅述了)

cnpm install -g vue-cli

若是安裝失敗，可使用 npm cache clean 清理緩存，而後再從新安裝。後面的安裝過程當中，若有安裝失敗的狀況，也須要先清理緩存

安裝完成後，可使用vue -V(大寫的V)查看vue的版本。

 

若是接下來你不知道要幹嗎，那麼你能夠在命令行中輸入

vue -help

它會有如下提示：

 

懂點英語的意思應該能看到提示的信息，聰明的你此時接下來執行vue list看看有哪些可用的官網模板：

vue list

 

 

Vue.js官方提供了兩種類型的模板項目：

• 基於vue cli和browserify的項目模板
• 基於vue cli和webpack的項目模板

vue cli是Vue.js官方提供的命令行建立Vue.js項目腳手架的工具。這兩種類型的項目模板分別提供了簡單模式和徹底模式，簡單模式僅包含基於vue.js開發必要的一些資源和包，使用該模式能夠快速地投入到開發。徹底模式則還包括ESLink、單元測試等功能。

咱們在這裏使用webpack的項目模板。沒有爲何，由於webpack有點叼叼的。

咱們今天玩一下webpac-simple 基於webpack的簡單模板。

再重申一遍，必定要使用命令行工具切換到你當前的目錄下，相似這樣

 

3、而後執行：

vue init webpack-simple my-project

init :初始化咱們的項目。

webpack-simple:使用的哪一個模板，這裏咱們先使用webpack-simple模板

my-project:表示咱們項目的名字，這名字能夠本身命名，但不要起成系統軟件的一些名字，好比vue，node，npm等

執行以下命令

vue init webpack-simple my-project

 

 

4、接下來根據提示操做：

切換到當前目前，必定切換進來

cd my-project

下載當前項目所依賴的包

npm install

啓動當前的項目

npm run dev

接下來見證奇蹟的時刻來了，咱們第一個vue的項目。只要出現以下界面，證實項目啓動成功了。