vue 專案執行步驟
首先,列出來我們需要的東西:
node.js環境(npm包管理器)
vue-cli 腳手架構建工具
cnpm npm的**映象
安裝node.js
安裝完成之後,開啟命令列工具,輸入 node -v,如下圖,如果出現相應的版本號,則說明安裝成功。
npm包管理器,是整合在node中的,所以,直接輸入 npm -v就會如下圖所示,顯示出npm的版本資訊。
ok!node環境已經安裝完成,npm包管理器也有了。由於有些npm有些資源被遮蔽或者是國外資源的原因,經常會導致用npm安裝依賴包的時候失敗,所有我還需要npm的國內映象---cnpm。
安裝cnpm
在命令列中輸入 npm install -g cnpm --registry= 然後等待,安裝完成如下圖。
最後發現是npm版本過高,需要降低版本 npm install npm@4.6.1 -g
再安裝**映象就成功了。
完成之後,我們就可以用cnpm代替npm來安裝依賴包了。如果想進一步了解cnpm的,檢視**npm映象官網。
安裝webpack
npm install webpack -g
這裡也出現了問題,檢查版本時出錯webpack -v
但是出現了問題:webpack新版不能直接使用webpack這個命令,已經分離到了webpack-cli之中。但四使用webpack-cli還是不能使用,有很多坑。採用降級,我使用了3.5.3版,這個版本是好的。可以直接用webpack命令。
所以我就把剛剛的解除安裝了,安裝了指定版本的
npm uninstall webpack -g //解除安裝原來的
npm install webpack@3.5.3 -g
安裝vue-cli
cnpm install vue-cli -g
這個過程會耗時十幾秒,等走完就好
好了,到此整個環境就搭建好了
安裝專案所需的依賴
要安裝依賴包,首先cd到專案資料夾(firstvue資料夾),然後執行命令 cnpm install ,等待安裝。
注意這裡不要用npm install,不穩定會導致出錯
安裝完成之後,會在我們的專案目錄firstvue資料夾中多出乙個node_modules資料夾,這裡邊就是我們專案需要的依賴包資源。
執行專案
在專案目錄中,執行命令 npm run dev ,會用熱載入的方式執行我們的應用,熱載入可以讓我們在修改完**後不用手動重新整理瀏覽器就能實時看到修改後的效果。
這裡簡單介紹下 npm run dev 命令,其中的「run」對應的是package.json檔案中,scripts欄位中的dev,也就是 node build/dev-server.js命令的乙個快捷方式。
專案執行成功後,瀏覽器會自動開啟localhost:8080(如果瀏覽器沒有自動開啟,可以手動輸入)。
Vue執行流程解析
引言 相信絕大多數的前端小夥伴已記不清做了多少專案,寫了多少 了,每個人如同教科書般地寫著vue 單檔案元件中常見 export default methods 入口檔案中的常見 new vue 一切都顯得那麼自然。不過在百忙之中是否有小夥伴想過,乙個小小的vue例項怎麼有這麼大的能量,竟然可以構建...
vue專案執行
執行vue專案需要 1 node.js環境 npm包管理器 2 vue cli 腳手架構建工具 3 cnpm npm 的 映象 一 安裝node.js 安裝完成之後,開啟命令列工具,輸入node v,出現相應的版本號,則說明安裝成功 npm 包管理器,是整合在 node 中的,所以直接輸入 npm ...
執行vue專案
windows系統搜尋cmd node v 檢查版本 安裝成功之後就會顯示 安裝cnpm.npm install g cnpm registry 因為npm是國外的,所以在安裝的時候回比較慢,需要安裝 團隊開發的cnpm.安裝webpack npm install webpack g 安裝vue c...