一、node.js安裝以及環境配置
1、下載vue.js
-
下載地址：
https://nodejs.org/en/
2、安裝node.js
-
下載完成后，雙擊安裝包開始安裝，安裝地址最好換成自己指定的地址，
-
這一步根據自己的需要進行選擇，我這里就選的是第一個，網上有些教程說要選中第4個，我這里是要后期需要更換全域模塊所在的路徑，以及快取cache的路徑的，所以在后期需要自己重新配置環境變數，
-
這一步我沒選，直接進行下一步，一直下一步，剩下的都是安裝了，
-
安裝完成之后，node啟動程式會自動添加到系統環境變數path中，這里可自行去查看，
3、檢查node程式是否安裝成功
-
打開cmd視窗輸入node -v 和 npm -v查看node版本和npm版本，如果版本號都能出來，代表安裝成功了
-
在默認下載全域包時，這個包的路徑是放在我c盤下面的，大家可以輸入指令 npm root -g 進行查看，我這里已經更換了目錄，所以不在c盤，接下里就來教大家如何更改
4、更改默認路徑
-
這里主要是配置的是npm安裝的全域模塊所在的路徑，以及快取cache的路徑，因為以后在執行類似：npm install express [-g] 的安裝陳述句時，會將安裝的模塊安裝到C盤的路徑中，占用C盤空間，所以才進行的配置，如果C盤容量足夠，可省略這一步，不影響node使用，
-
打開自己剛剛安裝的node目錄
-
在目錄下新建兩個檔案夾【node_global】和【node_cache 】檔案夾
-
-
再次再次打開cmd命令視窗，輸入npm config set prefix “你的路徑\node_global”（
你的路徑”默認安裝的情況下為 C:\Program Files\nodejs） -
npm config set cache “你的路徑\node_cache” 可直接復制剛剛新建的空檔案夾目錄
-
這里記住了兩次的命令是不一樣的一個是 set prefix 一個是 sex cache ，大家不要為了省事兩次都直接復制粘貼成同一個了
5、添加環境變數
-
點擊下面系統變數里的新建按鈕，添加變數名和變數值然后點擊確定
-
“變數名”欄填寫：NODE_PATH（要大寫，HOME前有下劃線）
-
“變數值”欄填寫：D:\nodejs\node_global\node_modules （node的安裝地址）
-
-
找到系統變數中的Path然后點擊編輯，新建兩個變數，然后確定，第一個是node_global檔案夾目錄，第二是node安裝目錄
5、測驗安裝是否成功
-
根據步驟3：打開cmd輸入node -v 和 npm -v 查看是否有版本號出現，以及輸入命令： npm root -g 查看全域模塊的默認路徑是否已經改變，這里不過多的介紹了，
二、安裝vue-cli腳手架
1、檢查node環境是否安裝好，打開cmd輸入node -v 和 npm -v，如果能出現版本號，說明安裝成功，安裝成功才能進行下一步，
2、更改淘寶鏡像下定制的cnpm (gzip 壓縮支持) 命令列工具代替默認的 npm，打開cmd輸入如下命令：
npm install -g cnpm --registry=https://registry.npm.taobao.org
-
如果安裝失敗，可以使用命令 ：npm cache clean --force 強制執行清理快取，然后再重新安裝，
-
安裝完成之后打開cmd 輸入cnpm -v 查看是否安裝成功，如果出現版本號代表安裝成功
3、開始安裝vue-cli
-
打開cmd輸入如下指令安裝vue-cli
cnpm install -g vue-cli
-
最新的vue專案模塊中，都帶有webpack插件，所以這里就可以不安裝webpack插件，安裝完成后，可以使用 vue -V（注意V大寫）查看是否安裝成功
-
如果出現版本號，則代表安裝成功，如果提示“無法識別 vue”，可以是npm版本過低，可以使用 npm install -g npm 來更新版本
4、生成專案
-
首先需要再命令列中進入到專案目錄，然后輸入：
vue init webpack demo1
-
其中webpack是面板名稱，demo1是自定義專案名稱，命令執行之后，會在當前目錄生成以該名稱命名的專案檔案夾，配置完成后，可以看到目錄下多出了一個專案檔案夾，里面就是 vue-cli 創建的一個基于 webpack 的 vue.js 專案
-
然后進入專案目錄（cd Vue-Project），使用 cnpm 安裝依賴(注意要在有package.json 的目標下運行)
cnpm install
-
然后啟動專案（直接訪問埠號進入測驗demo1）
npm run dev
-
然后打開瀏覽器進入 localhost:8080，如果出現頁面則專案啟動成功，如果沒有加載出頁面，可能是本地8080埠被占用，需要修改一下組態檔 config>index.js
5、打包上線
-
自己的專案檔案都需要放在src檔案夾下，專案開發完成之后可以輸入如下命令來進行打包作業，
npm run build
-
打包完成后，會生成 dist 檔案夾，如果已經修改了檔案路徑，可以打開本地檔案查看，專案上線時，只需要將 dist 檔案夾放到服務器就行了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/419049.html
標籤：其他
上一篇：前端網頁介紹