vue-用Vue-cli從零開始搭建一個Vue項目
Vue是近兩年來比較火的一個前端框架（漸進式框架吧）。 Vue兩大核心思想：組件化和數據驅動。組件化就是將一個整體合理拆分為一個一個小塊（組件），組件可重復使用；數據驅動是前端的未來發展方向，釋放了對DOM的操作，讓DOM隨著數據的變化自然而然的變化（尤神原話），不必過多的關註DOM，只需要將數據組織好即可。本文用Vue-cli從零開始搭建一個Vue項目。
準備工作
1、下載安裝Node.js
下載地址：https://nodejs.org/en/download/ ，選擇合適自己的版本下載即可。
具體怎麽安裝Node.js就不用具體說明了，安裝Node.js會默認安裝npm（包管理工具）。
2、啟用cmd
按下Windows+R，在打開的“運行”程序窗口，輸入“cmd”，並按下回車鍵，即可打開系統自帶的命令提示符。
3、安裝cnpm
npm是Node.js提供的包管理工具，因為npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常，我們可以用淘寶 npm 鏡像cnpm代替默認的 npm。
方法一：使用npm安裝cnpm
npm install -g cnpm --registry=<a href="https://registry.npm.taobao.org" _src="https://registry.npm.taobao.org">https://registry.npm.taobao.org</a>
註：這樣可能會導致npm和cnpm版本可能不一樣。
方法二：用alias 命令設置別名
alias cnpm="npm --registry=https://registry.npm.taobao.org \ --cache=$HOME/.npm/.cache/cnpm \--disturl=https://npm.taobao.org/dist \ --userconfig=$HOME/.cnpmrc"
輸入cnpm -v查看cnpm版本，來檢查cnpm是否正確安裝。如未正常安裝請檢查系統變量path是否配置正確（不是本文重點，此處不再贅述）。
4、安裝vue-cli
使用cnpm全局安裝vue-cli,在cmd中輸入一下命令（註：“-g”這個參數意思是全局安裝)
cnpm install –g vue-cli
正式動手
準備工作做好之後，開始正式初始化項目。選擇webpack作為打包工具，項目名是mydemo，然後按照提示填寫一些配置。這些配置最終會安裝相應的模塊並且寫到項目的package.json中。
1、新建項目mydemo
vue init webpack mydemo
mydemo是項目名稱，這個名字自己隨便取（不能有大寫字母）。命令輸入後，會進入安裝階段，需要用戶輸入一些信息。
信息詳情：
----------------------------------------------------------------------------------------------------------------------------
Project name (vuetest)
項目名稱，可以自己指定，也可直接回車，按照括號中默認名字。
Project description (A Vue.js project)
項目描述，也可直接點擊回車，使用默認名字。
Author
作者，可以自己指定，也可直接回車。
接下來會讓用戶選擇
Runtime + Compiler: recommended for most users
運行加編譯，既然已經說了推薦，就選它了
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere
僅運行時，已經有推薦了就選擇第一個了
Install vue-router? (Y/n)
是否安裝vue-router，這是官方的路由，大多數情況下都使用，這裏就輸入“y”後回車即可。
Use ESLint to lint your code? (Y/n)
是否使用ESLint管理代碼，ESLint是個代碼風格管理工具，是用來統一代碼風格的，並不會影響整體的運行。
Setup unit tests with Karma + Mocha? (Y/n)
是否安裝單元測試。
Setup e2e tests with Nightwatch(Y/n)?
是否安裝e2e測試。
----------------------------------------------------------------------------------------------------------------------------
用編輯器打開項目，目錄結構大致是這樣的。
目錄介紹：
----------------------------------------------------------------------------------------------------------------------------
bulid
裏面是一些操作文件，使用npm run * 時其實執行的就是這裏的文件。
config
配置文件，執行文件需要的配置信息。
src
資源文件，所有的組件以及所用的圖片都是在這個文件夾下放著。簡單看一下這個文件夾下都放了哪些東西。
assets
資源文件夾，放圖片之類的資源，
components
組件文件夾，寫的所有組件都放在這個文件夾下，
router
路由文件夾，這個決定了頁面的跳轉規則，
App.vue
應用組件，所有自己寫的組件，都是在這個組件之上運行了。
main.js
webpack入口文件。
----------------------------------------------------------------------------------------------------------------------------
2在mydemo下安裝依賴
切換到項目目錄
cd mydemo
安裝模塊
cnpm install
它根據package.json的配置表進行安裝，安裝完後會在mydemo下多一個文件夾node_modules，這裏的文件對應著package.json裏的配置信息。
3、運行mydemo
輸入命令
npm run dev
在瀏覽器輸入地址http://localhost:8080，看到如下頁面，說明大功告成，一個Vue項目已經初始化完成！
感 謝 閱 讀~
分享一個公眾號-----前端麻辣燙 ，一個專註於前端技術學習與交流的公眾號~
微信搜索“WebSnacks”，或者掃描下方二維碼。
vue-用Vue-cli從零開始搭建一個Vue項目