安裝Vue.js和命令行工具
- Vue基于Node.js,所以需要安裝Node,所以第一步,我們先下載安裝Node.js。下載地址是:http://nodejs.cn/download/ 選擇你對應的系統,下載相應的版本。Windows用戶還要注意系統的位數。
- 下載完成后,打開安裝文件,一直下一步直到完成安裝。
-
win+R
,輸入powershell
,打開windows命令行工具
image.png
4、輸入npm
,查看是否安裝成功
image.png
出現上圖結果則安裝成功
-
應為默認的npm倉庫源在國外,速度很慢,所以我們安裝淘寶的npm源cnpm。
打開http://npm.taobao.org/ 找到這一句:
image.png 在命令行輸入:
npm install -g cnpm --registry=https://registry.npm.taobao.org
等待安裝完成。
- 然后我們就可以安裝Vue了,命令行輸入
cnpm install -g vue
- 安裝vue-cli,腳手架工具,在命令行輸入:
cnpm install -g vue-cli
- 這時我們在命令行輸入
vue
,出現下圖結果,表示這一步我們全部成功
image.png
初始化Vue工程
現在我們就可以初始化一個項目了。首先我們要定位到我們的項目地址,我的項目地址是D盤WWW文件夾
在powershell中,
cd
是改變目錄的意思,cd 目錄
就是轉到該目錄,cd ..
返回上一層目錄,ls
是列出文件,輸入一部分文件名后,可以按tab
鍵自動補全。
-
我們在命令行中
cd
到d盤www文件夾下:
image.png -
這是我們需要新建一個vue文件夾,
mkdir
命令就是新建文件夾:
image.png 再
cd
到VueJS這是我們可以初始化Vue項目了,用命令
vue init webpack 項目名
可以初始化:
image.png
-
然后根據提示輸入項目名,項目描述和作者信息:
image.png -
出現這個提示,按回車鍵:
image.png -
后面的是否需要安裝XXX全部選
n
image.png -
到這里全部初始化完成
image.png -
這是需要按照他的提示來,
image.png 先進入項目目錄
cd todolist
image.png
- 再安裝依賴項
cnpm install
image.png
等待安裝完成
image.png
-
安裝完成后cnpm run dev 啟動服務器,這是可以訪問http://localhost:8080訪問此項目
image.png -
到此項目初始化完成。
image.png
開始寫吧!
這里可以參考慕課網的相關課程:
戳這里
結束
var author = {
name:'丁波',
GitHub:'dingbo1028',
University:'BNUZ'
}