1.安裝vue-cli

? ? ? ? （1） 看是否安裝了npm? 命令：npm? ?-v，顯示版本號(hào)表示安裝成功

? ? ? ? （2）安裝vue-cli ： npm install vue-cli -g 或cnpm install vue-cli -g? ? 兩者一樣：

? ? ? ? ? ? ? ? ? ? ? ? ? ?（1） -g :代表全局安裝。如果你安裝時(shí)報(bào)錯(cuò)，一般是網(wǎng)絡(luò)問題，你可以嘗試用cnpm來進(jìn)行安裝。安裝完成后，可以用vue

? ? ? ? （3）驗(yàn)證vue-cli是否安裝成功：vue -V?

? ??????????????????????????（1）?-V來進(jìn)行查看 vue-cli的版本號(hào)。注意這里的V是大寫的

2.初始化項(xiàng)目

? ? ? ? ? ? （1）我們用vue init命令來初始化項(xiàng)目，具體看一下這條命令的使用方法。

? ? ? ? ? ? ? ? $ vue init <template-name> <project-name>

命令解釋：

? ? ? ? ? （1）? init：表示我要用vue-cli來初始化項(xiàng)目

? ? ? ? ? ?（2） <template-name>：表示模板名稱，vue-cli官方為我們提供了5種模板，

? ? ? ? ? ? ? ? ? ? ? ? ? ? 2-1：webpack-一個(gè)全面的webpack+vue-loader的模板，功能包括熱加載，linting,檢測(cè)和CSS擴(kuò)展。

? ? ? ? ? ? ? ? ? ? ? ? ? 2-2：? webpack-simple-一個(gè)簡單webpack+vue-loader的模板，不包含其他功能，讓你快速的搭建vue的開發(fā)環(huán)境。

? ? ? ? ? ? ? ? ? ? ? ? ? 2-3：browserify-一個(gè)全面的Browserify+vueify 的模板，功能包括熱加載，linting,單元檢測(cè)。

????????????????????????????2-4：browserify-simple-一個(gè)簡單Browserify+vueify的模板，不包含其他功能，讓你快速的搭建vue的開發(fā)環(huán)境。

? ? ? ? ? ? ? ? ? ? ? ? ? ? 2-5：-simple-一個(gè)最簡單的單頁應(yīng)用模板。

????????????（3） <project-name>：標(biāo)識(shí)項(xiàng)目名稱，這個(gè)你可以根據(jù)自己的項(xiàng)目來起名字。

在實(shí)際開發(fā)中，一般我們都會(huì)使用webpack這個(gè)模板，那我們這里也安裝這個(gè)模板，在命令行輸入以下命令：

????vue init webpack vuecliTest

命令行出現(xiàn)上面的文字，說明我們已經(jīng)初始化好了第一步。命令行提示我們現(xiàn)在可以作的三件事情。

（1）cd vuecliTest?進(jìn)入我們的vue項(xiàng)目目錄。

（2）npm install?安裝我們的項(xiàng)目依賴包，也就是安裝package.json里的包，如果你網(wǎng)速不好，你也可以使用cnpm來安裝。

（3）npm run dev?開發(fā)模式下運(yùn)行我們的程序。給我們自動(dòng)構(gòu)建了開發(fā)用的服務(wù)器環(huán)境和在瀏覽器中打開，并實(shí)時(shí)監(jiān)視我們的代碼更改，即時(shí)呈現(xiàn)給我們。