如何搭建Vue環境?


搭建vue的開發環境:

    https://cn.vuejs.org/v2/guide/installation.html

1、     必須要安裝nodejs

cnpm  下載包的速度更快一些。

    地址:http://npm.taobao.org/

    安裝cnpm:

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

 

       接下來安裝webpack……

       Cnpm install –global webpack

    2搭建vue的開發環境,安裝vue的腳手架工具   官方命令行工具

    npm install --global vue-cli  / cnpm install --global vue-cli

(以上命令只需要執行一次)

    3、創建項目   必須cd到對應的一個項目里面

        vue init webpack vue-demo01

        cd  vue-demo01

        npm install   /  cnpm install   

 

如果創建項目的時候沒有報錯,這一步可以省略。如果報錯了  cd到項目里面運行  cnpm install   /  npm install

 

 

 如果創建項目的時候沒有報錯,這一步可以省略。如果報錯了  cd到項目里面運行  cnpm install   /  npm install

        npm run dev  大功告成!!!

    4、另一種創建項目的方式   推薦

             少了許多語法檢查的提示

        vue init webpack-simple vuedemo02

        cd  vuedemo02

        cnpm install   /  npm install       

        npm run dev

 

老版本安裝項目

 

 

 

 

 

 

 

 

 新版本安裝項目

 

 

 

 

 

 

 附:安裝與卸載老版本的webpack

1.安裝    在全局下安裝:npm  install  webpack  -g            

              安裝指定版本:npm  install  webpack@<version>   -g       

 例如:npm install  webpack@3.4.1  -g

              如果只是用來練習全局安裝就可以了,一開始裝了個4.8.3版本的,node也是最新的npm也好着,一做項目就出現錯誤

4.*.*版本以上還需要安裝另外一個東西,具體的可去webpack官網看。

              最后只能把webpack刪除,重新裝了一個指定版本的,才沒有什么問題了。

2.刪除     在全局下刪除    npm  uninstall  webpack  -g

              最好將項目目錄下的node-modules一起刪除,否則會有殘留文件影響下一次的結果。

查看node版本: node -v

查看npm版本:npm -v

查看cnpm版本:cnpm -v

查看vue-cli版本:vue -V (大寫)   vue --version

查看webpack版本:webpack –v

 

vue-cli2級到vue-cli3相關操作步驟

 1 卸載老版本的vue-cli

     Npm uninstall vue-cli –global

2安裝vue-cli3

Npm install  @vue/cli  -g

3.調用圖形界面

 

     Vue  ui 擊創建新項目,按照圖形界面操作,本步操作so easy!

 

 

 

 

 

 

 

 

 

 

 運行任務:

 

 

 感謝觀看,批評指導


免責聲明!

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



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