vue項目環境搭建以及生成一個vue項目

一:使用vue首先要知道幾個東西

1,npm(包管理器)

管理項目中引用的包,感覺有點像後端的maven

以前引用包是使用<script src="">來引用,現在只需要運行npm install ....就可以了

詳細可以看看這個博客 https://blog.csdn.net/qq_37696120/article/details/80507178

2,vue-cli vue腳手架

幫助搭建項目結構,就和後端使用eclipse,idea搭建環境一樣(實際上沒有這些東西自己也能搭建起來,就是要求比較高)

3,node.js(node) vue的運行時環境

(當然他不只是能運行vue還有許多語言也能運行在他上面)由於 .vue結尾的文件不能直接運行在瀏覽器上所以需要一個環境來運行它,有點像java的jvm虛擬機

想要深入瞭解可以看看《深入淺出node.js》這個書,相信會有新的認知

二:下面開始安裝

1,因爲node是vue的運行時環境,因此先安裝node(會默認安裝npm)

進入官網https://nodejs.org/en/download/ (進入官網都不是下面頁面的,點擊上面download就可以跳轉到這頁面)點擊Windows(.msi)的64位安裝

 

下載好之後點擊安裝,一直下一步就好,完成後再cmd中分別運行node -v,npm -v能正常顯示版本號便是安裝成功

接下來如果你不想將日誌和npm安裝的包放在c盤(C:\Users\用戶名\AppData\Roaming\npm),可以跟着做下面的,如果放在默認路徑c盤沒關係,下面不配置也可以。

例如:我希望將全模塊所在路徑和緩存路徑放在我node.js安裝的文件夾中,則在我的安裝目錄下創建兩個文件夾【node_global】及【node_cache】

 

設置全局目錄和緩存目錄,創建完兩個空文件夾之後,打開cmd命令窗口,輸入

將下面兩處的路徑換爲自己的文件路徑

npm config set prefix "D:\NodeJS\node_global

npm config set cache "D:\NodeJS\node_cache"

在自己的node_global目錄下創建一個node_modules文件夾,然後進入環境變量對話框,在【系統變量】下新建【NODE_PATH】,輸入D:\NodeJS\node_global\node_modules。【Path】添加D:\NodeJS\node_global

注意路徑換成自己的

2,vue-cli安裝只需要執行下面命令就可以瞭如果速度慢可以使用阿里的倉庫執行

npm install -g cnpm --registry=https://registry.npm.taobao.org(以後執行命令需要在將npm換成cnpm,不然下載的倉庫還是國外的速度還是慢)

詳情見官網https://cli.vuejs.org/guide/installation.html

npm install -g @vue/cli
如果你將倉庫換成了阿里的 可以執行下面命令
cnpm install -g @vue/cli

到這裏環境就搭建完成了

生成項目

執行

vue create 項目名  或者  vue init webpack項目名 來生成項目

注意 vue create 是vue-cli3.x的初始化方式,vue init 是vue-cli2.x的初始化方式

輸入回車後如果替換了阿里的倉庫會提示是否使用阿里的倉庫輸入Y就好了

之後具體選擇什麼配置就自己選擇就好可以參考

https://blog.csdn.net/liyunkun888/article/details/102738377

生成後 cd  進入項目所在文件夾執行 npm run serve就可以了(不能執行 Dev start默認沒有配置需要自己配置)

在瀏覽器輸入 http://localhost:8080就可以看到創建好的程序了

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章