作為一個本來是java開發的搬運工,在公司前端人員缺乏的時候,就直接頂上來開發前台頁面了(話說我已經很久很久沒寫java代碼了(;′⌒`))
好吧言歸正傳,剛開始弄前台就是vue,vue2還沒弄熟,老板說vue-cli3出來了,你要不用最新的吧,下面就是踩過的坑
-------------------------------------------第一步-------------------------------------------
首先vue-cli3對node版本要求比較高,需要8.9以上的(我的正好是8.9.3,所以沒去弄node了省事了)
不過你也可以用nvm去管理node這樣比較方便點,隨時切換版本
關於舊版本vue-cli已經改成了@vue/cli
如果你已經全局安裝了舊版本,你需要先卸載一下
命令是:npm uninstall vue-cli -g
然后安裝新包
命令是:npm install @vue-cli -g
安裝后:vue -V 查看一下版本,檢查一下你是否安裝成功
-------------------------------------------第二步-------------------------------------------
就是創建項目了,vue3搞了兩種方式創建項目,一種是和以前一樣的命令,還有就是在瀏覽器里一圖形化創建
命令創建:vue create hello-word
圖像化創建:vue ui 這個時候瀏覽器就會打開一個窗口
我用的命令創建
1選: Manually select features
2選:(空格鍵是選擇/取消 要裝的東西,上下鍵滑動)回車確定下一步
3選:選擇n
4選:你也可以選擇less,看個人需求吧
5選:這里選的ESLint+Prettier
6選:Lint on save
7選:
8選:是否保存這次安裝記錄作為下次安裝
這里之后就開始安裝中了......
------------------------------第三步---------------------------------
裝好之后,命令切到hello-world項目目錄下
運行命令:npm run serve
@vue/cli3搭建的新項目,沒有vue-cli2 的build和config文件夾
所以有什么配置可以在根目錄新建一個vue.config.js寫上配置項
這里是修改接口和關閉eslint檢查
module.exports = {
lintOnSave: false,
devServer: {
port: 8081
}
}
-------------------------------------------------------------------
可能裝的過程沒那么順利,建議先以管理員身份打開命令行
當我安裝國際化i18n時報了個錯
npm install 報錯sill pacote range manifest for hmac-drbg@^1.0.0 fetched
使用 https://registry.npmjs.org/ 也報錯
使用 npm config set registry http://registry.cnpmjs.org/后就不報錯了。
npm install --registry=https://registry.npm.taobao.org
-------------------------------------------------------
補充-----還有vue3在創建項目里中報這個錯:
ERROR command failed: npm install --loglevel error --registry=https://registry.npm.taobao.org --di
我搜了很多最終用下面這個方法解決了
打開這個文件
這個值開始是true,改成false再重新創建項目就ok了
親測有效!!!!!!!!