介紹下用 Vue2.0 搭建Vue腳手架(vue-cli),在搭建腳手架之前,先做好環(huán)境配置。
詳細(xì)如下:
1.先下載node.js(官網(wǎng)地址:https://nodejs.org/en/)下載安裝后,打開命令行工具(win+r厅翔,然后輸入cmd),輸入 node -v,查看版本號者吁,出現(xiàn)類似下圖的版本號說明安裝成功:
2.輸入npm -v 查看 npm 的版本號
3.有的朋友下載的時(shí)候比較慢,也可以通過安裝淘寶鏡像饲帅,打開命令行工具复凳,把這個命令(npm install -g cnpm --registry=https://registry.npm.taobao.org)復(fù)制到命令行工具,記住要手動的右鍵粘貼灶泵,因?yàn)閏tr + v 的在命令行沒法粘貼育八。(自我感覺不用淘寶鏡像也蠻快的)
4.現(xiàn)在有很多的項(xiàng)目模版(項(xiàng)目模版)
simple
webpack
webpack-simple
browserify
browserify-simple 等等
今天主要說下webpack 跟 webpack-simple
基本使用流程
(1) npm install vue-cli -g 安裝vue命令環(huán)境 如下圖(下載中):
那么安裝完成之后,如何查看是否安裝成功了呢赦邻?輸入 vue --version(注意:前面是兩個杠) 如果出現(xiàn)版本號說明安裝成功髓棋,如下圖:
(2)生成項(xiàng)目模版
命令: vue init <項(xiàng)目模版名> 本地自己想要創(chuàng)建的文件名字 如下圖
這個時(shí)候出現(xiàn)?Project name 就是項(xiàng)目名稱的意思惶洲,直接enter按声,然后還會跳出來另外的提示,一路enter下去湃鹊,出現(xiàn)下圖儒喊,說明項(xiàng)目模版創(chuàng)建完畢,這時(shí)候還沒有完币呵。
注意: 此處自己創(chuàng)建的項(xiàng)目名字不能含有大些字母怀愧,不然報(bào)錯提示
(3)用cd <自己創(chuàng)建的項(xiàng)目名字> 進(jìn)入到剛剛生成的項(xiàng)目目錄里面
注意:這個地方看你在那個文件夾里面侨颈,如果你是在剛剛創(chuàng)建的文件夾同一層打開的命令工具,那么直接cd <自己創(chuàng)建的項(xiàng)目名字>是可以進(jìn)入的芯义,這里簡單說下
CD 目錄名 進(jìn)入到目錄名文件夾
CD \ 退回到根目錄
CD .. 退回到上一根目錄
CD 或者 CD . 顯示當(dāng)前路徑
(4)進(jìn)入到剛剛生成的項(xiàng)目目錄里面 運(yùn)行命令 npm install 生成node_modules文件
(5)這個時(shí)候 運(yùn)行 npm run dev
然后瀏覽器自動打開localhost:8080顯示如下圖頁面哈垢,這個時(shí)候說明腳手架搭建成功了。有沒有看明白的朋友扛拨,歡迎留言耘分,共同進(jìn)步。