Win10中Vue.js的安裝和項目搭建

来源:https://www.cnblogs.com/nnnnnn/archive/2019/04/05/10658520.html
-Advertisement-
Play Games

一. 提前準備工作 1.Node.js環境 2.Windows10 3.npm(前端包管理工具) 4.webpack(前端資源載入/打包工具) 二. 開始安裝 1.。下載並安裝Node.js 下載地址:https://nodejs.org/en/download/ 2.在cmd中查看node.js是 ...


一. 提前準備工作

1.Node.js環境

2.Windows10

3.npm(前端包管理工具)

4.webpack(前端資源載入/打包工具)

二. 開始安裝

1.。下載並安裝Node.js

下載地址:https://nodejs.org/en/download/

2.在cmd中查看node.js是否安裝成功,以及是否安裝npm

3.由於npm安裝資源時速度慢,推薦使用淘寶的鏡像及其命令cnpm,安裝使用介紹參照:使用淘寶NPM鏡像

#查看版本
 npm -v

#升級npm
cnpm install npm -g

#升級或安裝cnpm
npm install cnpm -g

4.安裝vue的腳手架工具(vue項目前期項目目錄結構的工具)

cnpm install -global vue-cli
查看安裝目錄 C:\Users\Administrator\AppData\Roaming\npm 

5.在cmd中使用webpack創建一個vue項目

#進入到項目目錄
cd D:\project\vue 

#創建項目
vue init webpack 項目名稱

之後會出現對話提示。

“Project name”:這個是項目名稱,預設是輸入時的那個名稱,想改的話直接輸入修改,也可以直接回車

“Install vue-router”:是否需要vue-router,這裡預設選擇使用,這樣生成好的項目就會有相關的路由配置文件

“Use ESLint to lint your code”:是否使用ESLint,剛纔說了我們這個項目需要使用所以也是直接回車,預設使用,這樣會生成相關的ESLint配置

“Setup unit tests with Karma + Moch?”: 是否安裝單元測試。由於我們現在還沒有單元測試,所以這裡選擇的是”N”,而不是直接回車哦

“Setup e2e tests with Nightwatch”:是否安裝e2e測試,這裡我也同樣選擇的是“N”

這幾個配置選擇yes 或者 no 對於我們項目最大的影響就是,如果選擇了yes 則生成的項目會自動有相關的配置,有一些loader我們就要配套下載。所以如果我們確定不用的話最好不要yes,要麼下一步要下很多沒有用的loader

5.安裝完成,接下來就可以馬上開始運行我們的vue網站了!

三. 運行第一個Vue網站

在cmd中輸入以下命令

cd 項目名稱

cnpm run dev

打開http//:localhost:8080就可以訪問

 

如何使用編輯工具打開網站?

1.下載 Visual Studio Code 

2.在vsCode中打開項目文件路徑,在終端中輸入cnpm run dev 回車

 


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

-Advertisement-
Play Games
更多相關文章
  • 一、CSS3選擇器 CSS3是CSS的第三代版本,新增了很多功能,例如:強大的選擇器、盒模型、圓角、漸變、動畫、2D/3D轉換、文字特效等。 CSS3和HTML5沒有任何關係!HTML5骨架中,可以用CSS2.1也可以用CSS3。XHTML骨架中可以用CSS3的樣式。 在學習CSS之前都是學習選擇器 ...
  • 4 流程式控制制 4.1 順序結構 順序結構是程式中最簡單、最基本的流程式控制制,他沒有特定的語法結構,程式會按照代碼的先後順序執行,程式中大多數的代碼都是這樣執行的; 4.2 分支結構 if 分支結構 註意:if 適用於範圍判斷; 執行程式是按照從上到下依次執行; 單分支 if ( 條件表達式 ) { / ...
  • 簡介: 倒計時秒殺組件在電商網站中層出不窮 不過思路萬變不離其蹤,我自己根據其他資料設計了一個vue版的 核心思路:1、時間不能是本地客戶端的時間 必須是伺服器的時間這裡用一個settimeout代替 以為時間必須統一 2、開始時間,結束時間通過父組件傳入,當伺服器時間在這個開始時間和結束時間的範圍 ...
  • 不要慌!下麵開始幫你找到,很簡單! ...
  • emmmmm.....標題我就覺得起的很變態。閑話不多說,先說出現的背景吧~~。 因為業務上的需求,跟一個硬體對接,要做大屏展示大廳客流熱力圖分佈(背景圖是客戶那邊給的)。然後這個機子傳過來的數據就可能20來條。如果用最新的echarts4來做,但是數據太小不足以畫出圖來,但是如果數據太大傳輸也是一 ...
  • "官方文檔" 前言 所謂視頻上傳,是指開發者或其用戶將視頻文件上傳到點播的視頻存儲中,以便進行視頻處理、分發等。 一、簡介 騰訊雲點播支持如下幾種視頻上傳方式: 1. 控制臺上傳:在點播控制臺上進行操作,將本地視頻上傳到雲點播,適用於直接管理少量視頻的場景,具有方便快捷、無技術門檻的優點; 2. 服 ...
  • 數組方法: 1、Array.join([param]) 方法:將數組中所有的元素都轉換為字元串並連接起來,通過字元 param 連接,預設使用逗號,返回最後生成的字元串 2、Array.reverse() 方法:將數組中的元素顛倒順序(在原數組中重新排列它們),返回逆序數組 3、Array.sort ...
  • 一、HTML5簡介 HTML 5 的第一份正式草案已於2008年1月22日公佈。HTML5 仍處於完善之中。然而,大部分現代瀏覽器已經具備了某些 HTML5 支持。 2014年10月29日,萬維網聯盟宣佈,經過幾乎8年的艱辛努力,HTML5標準規範終於最終制定完成了,並已公開發佈。 HTML5不僅僅 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...