郁金香.png
<h3>環(huán)境安裝</h3>
<blockquote>
安裝淘寶鏡像
大家都知道國內(nèi)直接使用 npm 的官方鏡像是非常慢的背率，這里推薦使用淘寶 NPM 鏡像。
下載地址https://npm.taobao.org/
</blockquote>
也可直接用npm安裝：
npm install -g cnpm --registry=https://registry.npm.taobao.org `
現(xiàn)在就可以使用cnpm命令安裝模塊了：
cnpm install [name]
安裝webpack
cnpm install webpack -g
安裝vue
cnpm install vue
全局安裝 vue-cli
cnpm install vue-cli -g
在磁盤新建一個(gè)空文件夾放工程用誉己，并在終端進(jìn)入該目錄
cd 目錄路徑
創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目my-project
vue init webpack my-project
會(huì)有一些初始化的設(shè)置侨舆，如下可直接回車默認(rèn)，或者按情況輸入即可栗恩。
a1.png
進(jìn)入項(xiàng)目目錄
cd my-project
安裝依賴
cnpm install
運(yùn)行項(xiàng)目
cnpm run dev
成功啟動(dòng)項(xiàng)目后透乾，將會(huì)在瀏覽器看到這個(gè)界面：
a2.png
有時(shí)項(xiàng)目沒有啟動(dòng)成功，很有可能是相關(guān)編譯打包工具沒更新導(dǎo)致磕秤。
解決辦法：請(qǐng)運(yùn)行以下命令
npm update -g
npm update vue-cli
項(xiàng)目目錄結(jié)構(gòu)：
a3.png
<blockquote>
<b>在實(shí)際開發(fā)之前乳乌，理解各個(gè)目錄的作用是很重要的，下一章節(jié)在詳細(xì)介紹下各個(gè)目錄的組成和內(nèi)容市咆。
Vue2.0項(xiàng)目入門 — 詳解Vue-cli webpack模板</b>
</blockquote>
