vue使用--環境搭建與基本項目建立說明

 

桃之夭夭，思緒紛飛。

 

1、環境搭建

---

 

1.安裝node.js（包含包管理工具npm）

   安裝包能夠到node官網進行下載，穿梭>>>

   根據本身的操做系統下載相應版本的安裝包，運行後按照操做提示進行便可

   測試是否安裝成功：在命令提示符下輸入 ‘node -v、npm-v’，正確顯示版本號即爲安裝成功。

　　

2.安裝cnpm（淘寶鏡像，可不安裝）

   因爲npm安裝插件訪問的是國外的服務器，受網絡等影響較大，可能會出現沒法訪問或安裝過慢的問題，cnpm爲淘寶團隊免費提供的完整npmjs.org鏡像，以10分鐘的頻率與官網服務器同步，插件安裝穩定、下載速度快

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

   安裝完成後，咱們就可使用cnpm代替npm進行插件的下載等操做

3.安裝webpack

   模塊打包器

   命令： npm install webpack -g  / 若是安裝的淘寶鏡像，可使用 cnpm install webpack -g

   可以使用‘webpack -v’檢查是否安裝成功

4.安裝vue-cli

　vue腳手架，vue.js開發的標準工具，介紹可參考這篇文章>>>vue-cli最全解析

   命令：npm install vue-cli -g    /若是安裝了淘寶鏡像，可使用 cnpm install vue-cli -g

　檢查安裝： Vue -V   （注意V是大寫）

 

2、建立vue項目

---

1. 命令：vue init <template-name> <project-name>

   模板通常選擇webpack便可，項目名稱本身起，例如咱們起名vuedemo，則安裝命令爲：vue init webpack vuedemo

   安裝截圖以下：

  

2.選項介紹

   > Project name：項目名稱，可不寫默認命令中的項目名，注意不能使用大寫字母

   >Project description：項目描述

   >Author：做者

   >Vue build：構建，咱們選擇runtime+（standalone）便可，還有一個選項是runtime-only

   >Install vue-router：是否安裝vue路由，選擇是

   >Use ESLint to。。：是否用ESLint來限制你的代碼錯誤和風格

   >unit tests，單元測試，根據本身項目須要，這裏示例項目選no

   >Setup e2e。。：是否安裝e2e來進行用戶行爲模擬測試

   >Should we run npm。。。：使用哪一種方式安裝依賴包，有三個npm、yarm、self（後期本身決定），示例項目選擇npm

   好了，接下來，等待安裝完成便可

3.運行

   安裝完成後，使用命令：cd <project name> 進入項目目錄，運行命令 npm run dev

   等待出現提示your application is running here：localhost:端口，在瀏覽器訪問，顯示以下便可

  

4.安裝過程異常處理

   新建立項目報錯：npm ERR! Unexpected end of JSON input while parsing near

   參考解決方案，傳送>>>

   個人解決流程：

   》刪除緩存文件

   》執行清理緩存

   》從新安裝