Vue CLI Webpack 建立Vue項目

簡介

Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。官網連接：https://cn.vuejs.org

• 是一個構建用戶界面的框架
• 是一個輕量級的MVVM（Model-View-ViewModel），其實就是所謂的數據的雙向綁定
• 數據驅動和組件化的前端開發
• 經過簡單的API就能實現響應式的數據綁定和組合的視圖組件

安裝環境

安裝NodeJS

在官網https://nodejs.org/en/下載安裝包，而後點擊安裝包進行安裝，把nodejs安裝在非空格目錄下，會減小錯誤

 

安裝完成後，在cmd中輸入node -v，若顯示版本說明安裝成功，我這裏安裝的是v10.5.0

node -v

 

 

輸入npm -v 能夠看到npm也已安裝成功，這是由於nodejs自帶npm

npm -v

 

 

配置環境變量NODE_PATH指向安裝路徑下的node_modules

 

安裝淘寶NPM鏡像

由於npm下載資源來源國外，網絡不穩定，下載也慢，安裝了淘寶的鏡像後使用國內cnpm資源會變得很是快

在CMD命令提示符中輸入下面的命令

npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org

 

安裝完成後輸入cnpm -v查看是否安裝成功，成功顯示版本號

cnpm -v

 

 

若是輸入cnpm -v 提示不是內部或外部命令，說明cnpm沒有安裝成功，找到user/admin/.npmrc文件刪除後，從新執行以上命令，再輸入cnpm -v就能夠顯示版本號了。

把nodejs安裝在非空格目錄下，第一次安裝就能夠成功!

 

安裝vue-cli

因爲剛剛安裝了cnpm，此時就可使用cnpm命令安裝vue-cli(腳手架)

cnpm install -g vue-cli

 

安裝完成輸入vue -V查看是否安裝成功，安裝成功後顯示版本號

vue -V

 

 

建立項目

建立項目，首先咱們要選定項目目錄，而後再命令行中把目錄轉到選定的目錄。在這裏，我選擇桌面來存放新建的項目，則咱們須要先把目錄切換到桌面

cd Desktop

 

 

運行命令 vue init webpack myproject ，初始化一個項目，其中webpack是構建工具，也就是整個項目是基於webpack的，其中myproject是整個項目文件夾的名稱

vue init webpack myproject

 

中間會輸入項目名，回車默認名稱，描述回車默認，Author做者自填，Vue build回車，vue-router Yes，ESLint（代碼檢查，很煩人，建議不要） No，tests No，e2e No，後面一路回車進行下載安裝

 

 

最後顯示Project initiazation finished！項目初始化完成

切換到項目路徑

cd myproject

 

安裝項目依賴

cnpm install

 

安裝完依賴包以後，就能夠運行整個項目了 

 

運行項目

在項目目錄中，運行命令 npm run dev

npm run dev

 

 

能夠看到項目已經運行在 http://localhost:8080

 

訪問 http://localhost:8080，能夠看到項目成功運行

 

文件說明

①main.js是咱們的入口文件，主要做用是初始化vue實例，並使用咱們須要的插件

②App.vue是咱們的根組件，全部頁面都是在App.vue下面進行切換的，能夠理解爲全部的組件都是App.vue的子組件，咱們能夠把頭部和底部及每一個頁面都出現的內容放在App.vue裏面

③index.html文件入口

④src放置組件和入口文件

⑤config中配置了路徑端口值等

⑥build中配置了webpack的基本配置、開發環境配置、生產環境配置等

⑦node_modules爲依賴的模塊

 

 

推薦瀏覽：Vue父子組件傳值以及父調子方法、子調父方法

 

喜歡的話記得推薦並收藏哦~~~