vue開發環境搭建

  • 2019 年 12 月 7 日
  • 筆記

首先,列出來我們需要的東西:  node.js環境(npm包管理器) vue-cli 腳手架構建工具

cnpm npm的淘寶鏡像

vue的安裝 1.vue的安裝依賴於node.js,所以先安裝過node.js。從node.js官網下載並安裝node,安裝過程很簡單,一路「下一步」就可以了(傻瓜式安裝)安裝完成後可進入cmd編輯器,輸入命令 node -v進行查看,如果成功安裝node會出現 v 6.9.1

2.安裝cnpm 在命令行中輸入 npm install -g cnpm –registry=http://registry.npm.taobao.org 然後等待,安裝完成後可進入cmd編輯器,輸入命令 cnpm -v進行查看,如已成功安裝node會出現 v 6.9.1如果想進一步了解cnpm的,查看淘寶npm鏡像官網 後,就可以開始vue的安裝了。這裡提一下淘寶鏡像,用淘寶鏡像的cnpm來代替npm的安裝,速度會快很多。如果使用淘寶鏡像安裝就輸入命令行 $ cnpm install -g vue-cli進行安裝,如果沒有安裝淘寶鏡像依舊用$ npm install -g vue-cli安裝: 輸入命令 cnpm -V 出現4.4.0代表淘寶鏡像安裝成功 輸入命令 vue -V 出現2.5.0代表VUE安裝成功 3.可以開始建立一個vue項目啦 #全局安裝 vue-cli npm install –global vue-cli #創建一個基於webpack模板的項目 文件夾名myproject vue init webpack myproject #安裝依賴 cd myproject npm install npm run dev 4.輸入http:lobalhost:8080出現以下頁面就代表成功嘍 5.如果想訪問項目中的某一個頁面,請找到router這個js

輸入http://localhost:8080/#/login便可訪問想要訪問的頁面

如果是下載的項目有依賴包

安裝項目所需的依賴 要安裝依賴包,首先cd到項目文件夾(firstVue文件夾),然後運行命令 cnpm install ,等待安裝。 安裝完成之後,會在我們的項目目錄firstVue文件夾中多出一個node_modules文件夾,這裡邊就是我們項目需要的依賴包資源。

安裝完依賴包之後,就可以運行整個項目了。

運行項目 在項目目錄中,運行命令 npm run dev ,會用熱加載的方式運行我們的應用,熱加載可以讓我們在修改完代碼後不用手動刷新瀏覽器就能實時看到修改後的效果。 這裡簡單介紹下 npm run dev 命令,其中的「run」對應的是package.json文件中,scripts字段中的dev,也就是 node build/dev-server.js命令的一個快捷方式。 項目運行成功後,瀏覽器會自動打開localhost:8080(如果瀏覽器沒有自動打開,可以手動輸入)。