vue-cli起項目步驟

1.全局安裝 vue-cli

老版本：npm install -g vue-cli  (npm uninstall vue-cli -g 卸載)

新版本：npm install -g @vue/cli

 

安裝淘寶cnpm鏡像

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

 

2.建立一個基於webpack模板的新項目

老版本：vue init webpack my-blog

新版本：vue create ele-app

 

3.一路No 

4.cd my-blog

5.npm run dev(npm run serve)

 

安裝axios

npm install --save axios 

安裝vuex

npm install vuex --save

安裝路由 

npm install vue-router --save

安裝better-scroll（移動端滾動）

npm install better-scroll --save / cnpm i -S better-scroll

安裝element-UI

npm i element-ui -S

安裝mint-UI

npm install mint-ui -S

 

 

1、 安裝 node.js

安裝完成後，能夠命令行工具中輸入 node -v 和 npm -v，若是能顯示出版本號，就說明安裝成功。

2、安裝webpack

npm install webpack -g

安裝完成後使用webpack -v，若是出現相應的版本號，則說明安裝成功。

3、安裝 vue-cli

npm install -g vue-cli

安裝完成後，可使用 vue -V （注意 V 大寫）查看是否安裝成功。

若是提示「沒法識別 'vue' 」 ，有多是 npm 版本太低，可使用 npm install -g npm 來更新版本

4、使用vue-cli來構建項目

　　一、在硬盤中找一個放項目的文件夾

　　二、在文件夾下打開命令盤，輸入命令

　　Vue-Project是咱們本身設置的項目名稱，項目名稱不能用中文

vue init webpack Vue-Project

　　三、進入項目工程目錄

　　四、安裝項目所需依賴  npm install

　　五、安裝 vue 路由模塊 vue-router 和網絡請求模塊 vue-resource

npm install vue-router vue-resource --save

建立完成的項目目錄，以下圖

各個目錄的做用

 

最後一步啓動項目

npm run dev

啓動成功，打開瀏覽器8080窗口，頁面如圖所示