Vue 搭建腳手架:vue-cli

1.安裝node.js

node.js官網下載并安裝node,安裝步驟很簡單,只要一路next可以了。
安裝完成后,打開命令行工具(win+r,然后輸入cmd)輸入命令node -v,如下圖,如果出現對應版本號,就說明安裝成功了。

我們所需要的npm包管理器,是集成在node中的,所以,直接輸入npm -v就會如下圖所示,顯示出npm的版本信息。
這里需要說明下,因為在官網下載安裝node.js后,就已經自帶npm(包管理工具)了,另需要注意的是npm的版本最好是3.x.x以上,以免對后續產生影響。

到這里node的環境已經安裝完了,npm包管理工具也有了,但是由于npm的有些資源被墻,有時候安裝依賴會很慢,為了更快更穩定,所以我們需要切換到淘寶的npm鏡像——cnpm
這里需要說明下,不安裝不影響項目可跳過后面用到的cnpm換成npm即可

2.安裝cnpm

點擊進入淘寶的cnpm淘寶鏡像網站,里面有詳細的配置方法。
或者直接在命令行輸入:

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

然后等待,安裝完成。輸入cnpm -v,可以查看當前cnpm版本,這個和npm的版本還是不一樣的。

使用cnpm的方法就是,需要用到npm的地方直接使用cnpm替換就可以了(反之即可)

3. 安裝webpack

安裝webpack,打開命令行工具輸入:

npm install webpack -g

安裝完成之后輸入 webpack -v,如下圖,如果出現相應的版本號,則說明安裝成功。

4. 安裝vue-cli腳手架構建工具

打開命令行工具輸入:

npm install vue-cli -g

安裝完成之后輸入 vue -V(注意這里是大寫的“V”),如下圖,如果出現相應的版本號,則說明安裝成功。


通過以上四步,我們需要準備的環境和工具都準備好了,接下來就開始使用vue-cli來構建項目(如果你是最近安裝的vue cli 3那就把下面的vue init webpack my-project 換成 vue create my-project即可)

創建一個基于 webpack 模板新項目

要創建項目,首先我們要選定目錄,然后在文件夾頂部地址欄輸入cmd打開命令行開始初始化一個項目:

vue init webpack my-project

或使用:

vue init webpack-simple my-project

注意:my-project為自定義項目名,項目名不能使用中文,項目名不能大寫
說明:也可以在目錄下新建一個文件夾在該文件夾下輸入命令 vue init webpack 這樣可以不使用命令新建項目。二選一

創建項目步驟解析:
vue init webpack my-project----------------------------- 這個是那個安裝vue腳手架的命令

? Project name <my-project>--------------------------------項目名稱(不寫為空)
? Project description <A Vue.js project>-------------------項目描述(不寫為空)
? Author------------------------------------------------------------項目創建者(不寫為空)回車
? Install vue-router? <Y/n>------------------------------------是否安裝Vue路由(y代表是/n代表否)自行選擇
? Use ESLint to lint your code? <Y/n>---------------------是否啟用eslint檢測規則,這里個人建議選no
? Set up unit tests <Y/n>--------------------------------------是否設置單元測試,個人建議no
? Setup e2e tests with Nightwatch <Y/n>-----------------是否端到端測試,個人建議no

然后一直回車,項目開始拉取創建---項目創建成功

創建完成的my-project目錄如下:

image

下面我簡單的說明下各個目錄都是干嘛的:

image

5.啟動my-project項目,在項目命令行中輸入:

npm run dev

運行成功后會出現:

Your application is running here:http://localhost:8080

注意:后面8080為端口號不固定,當8080端口號被占用時會自動選擇其他端口

瀏覽器輸入localhost:8080會默認打開一個“歡迎頁面”,如下圖:

附:

1. npm 開啟了npm run dev以后怎么退出或關閉?
ctrl+c

2. --save-dev
自動把模塊和版本號添加到模塊配置文件package.json中的依賴里devdependencies部分

3. --save 與 --save-dev的區別
--save :安裝包信息將加入到dependencies(生產階段的依賴)
--save-dev :安裝包信息將加入到devDependencies(開發階段的依賴),所以開發階段一般使用它
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,001評論 6 537
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,786評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 176,986評論 0 381
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,204評論 1 315
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,964評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,354評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,410評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,554評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,106評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,918評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,093評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,648評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,342評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,755評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,009評論 1 289
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,839評論 3 395
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,107評論 2 375

推薦閱讀更多精彩內容