windows下安裝vue開發(fā)環(huán)境
1、安裝npm
官網(wǎng)node進(jìn)行下載
Node.js 是一個(gè)開源與跨平臺(tái)的JavaScript 運(yùn)行時(shí)環(huán)境。
2、檢測(cè)nodejs安裝
- 當(dāng)執(zhí)行完上步安裝包安裝后，需要進(jìn)行安裝是否成功，win+r打開運(yùn)行，輸入cmd后進(jìn)入命令行界面。分別輸入
node -v和npm -v命令進(jìn)行node的版本號(hào)和npm的版本號(hào)的查看。
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-gLUeSQ9W-1634650540244)(C:\Users\HSLM\AppData\Roaming\Typora\typora-user-images\image-20210824121953527.png)] -
安裝完后的目錄如下圖所示
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-ySjjR1V8-1634650540245)(C:\Users\HSLM\AppData\Roaming\Typora\typora-user-images\image-20210824122032097.png)]
3、配置npm安裝全局模塊路徑與緩存路徑
NPM是隨同NodeJS一起安裝的包管理工具
一般，在進(jìn)行npm install ...等命令全局安裝時(shí)，默認(rèn)的會(huì)將模塊安裝C:\Users\用戶名\AppData\Roaming路徑下的npm和npm_cache中。
此時(shí)可不進(jìn)行修改，但便于對(duì)C盤數(shù)據(jù)進(jìn)行管理，此時(shí)這里配置我們自定義的全局模塊安裝路徑和緩存路徑，在當(dāng)前的nodejs安裝目錄下新建兩個(gè)文件夾，分別為node_global和node_cache`。
此時(shí)需要win+r打開運(yùn)行，輸入cmd進(jìn)入命令行界面，分別輸入以下內(nèi)容執(zhí)行
npm config set perfix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
配置一個(gè)鏡像站，為了提升速度，
輸入命令 npm config set registry=http://registry.npm.taobao.org 配置鏡像站
檢查一下鏡像站行不行命令
npm config get registry
更新一下npm
npm install npm -g
3.1 node環(huán)境變量配置
- 在系統(tǒng)變量中新建
NODE_PATH
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-BLBSC2aB-1634650540246)(C:\Users\HSLM\AppData\Roaming\Typora\typora-user-images\image-20210824122413580.png)]
- 在用戶變量中編輯用戶變量的path，修改對(duì)應(yīng)的npm的路徑值為上文中自定義的
node_global路徑
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-GkavRr0A-1634650540248)(C:\Users\HSLM\AppData\Roaming\Typora\typora-user-images\image-20210824122439338.png)]
4. 安裝Vue
Vue.js（/vju?/，或簡(jiǎn)稱為Vue）是一個(gè)用于創(chuàng)建用戶界面的開源JavaScript框架，也是一個(gè)創(chuàng)建單頁(yè)應(yīng)用的Web應(yīng)用框架。
4.1 安裝vue-cli
vue-cli 是一個(gè)官方發(fā)布vue.js 項(xiàng)目腳手架，一個(gè)專門為單頁(yè)面應(yīng)用快速搭建繁雜的腳手架，它可以輕松的創(chuàng)建新的應(yīng)用程序而且可用于自動(dòng)生成vue和webpack的項(xiàng)目模板。
- 運(yùn)行cmd調(diào)出命令行窗口。命令行里輸入：npm --version，顯示npm版本大于3.0才能安裝vue-cli。
- 輸入npm install -g @vue/cli，這就開始安裝了。
4.2 安裝Vue
npm install vue -g
在global的模塊目錄下就能找到vue
4.3 安裝Vue-router
這里的路由就是SPA（單頁(yè)應(yīng)用）的路徑管理器。再通俗的說(shuō)，vue-router就是WebApp的鏈接路徑管理系統(tǒng)。
npm install vue-router -g
查看vue版本
5 運(yùn)行Demo
切換到根目錄
運(yùn)行命令
npm install -g @vue/cli-init
初始化，安裝依賴
安裝依賴
npm install
運(yùn)行
npm run dev
打包
npm run build
生成靜態(tài)文件，打開dist文件夾下新生成的index.html文件
出現(xiàn)頁(yè)面
如果頁(yè)面空白
運(yùn)行命令
cnpm install -g http-server
再重新打開
6 一些問題
在執(zhí)行命令npm install 出現(xiàn)問題則
報(bào)錯(cuò)原因： 找不到，esbuild/esbuild.exe 這個(gè)文件。
當(dāng)前目錄執(zhí)行下列命令
node ./node_modules/esbuild/install.js
執(zhí)行如下命令，將 npm 下載源改為淘寶的鏡像庫(kù)：
npm install -g cnpm --registry=https://registry.npm.taobao.org
7 安裝Cypress
在你想要放置Cypress的地方建立文件夾
以管理員身份打開命令提示符進(jìn)入該文件夾
然后運(yùn)行npm init 命令
在你之前新建的文件夾下可以看到一個(gè)package.json文件。
在執(zhí)行Cypress的安裝命令
cnpm install cypress --save-dev
在安裝cnpm之后，需要下載的模塊盡量用cnpm下載
