準(zhǔn)備工作

在本地用vue-cli新建一個(gè)項(xiàng)目

一、 node安裝

? 1）如果不確定自己是否安裝了node,可以在命令行工具內(nèi)執(zhí)行： node -v ?（檢查一下 版本）；

2）如果 執(zhí)行結(jié)果顯示： xx 不是內(nèi)部命令，說明你還沒有安裝node , node 安裝地址：http://nodejs.cn/download/

二、 vue-cli 全局安裝

?命令行執(zhí)行 : npm install -g vue-cli ???// 加-g是安裝到全局

安裝完成以后?可以輸入命令?：vue -V 回車，可以看到針對vue的版本號，如果打出來版本號后說明已經(jīng)安裝成功

**:?如果npm在國內(nèi)的網(wǎng)絡(luò)環(huán)境下可能會比較慢，解決方案：

使用淘寶鏡像:

1>.官方網(wǎng)址：http://npm.taobao.org；

2>.安裝：npm install cnpm -g --registry=https://registry.npm.taobao.org； ?注意：安裝完后最好查看其版本號cnpm -v或關(guān)閉命令提示符重新打開，安裝完直接使用有可能會出現(xiàn)錯(cuò)誤；

3>.注：cnpm跟npm用法完全一致，只是在執(zhí)行命令時(shí)將npm改為cnpm（以下操作將以cnpm代替npm）。

4> 如何更新npm的方法： ?可以使用 npm install -g npm 來更新版本

三、初始化項(xiàng)目

執(zhí)行命令： vue init webpack vue-demo(你新建的項(xiàng)目名稱/文件名稱)

執(zhí)行之后將會 自動(dòng)初始化一個(gè)文件夾 ：vue-demo

手動(dòng)打開vue-demo? ?,可以看到已經(jīng)初始化好一個(gè)基本的項(xiàng)目了

四、啟動(dòng)項(xiàng)目

? 如下圖所示，執(zhí)行初始化項(xiàng)目以后，下面會有對應(yīng)的命令：

繼續(xù)執(zhí)行： cd vue-demo (這是進(jìn)入到vue-demo文件夾的命令)

然后執(zhí)行 安裝相關(guān)依賴：npm install??

注： npm install 執(zhí)行可以進(jìn)行vue已經(jīng)vue的插件安裝，在第三步的時(shí)候，已經(jīng)初始化了項(xiàng)目，并且在 package.json 里面已經(jīng)有相關(guān)配置，所以在這里可以直接安裝；

?安裝完成之后再執(zhí)行命令： npm run dev?

整個(gè)項(xiàng)目就已經(jīng)啟動(dòng)了：

五、項(xiàng)目文件配置介紹

build 和 config ?是關(guān)于webpack的配置，里面包括一些server,和端口；

node_modules: 安裝依賴代碼庫；

src : ?存放源碼；

static：存放第三方靜態(tài)資源的，static里面的.gitkeep，如果為空，也可以提交到gitHub上面，正常情況下，是不可以提交的。

?.babelrc:把es6文件編譯成es5

以上 vue-cli腳手架安裝完成

文章轉(zhuǎn)自：https://www.cnblogs.com/loveyaxin/p/7094089.html