安裝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
- 打開webstorm,使用open,打開這個vue項(xiàng)目
- 然后配置npm
- 點(diǎn)擊右上角的"服務(wù)器"
- 點(diǎn)擊"+",選擇npm
- 修改Name和
Scripts為dev然后就可以apply-ok了 - 然后點(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)注,或者贊給個鼓勵