vue環境搭建具體步驟詳解

1⃣️:安裝node.js;

2⃣️:安裝淘寶鏡像(npm);(在用vue構建大型應用時用npm安裝,npm能很好的和webpack或Broweserify模塊打包器配合使用,同時vue也提供配套工具來開發單文件組件)

        在終端輸入:npm install  -g cnpm --registry=http://registry.npm.taobao.org

  注:npm:(node package manager)node的包管理工具,用於node插件管理,安裝,卸載管理依賴等;

  nvm:  node.js 版本管理工具,管理node版本和npm版本;

3⃣️:使用npm安裝插件:

          命令提示執行npm install [-g] [-save-dev] : node 插件名稱;

       例:npm install gulp -less -save -dev (-g: 是全局安裝)

            (將會安裝在 c:user\Administator\AppData\Roaming\npm. 並且寫入系統環境變量)

      非全局安裝:將會安裝在當前定位目錄;

      全局安裝:可以通過命令在任何地方調用它;

      本地安裝:將安裝在定位目錄的node_modules文件夾下通過require()調用;

       -save:將保存在配置信心至package.json (pakage.json)是node.js項目配置文件;

       -dev:  保存至package.json的devDependencies節點(不指定-dev將保存至dependencies節點)

爲什麼要保存至package.json?

      因爲node插件包相對來說非常龐大,所以不加入版本管理,將配置信息寫入package.json並將其加入版本管理,其他開發者對應下載即可(名令提示符執行npm insatall則會根據package.json下載所有需要的包)

     使用npm卸載插件:

      npm update[-g] [-save -dev]

(不要直接刪除本地插件包);

使用npm 更新插件:npm update [-g] [-save -dev]

更新全部插件: npm update[ -save -dev]

查看npm 幫助 npm help;

查看當前目錄已安裝插件: npm list

cnpm:

     因爲npm安裝摻進啊是從國外服務器下載受網絡影響大可能出現異常,如果npm的服務器在中國就好了,所以我們樂於分享的淘寶團隊幹了這事,來自官網的一個完整(npmjs.org)鏡像;

安裝完後最好查看cnpm -v或關閉命令提示符重新打開,安裝完直接使用可能會出現錯誤;

cnpm跟npm的用法完全一致,只是在執行命令時將npm改成cnpm;

注:vue裏腳手架(vue cli)安裝一次就可以了;

    安裝vue cli命令:npm install --global vue-cli;

(vue-cli 號稱vue全家桶,本滴運行環境即使由它創建);

vue-cli腳手架的作用:

   在vue裏腳手架幫助我們編寫號基礎的代碼;

可以幫助我麼創建好:目錄結構、本地調試、熱加載、單元測試;

     安裝過腳手架之後就可以直接建項目了: vue inst webpack  項目名  ;

   如果環境已經搭建好需要運行一個項目有三個步驟:

  1、進入項目;

  2、安裝依賴(即輸入命令 cnpm install)

  3、運行npm run dev

   如果項目已經安裝過依賴直接運行項目就行了

  安裝過依賴的項目會在文件裏生成一個node_modules文件夾;

注:node -v:檢查node版本號;

        npm -v: 檢查npm包版本號;

 

 

 

 

 

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