搭建Vue開發環境的過程


說明

由於不想按照vue文檔上說的,起步學習。決定首先學習vue環境的搭建。
按文檔上說的命令行的操作,相對簡單一點,但是這樣操作下去對環境
搭建的原理是不清楚的。俗話說好奇心害死人,於是就開始研究node等相關
知識了。

  • 研究node

首先去看了朴靈
的深入淺出node,一頭扎進入,覺得寫的有點深,理解起來費勁,不適合我這種
剛入門的菜鳥。於是在各大論壇上問入門node的資料,感謝微信群里面的一個好友
分享了一個連接,名字叫nodejs保教不會,我用的那個連接是一個github倉庫
地址,周末在家碼字連接在公司,想知道的話直接百度就可以了。這個倉庫里的
教程比較適合入門,但是讀下來有點虎頭蛇尾的感覺,想對node深入了解,那是
需要工作積累的,但是用於理解搭建前段的開發環境已經夠了。

  • 研究webpack

研究完node,只是對node的基本用法和npm版本和倉庫管理有了初步的認識。
但是對於前端工程的打包,部署,測試等技術還是理解的不夠深入。看了vue
的文檔,要學習webpack,node學習完之后就立刻去學習了。學習的過程很簡單
讀了一篇很好的博客感興趣的可以去好好讀一下,相信用心讀過之后對webpack技術會有一個比較
初步的了解。之前在公司經常用gulp,所以對我來說理解webpack也相對來說
容易了些。

  • 開發工具,版本管理工具
    這次開發工具接着用我經常使用的IntelliJ IDEA ,如果非得解釋一下開發
    vue也要用它的話,很簡單:這個工具開發java很好用,我是java工程師嘛。
    但是不僅僅是這些,這個工具對前端語言的支持一點也不差,就選它了。
    版本管理就選git了,用完git再也回不到svn了。

  • 在idea里面搭建環境

首先在github上創建倉庫,用ideacheck到本地來,在idea 里面的
Terminal里面,在自己項目根目錄下面運行如下腳本(運行如下腳本前要安裝node和npm):

    //設置npm倉庫鏡像為國內淘寶鏡像
    npm config set registry https://registry.npm.taobao.org
    //查看配置是否成功
    npm config get registryf
    //全局安裝webpack
    npm install -g webpack
    //全局安裝 vue-cli
    npm install-global vue-cli
    //創建一個基於webpack模板的項目
    vue init webpack my-project
    //cd my-project,這一步會等很久
    npm install
    //這一步看着簡單,實際上都在配置文件里面配好了,可以去研究一下
    npm run dev

接下來我的瀏覽器就彈出了搭建成功后的首頁,開心。從研究node到這一步用了
將近兩個星期的時間,當首頁彈出時還是很開心的,這對我來說就是樂趣所在。
加油


免責聲明!

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



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