vue 2.9的配置 (二 : vue的安裝 和vue-devtools的配置)

在用 Vue 構建大型應用時推薦使用 NPM 安裝。NPM 能很好地和諸如 webpack 或 Browserify 模塊打包器配合使用。同時 Vue 也提供配套工具來開發單文件組件

通過終端安裝vue :cnpm install -g vue

安裝命令行工具 (CLI)

Vue 提供一個官方命令行工具,可用於快速搭建大型單頁應用。該工具爲現代化的前端開發工作流提供了開箱即用的構建配置。只需幾分鐘即可創建並啓動一個帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目:

# 全局安裝 vue-cli

cnpm install -g vue-cli

安裝完後,檢查vue是否正確安裝  

vue -V



接下來 安裝webpack,打開命令行工具輸入:cnpm install webpack -g

安裝完成之後輸入 webpack -v,如下圖,如果出現相應的版本號,則說明安裝成功。

按照提示繼續安裝webpack-cli

cnpm install webpack-cli -g -d



打包工具安裝完成。


配置瀏覽器插件:cue-devtools

藉助vue-devtools插件,我們就可以很容易的對數據結構進行解析和調試。

一:下載地址:

二:cnpm install

下載完成後打開命令行cmd進入vue-devtools文件夾,安裝依賴包  cnpm install

然後 cnpm run build     build一下。

三:打開 shells>chrome>src>manifest.json並把json文件裏的"persistent":false改成true



四、擴展chrome插件

chrome瀏覽器

1.打開chrome瀏覽器,打開設置>點擊或者程序>點擊開發者模式

2.再點擊加載已解壓的擴展程序,然後把shell>chrome文件夾放入


360極速瀏覽器

1.打開360瀏覽器,打開工具>管理擴展

2.再點擊加載已解壓的擴展程序,然後把shell>chrome文件夾放入




最後

打開個vue寫的項目,f12打開調試工具即可進行vue項目的調試。



下一篇 :vue 2.9 創建第一個vue項目(包括 vscode工具 針對vue的配置 )




發佈了38 篇原創文章 · 獲贊 96 · 訪問量 18萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章