Vue的安裝和使用

1、安裝Vue

• 安裝環境

  Node.js： http://nodejs.cn/download/
  (就無腦安裝，下一步就好，安裝在自己的環境目錄下)

• 確認nodejs安裝成功：
  • cmd 下輸入node -v，檢視是否能夠正確打印出版本號即可！
  • cmd 下輸入npm -v ，檢視是否能夠正確打印出版本號即可！
  • 這個npm，就是一個軟體包管理工具

• 安裝Node.js 淘寶映象加速器（cnpm）這樣子的話，下載會快很多~~

# –g  就是全域性安裝
npm install cnpm -g
# 或使用如下語句解決npm速度慢的問題
npm install --registry=https://registry.npm.taobao.org
 

• 安裝vue-cli

cnpm install vue-cli -g
# 測試是否安裝成功
# 檢視可以基於哪些模板建立vue 應用程式，通常我們選擇webpack
vue list

2、vue-cli應用程式

咱們這兒安裝的版本，支援視覺化建立專案，但此處不做介紹，需要請自學！！！

1.建立一個Vue專案，我們隨便建立一個空的資料夾在電腦上，我這裡在D盤下新建一個目錄

2.建立一個基於webpack模板的vue應用程式

• vue init webpack 專案名

• 安裝元件（外掛）axios、vue-router、element-ui、vuex

  • npm install axios -s

  • npm install vue-router --save-dev

  • npm i element-ui -S

  • npm install vuex --save

• 安裝依賴

  • npm install（或cnpm install）

• 如果npm安裝不成功，就使用cnpm

• 進入專案路徑下，然後啟動該專案

3、使用IDEA開啟（接管）剛才的“Vue-Online”專案

• 完成Maven相關配置：https://www.cnblogs.com/mc-blog/p/15130344.html（JDK版本不同，自行修改）

• 使用IDEA開啟Vue-Online專案，然後安裝Vue外掛

• 如果外掛一直搜不到，請把檔案“vuejs”複製到自己的IDEA安裝路徑下的

• 完成後重啟IDEA，新建Vue檔案時，顏色會從灰色變成綠色，此時所有工作都已完成！

4、使用IDEA啟動Vue專案