使用VSCode創建一個Vue項目

来源:https://www.cnblogs.com/bob-zb/archive/2019/07/08/11152562.html
-Advertisement-
Play Games

vue-cli 是vue.js的腳手架,用於自動生成vue.js模板工程的。 安裝vue-cli之前,需要先安裝了vue和webpack · node -v //(版本低引起:bash: npm: command not found) · npm -v //以上幫助檢查是否安裝 node npm · ...


vue-cli 是vue.js的腳手架,用於自動生成vue.js模板工程的。 安裝vue-cli之前,需要先安裝了vue和webpack

· node -v                   //(版本低引起:bash: npm: command not found)  · npm -v                  //以上幫助檢查是否安裝 node npm       · 輸入vue                    //測試vue是否安裝成功 · 輸入vue list               //看vue中有哪些子類 npm install vue · npm install -g vue-cli           //全局安裝vue-cli · vue init webpack projectName     //生成項目名為projectName的模板,這裡的項目名projectName隨你自己寫 (是的話 敲回車就行)                      //預設情況下,webpack安裝的是最新版本的,如果要安裝其他版本,使用命令行vue init webpack#1.0 ***就可以了。

在安裝時會詢問你: 

①、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)

 

此時會生成一個 projectName 的文件夾,這個文件夾就是vue的項目模板

· cd projectName        //進入文件目錄               · npm install                   //初始化安裝依賴 · npm run dev        //運行,在瀏覽器打開http://localhost:8080,則可以看到歡迎頁了。       

但是這個只能在本地跑,要如何在我們自己的伺服器上訪問呢?

· npm run build 

 

會生成靜態文件,在根目錄的dist里,裡面有個index.html,這是伺服器訪問的路徑指定到這裡就可以訪問我們自己的項目了。

模板預設是run build 命令,如果提示沒有找到命令就需要去配置文件里尋找build指令

有時候生成的index.html里引用的css和js的引用路徑不對,這時候就需要自己修改一下。 例如改為:config/index.js 

tips:

1、如何更新npm至最新版本?

npm install npm @latest -g //可以更新npm至最新版本

其中 @ 符號後面可以添加你想更新到的版本號。

 

2、安裝淘寶npm

$ npm install -g cnpm –registry=https://registry.npm.taobao.org //or # 建議不要用cnpm 安裝有各種詭異的bug 可以通過如下操作解決npm速度慢的問題  $ npm install –registry=https://registry.npm.taobao.org  

3、要使用 <style lang="sass"> 請安裝組件

$ npm install sass-loader node-sass vue-style-loader --D

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

-Advertisement-
Play Games
更多相關文章
  • Keras.NET是一個高級神經網路API,它使用C#編寫,並帶有Python綁定,可以在Tensorflow、CNTK或Theano上運行。其關註點是實現快速實驗。因為做好研究的關鍵是:能在儘可能短的時間內從一個想法發展出結果。 如果你需要一個能實現以下需求的深度學習庫,那麼請使用Keras: 允 ...
  • .NET開發框架(四)-伺服器配置完整篇,包括伺服器IIS安裝、網路負載均衡器安裝、ASP.NET Core 安裝 ...
  • 後端的規範與思想 [toc] 分層 Web層 (接收和發送HTTP請求的,封裝;別名controller層) 業務邏輯層 (別名服務層,文件常以xxxService為名) DAO層 (Date Access Object,數據訪問對象,對對象進行操作,存儲是對象轉為數據,讀取是數據轉為對象) 持久層 ...
  • 該指令會跳過所在元素和它的子元素的編譯過程,也就是把這個節點及其子節點當作一個靜態節點來處理,例如: 編譯後的結果為: 對應的HTML節點樹為: 可以看到:title屬性也被當成了特性來處理了,我們在控制台輸入app.message="Hello Vue!"看看渲染變化: 可以看到對於v-pre對應 ...
  • 經過 "canvas 教程(一) 簡介" 我們知道了 canvas 的一些基本情況 而本次是給大家帶來直線的繪製 canvas 中,基本圖形有兩種,一種是直線,還有一種是曲線 但是無論是直線還是曲線,我們都應該先瞭解 canvas 的坐標系 s canvas 的坐標系 要繪製之前肯定要瞭解一下 ca ...
  • 記錄百裡半 今天回顧html,總結一下今日所學內容。 正文 目的:通過一些基礎的標簽製作關於LOL的靜態網頁 所用代碼: 1.div中套div的話,若定義了第一個盒子的大小,被它包含的盒子就預設為同樣的形式; 2.圖片標簽img,用法:<img src:..> 3.url目錄:同一資源定位器,尋找資 ...
  • 3d建築,3d消防,消防演習模擬,3d庫房,3d檔案室,3d密集架,webGL,threejs,3d機房,bim管理系統 ...
  • 項目的所有依賴都可以安裝,每個都有詳細的註釋。 //gulp.series|4.0 依賴順序執行//gulp.parallel|4.0 多個依賴嵌套'html','css','js'並行 下麵1和2分別運行 1.自動監測文件變化並刷新瀏覽器 //初始生成app/dist目錄 gulp.task('i ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...