使用webstorm開發(fā)Vue應(yīng)用(2019親測)

安裝Node.js

在Node.js官方下載對應(yīng)的版本,在本地安裝即可,在安裝過程中會自動配置到本地的環(huán)境變量

設(shè)置nodejs prefix(全局)和cache(緩存)路徑

在nodejs文件夾中對該文件夾中的node_cache和node_global設(shè)置為默認(rèn)緩存路徑和全局路徑

設(shè)置默認(rèn)文件緩存
npm config set cache "D:\vueProject\nodejs\node_cache"
設(shè)置全局模塊存放路徑
npm config set prefix "D:\vueProject\nodejs\node_global"

配置使用淘寶的鏡像(cnpm)

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

這樣我們就可以使用cnpm命令進(jìn)行下載安裝一些文件了

設(shè)置環(huán)境變量

將cache設(shè)置到path中去
將modules設(shè)置到用戶變量中,并取名“NODE_PATH”

安裝vue

cnpm install vue -g

安裝vue腳手架(vue-cli)

cnpm install vue-cli -g

安裝webpack

這里的-D指的是當(dāng)前的工作環(huán)境下
npm  install -D webpack
還需要一個webpack-cli
npm install -D webpack-cli

測試

webpack -v
vue -V
cnpm -v

創(chuàng)建Vue項(xiàng)目

打開需要創(chuàng)建Vue項(xiàng)目的文件夾
使用以下命令

vue init webpack 項(xiàng)目名
也可以簡單初始化
vue init webpack-simple 項(xiàng)目名
# 這樣創(chuàng)建的項(xiàng)目,目錄結(jié)構(gòu)會比上一種方法簡單的多(其實(shí)實(shí)現(xiàn)還是一樣的,新手建議)

接下來就是我們所說的next-next-next了,但是還是需要了解你都安裝了什么

? Project name demo1
# 確認(rèn)項(xiàng)目名
? Project description A Vue.js project
# 項(xiàng)目描述
? Author ymy
# 作者
? Vue build standalone
# 項(xiàng)目構(gòu)建,編譯+運(yùn)行還是僅允許
? Install vue-router? Yes
# 是否安裝路由
? Use ESLint to lint your code? No
# 時候安裝ESLint
? Set up unit tests No
# 是否安裝單元測試
? Setup e2e tests with Nightwatch? No
# 是否使用NightWatch e2e測試
? Should we run `npm install` for you after the project has been created? (recommended) no
# 時候現(xiàn)在安裝,可以選擇等下自己安裝,然后安裝的時候使用cnpm(記得進(jìn)入項(xiàng)目再執(zhí)行安裝)

使用webstorm

  1. 打開webstorm,使用open,打開這個vue項(xiàng)目
  2. 然后配置npm
    1. 點(diǎn)擊右上角的"服務(wù)器"
    2. 點(diǎn)擊"+",選擇npm
    3. 修改Name和Scripts為dev然后就可以apply-ok了
    4. 然后點(diǎn)擊右邊的運(yùn)行,打開瀏覽器,輸入對應(yīng)的localhost:8080(一般會是這個)看到vue的圖片。恭喜你,OK了

使用webstorm創(chuàng)建vue的時候可能會遇到這樣的問題

如果碰到創(chuàng)建項(xiàng)目時,報錯“can not install 'ij-rpc-client'”,可以在cmd目錄下下載ij-rpc-client,然后重啟就可以了
npm install ij-rpc-client -g
但是如果還是沒解決這個問題的話,推薦使用以下方法創(chuàng)建項(xiàng)目
在cmd中進(jìn)入工作空間,使用vue init webpack 項(xiàng)目名
然后進(jìn)行一些基本操作,在選擇使用什么方式下載的時候,選擇最后一個然后按照提示來操作使用cnpm來下載,這樣等到下載完畢之后就完事了,可以使用npm run dev來加載到服務(wù)器上。然后使用webstorm將這個文件夾打開就完事了

麻煩,操作ok的點(diǎn)個關(guān)注,或者贊給個鼓勵

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容