vue-cli安裝以及搭建vue項目詳細步驟


  •  

    vue init webpack projectname(projectname是你項目的名稱)

    創建項目卡住不動解決方案:

    https://cli.vuejs.org/zh/guide/installation.html

    Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli。 如果你已經全局安裝了舊版本的 vue-cli(1.x 或 2.x),你需要先通過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它。

     

    可以使用下列任一命令安裝這個新的包:

    npm install -g @vue/cli # OR yarn global add @vue/cli

     

    第一步,檢查node.js是否安裝,通過命令提示符,node -v   npm -v查看,如果沒有請先安裝node.js,如下圖.

     

  •  

    第二步,把npm換成cnpm,

    命令工具輸入npm install -g cnpm --registry=https://registry.npm.taobao.org

    然后cnpm -v查看版本,如下圖

     

     

  •  

    第三步,全局安裝webpack,

    使用命令工具輸入cnpm install webpack -g。

    使用webpack -v查看版本

    如果webpack版本4以上,需要安裝webpack-cli 依賴 

    使用命令工具輸入cnpm install webpack webpack-cli -g 如下圖

     

     

  •  

    第四步,安裝vue-cli

    使用命令工具輸入cnpm install vue-cli -g

    使用vue -V(這個V大寫),如下圖

     

     

  •  

    第五步,上面步驟安裝完后,就可以利用vue-cli初始化vue項目

    在你想要安裝項目的而目錄下輸入vue init webpack projectname(projectname是你項目的名稱),

    Project name:——項目名稱

    Project description:——項目描述

    Author:——作者

    Vue build:——構建模式,一般默認選擇第一種

    Install vue-router?:——是否安裝引入vue-router,這里選是,vue-router是路由組件,后面構建項目會用到

    Use ESLint to lint your code?:——這里強烈建議選no 否則你會非常痛苦,eslint的格式驗證非常嚴格,多一個空格少一個空格都會報錯,所以對於新手來說,一般不建議開啟,會加大開發難度

    Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch這兩個是測試,可以不用安裝

    如下圖

     

  • 6

    第六步,選擇上一張圖片的NO,I will handle that myself

    然后輸入cd projectname(你項目名稱)

    然后再輸入cnpm install

    如下圖

     

     

  • 7

    第七步,輸入cnpm run dev

    最后在網址打開http://127.0.0.1:8080/如下圖

     

     

  • 8

    最后附上項目的結構目錄,如下圖

     

  •  


  • 免責聲明!

    本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



     
    粵ICP備18138465號   © 2018-2025 CODEPRJ.COM