vue-cli webpack在node環境下安裝使用

来源:http://www.cnblogs.com/sunsanfeng/archive/2017/04/22/vue_cli.html
-Advertisement-
Play Games

第一步,需要下載並安裝node.js以及他的npm組件; 第二步,用node -v;npm -v來測試node.js以及npm是否安裝成功(建議用GIT命令行工具,因為GIT是linux系統),如果顯示出它的版本,說明已經安裝成功,如下圖; 第三步,下載vue-cli,在命令行中輸入npm inst ...


  第一步,需要下載並安裝node.js以及他的npm組件;

  第二步,用node -v;npm -v來測試node.js以及npm是否安裝成功(建議用GIT命令行工具,因為GIT是linux系統),如果顯示出它的版本,說明已經安裝成功,如下圖;

  

  第三步,下載vue-cli,在命令行中輸入npm install -g vue-cli,自動下載vue-cli(會生成一大堆的依賴文件)如下圖;

  

  第四步,命令行中輸入vue,測試vue是否安裝成功,安裝成功,如下圖;

  

  第五步,命令行vue list看vue中有哪些子類,如下圖;

  

  第六步,用vue init webpack ***命令行,下載webpack包,(***代表項目的名字,為英文,如sanfeng1)如下圖;

  

    在安裝時會詢問你,①、Project name (sanfeng1);項目名稱(sanfeng1)。(確定按enter,否按N)

             ②、 Project description (A Vue.js project);項目描述(一vue.js項目)。(隨意輸入一段簡短介紹,用英文)

             ③、Author (sunsanfeng);作者(sunsanfeng)。(確定按enter,否按N)

             ④、Vue build (Use arrow keys)> Runtime + Compiler: recommended for most usersRuntime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render         functions are required elsewhere;Vue公司的建立(使用箭頭鍵)>運行時+編譯器:大多數用戶推薦運行時間:約6kb輕民+ gzip,但模板(或任何Vue具體HTML)只允許在。VUE文件渲染功能是必需的其他地方。(按enter)

             ⑤、Install vue-router? (Y/n);安裝的路由?(/ N)。(可安可不安,以後也可以再安,根據需求選擇)

            ⑥、Use ESLint to lint your code? (Y/n);使用ESlint語法?(Y/ N)。(使用ESLint語法,就要做好心理準備,除非你非常懂ESLint語法,要不就會處處報錯,我就被逼瘋過,建議N)

            ⑦、Setup unit tests with Karma + Mocha? (Y/n);設置單元測試?(Y / N)。(選N)

            ⑧、Setup e2e tests with Nightwatch? (Y/n);Nightwatch建立端到端的測試?(Y / N)。(選N)

      出現如下圖,說明已經安裝成功;

      

  預設情況下,webpack安裝的是最新版本的,如果要安裝其他版本,使用命令行vue init webpack#1.0 ***就可以了。

  第七步,進入我們剛纔創建的項目,cd sanfeng1,並安裝依賴npm install,安裝成功,如下圖;

  

  第八步,運行這個項目 npm run dev運行成功,如下圖;

  

  在瀏覽器打開地址以及埠號,就可以看見我們的項目了。

  

 

 

  

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1 //閉包實現累加功能 2 function fn1() { 3 var n = 1; 4 add = function() { 5 n += 1; 6 } 7 8 function fn2() { 9 n += 1; 10 ... ...
  • jquery 的 each 方法中 return 的坑 Chapter 0 在項目中使用 jquery 的 each 方法時想在 each 的迴圈中返回一個布爾類型的值於是掉進一個坑中... Chapter 1 最初的代碼: 這裡的代碼,雖然return 了,但是並未實際 return 值作為方法的 ...
  • a標簽自帶的下劃線對於字體來說太近了,如果有個p的字母時這一豎可以從下劃線穿出去,這樣很難看,這時就有需求了,怎麼設置下劃線與字體的距離呢? 行內元素不能設置高,但是可以設置內邊距吧,所以給padding-bottom來上那麼小小的幾個像素,再設置一px的下邊框border-bottom,這不就是想 ...
  • 放大鏡效果主要涉及3個滑鼠事件: 1.onmouseover,滑鼠移入浮動小方塊和顯示放大的區域顯示; 2.onmousemove,滑鼠移動,小方塊和放大區域一起移動; 3.onmouseout,滑鼠移除小方塊和放大區域消失。 其實放大鏡效果最主要的是小方塊與放大區域的比例及位置: js代碼: 效果 ...
  • 乾貨滿滿,你值得擁有。這是《JavaScript面向對象編程指南(第2版)》的讀書筆記,總結了很多JS鮮為人知的知識。 ...
  • 網頁佈局基礎 簡介 什麼是網頁佈局? 網頁佈局是網頁製作的基礎,使用DIV+CSS佈局網頁是基礎中的基礎。三種基本佈局方式:流式佈局,浮動佈局,絕對定位佈局。 網頁設計的特點:1:網頁寬度可變 2頭+內容主體(根據需要分欄)+頁腳(不重要的內容) 對長度設置百分比可實現網頁自適應 W3C標準包括結構 ...
  • JS中的數組: 1.數組的概念: 數組是在記憶體中連續存儲的多個有序元素的結構,元素的順序稱為下標,通過下標查找對應元素 2.數組的聲明: ①通過字面量聲明var arr1 = [,,,,] JS中同一數組可以儲存多種不同的數據類型(但,同一數組一般只用於存放同種數據類型) 例如var arr1 = ...
  • 原因是radio一定要設置相同的name,如下: <input type="radio" name="yunsuan" checked="checked" />四則運算 <input type="radio" name="yunsuan" />矩形運算 其中checked="checked"表示:這 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...