vue-用Vue-cli從零開始搭建一個Vue項目

　　Vue是近兩年來比較火的一個前端框架（漸進式框架吧）。 Vue兩大核心思想：組件化和數據驅動。組件化就是將一個總體合理拆分爲一個一個小塊（組件），組件可重複使用；數據驅動是前端的將來發展方向，釋放了對DOM的操做，讓DOM隨着數據的變化天然而然的變化（尤神原話），沒必要過多的關注DOM，只須要將數據組織好便可。本文用Vue-cli從零開始搭建一個Vue項目。

準備工做

一、下載安裝Node.js

　　下載地址：https://nodejs.org/en/download/ ，選擇合適本身的版本下載便可。 

　　具體怎麼安裝Node.js就不用具體說明了，安裝Node.js會默認安裝npm（包管理工具）。

二、啓用cmd

　　按下Windows+R，在打開的「運行」程序窗口，輸入「cmd」，並按下回車鍵，便可打開系統自帶的命令提示符。

三、安裝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是否配置正確（不是本文重點，此處再也不贅述）。

四、安裝vue-cli

　　使用cnpm全局安裝vue-cli,在cmd中輸入一下命令（注：「-g」這個參數意思是全局安裝)

cnpm install –g vue-cli

 

正式動手

 

　　準備工做作好以後，開始正式初始化項目。選擇webpack做爲打包工具，項目名是mydemo，而後按照提示填寫一些配置。這些配置最終會安裝相應的模塊而且寫到項目的package.json中。

一、新建項目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裏的配置信息。

三、運行mydemo

輸入命令

npm run dev 

　　在瀏覽器輸入地址http://localhost:8080，看到以下頁面，說明大功告成，一個Vue項目已經初始化完成！

 

感 謝 閱 讀~

 

分享一個公衆號-----前端麻辣燙 ，一個專一於前端技術學習與交流的公衆號~

 

微信搜索「WebSnacks」，或者掃描下方二維碼。