使用Vue-cli(Vue腳手架)快速搭建項目

vue-cli 是一個官方發佈 vue.js 項目腳手架,使用 vue-cli 可以快速創建 vue 項目.特地在此記錄搭建的全過程!

想要使用Vue-cli搭建項目,首先得在本機安裝Node js以及cnpm,關於Node js的安裝百度上很詳細的內容,本文不作詳細解釋了,提供Node.js 安裝包及源碼下載地址爲:https://nodejs.org/en/download/。
下面先介紹如何全局化安裝cnpm
npm install cnpm -g --registry=https://registry.npm.taobao.org
其實對於安裝vue-cli,使用npm命令和cnpm命令都是可以的,個人覺得使用npm安裝的比較慢,而且很可能會因爲網絡問題而出錯,所以還是覺得使用cnpm穩一點。
(1)全局安裝 vue-cli ,在命令提示窗口執行:
cnpm install -g vue-cli
(2)安裝vue-cli成功後,通過cd命令進入你想放置項目的文件夾,在命令提示窗口執行創建vue-cli工程項目的命令:
cd filename
vue init testVue
確認創建項目後,後續還需輸入一下項目名稱、項目描述、作者、打包方式、是否使用ESLint規範代碼等等,詳見上圖。安裝順利執行後會,生成如下文件目錄:
在這裏插入圖片描述
(3)生成文件目錄後,使用 cnpm 安裝依賴:
cnpm install
(4)最後需要執行命令: npm run dev 來啓動項目,啓動完成後會自動彈出默認網頁:http://localhost:8080
到此則是成功利用Vue-cli搭建一個Vue項目

最後總結下:通過vue-cli搭建一個vue項目,會自動生成一系列文件,而這些文件具體是怎樣的結構、文件對應起什麼作用,可以看看下面的解釋:
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章