1. 程式人生 > >vue之安裝nodejs安裝npm安裝cpnm安裝vue-cli腳手架

vue之安裝nodejs安裝npm安裝cpnm安裝vue-cli腳手架

搭建vue開發環境。

安裝過程:下一步 路徑:(我的D:\Develop\nodejs)下一步就好

安裝好之後,對npm安裝的全域性模組所在路徑以及快取所在路徑,進行環境配置。是因為以後在執行類似:npm install express [-g](後面的可選引數-g,g代表global全域性安裝的意思)的安裝語句時,會將安裝的模組安裝到【C:\Users\使用者名稱\AppData\Roaming\npm】路徑中,佔C盤空間。
例如:我希望將全模組所在路徑和快取路徑放在我node.js安裝的資料夾中,則在我安裝的資料夾【D:\Develop\nodejs】下建立兩個資料夾【node_global】及【node_cache】


開啟cmd輸入如下命令

npm config set prefix "D:\Develop\nodejs\node_global"
npm config set cache "D:\Develop\nodejs\node_cache"

接下來點選 我的電腦,屬性,高階系統設定

1.新建系統變數

輸入NODE_PATH
輸入D:\Develop\nodejs;D:\Develop\nodejs\node_global\node_modules    (node安裝地址跟自定義地址 用;分開)

2.修改使用者變數path

%NODE_PATH%;D:\Develop\nodejs\node_global   (加%NODE_PATH%是為了防止 cmd找不到node報錯)

然後儲存,對....

3、基於nodejs,利用淘寶npm映象安裝相關依賴。

由於國內使用npm會很慢,這裡推薦使用淘寶nmp映象 開啟cmd

完成之後,我們就可以使用cnpm代替npm來安裝依賴包了。

到這裡測試下node  cnpm有沒有問題:  node -v   cnpm -v

ps:解決cnpm不是外部命令:

之前安裝npm的時候,配置過node_modules和node_cache。所以去nodejs的目錄下去找cnpm裝哪個資料夾去了。

我的是D:\software\nodeJS\node_cache

本資料夾下開啟cmd 執行cnpm -v

ok,現在去配置系統環境path,把cnpm安裝路徑加入path裡,如下圖。

ok到這裡問題就解決了,可以直接win+r開啟cmd 跑下cnpm -v ,樓主是沒有問題的。

4、為什麼安裝vue-cli腳手架---為了生成vue工程模板

安裝全域性vue-cli腳手架,用於幫助搭建所需要的模板框架 輸入 cnpm install -g vue-cli

安裝完成之後
輸入vue測試一下

出現了vue資訊說明表示成功
用vue-cli構建專案

檢視vue版本vue -V   這個V是大寫的 不讓會報錯

5.打包工具webpack   中文網址:https://www.webpackjs.com/  最近也在研究這東西  感覺逼格很高

6.建立專案

(1)本地建立目錄

(2)cmd 開啟本地,目錄E盤下www裡的fristvue    注:正確的命令格式是:cd/d E:\www\firstvue

下面這張圖是預設地址的截圖:

? Project name one  一般直接回車 
? Project description A Vue.js project  專案說明
? Author wxj  開發者
? Vue build standalone 預設回車
? Install vue-router? Yes 個人建議Y
? Use ESLint to lint your code? No 是否啟用eslint檢測規則,個人建議不使用
? Set up unit tests No  是否建立單元測試
? Setup e2e tests with Nightwatch? No 
? Should we run `npm install` for you after the project has been created? (recommended) npm

7、專案建立完成後,目錄結構如下:

8、安裝專案所需依賴,進入專案中:

?

1

npm install

完成後,會發現專案目錄下多出一個node_modules資料夾,裡面就是 vue-cli 建立的一個基於 webpack 的 vue.js 專案。

9、進入專案目錄資料夾(my-project)中,就可以使用vue進行開發啦

10、使用npm run dev,便可以開啟本地伺服器實時檢視效果(localhost:8080)

如果瀏覽器開啟之後,沒有加載出頁面,有可能是本地的 8080 埠被佔用,需要修改一下配置檔案 config>index.js

建議將埠號改為不常用的埠。另外我還將 build 的路徑字首修改為 ' ./ '(原本為 ' / '),是因為打包之後,外部引入 js 和 css 檔案時,如果路徑以 ' / ' 開頭,在本地是無法找到對應檔案的(伺服器上沒問題)。所以如果需要在本地開啟打包後的檔案,就得修改檔案路徑。

11、初始效果

12,退出監聽,可以直接Ctrl+C,選擇Y。

參考:https://www.cnblogs.com/guoyinglichong/p/8278467.html    http://www.jb51.net/article/113890.htm