首頁 web前端 Vue.js 如何啟動vue.js項目

如何啟動vue.js項目

Dec 17, 2020 am 11:50 AM
vue.js

啟動vue.js專案的方法:先使用「cd 專案名稱」指令進入專案目錄中;然後使用「npm install」指令安裝依賴;最後使用「npm run dev」指令啟動專案即可。

如何啟動vue.js項目

本教學操作環境:windows7系統、vue2.9版,此方法適用於所有品牌電腦。

相關推薦:《vue.js教學

#啟動執行vue.js專案(維護他人的專案)的方法

1:安裝cnpm

由於npm有些資源被封鎖或是國外資源的原因,常常會導致用npm安裝依賴套件的時候失敗,所有我還需要npm的國內鏡像---cnpm
在命令列中輸入

npm install -g cnpm --registry=http://registry.npm.taobao.org
登入後複製

如何啟動vue.js項目

2:安裝webpack

npm install webpack -g
登入後複製

webpack是一款模組載入器兼打包工具,它能把各種資源,例如JS(含JSX)、coffee、樣式(含less/sass)、圖片等都當作模組來使用和處理。 webpack 的核心是 依賴分析,把依賴分析出來了,其他都是細枝末節。

如何啟動vue.js項目

3:安裝vue-cli

#
cnpm install vue-cli -g
登入後複製

vue-cli是vue.js的鷹架,用來自動產生vue.js webpack的專案模板,這個過程會耗時十幾秒,等走完就好;好了,到此整個環境就搭建好了

如何啟動vue.js項目

4:cd /專案名稱
下面就是執行專案了,cd /專案名稱,我的檔案放在D盤,所以先進入d盤,再進入專案。

cd ShopApp
登入後複製

如何啟動vue.js項目

5:安裝依賴

進入專案之後安裝依賴,安裝成功

如何啟動vue.js項目

注意:在這一步可能會出現這樣的錯誤;因為你打開的是別人的項目,項目之中肯定有node_modules模組,那麼先刪除掉,在執行 npm install指令

如何啟動vue.js項目

6:啟動專案

一切準備就緒,啟動專案

npm run dev
登入後複製

如何啟動vue.js項目

7:自動啟動瀏覽器就會開啟項目了

在瀏覽器中輸入http://localhost:8080/#/;進入項目首頁

若是要造訪其他頁面,直接在#後面加上元件名稱即可:例如http://localhost:8080/#/adjustIntegral

相關推薦:

2020年前端vue面試題大匯總(附答案)

vue教學推薦:2020最新的5個vue.js影片教學精選

更多程式相關知識,請造訪:程式設計教學! !

以上是如何啟動vue.js項目的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1321
25
PHP教程
1269
29
C# 教程
1249
24
深入探討vite是怎麼解析.env檔的 深入探討vite是怎麼解析.env檔的 Jan 24, 2023 am 05:30 AM

使用vue框架開發前端專案時,我們部署的時候都會部署多套環境,往往開發、測試以及線上環境呼叫的介面網域都是不一樣的。如何能做到區分呢?那就是使用環境變數和模式。

圖文詳解如何在Vue專案中整合Ace程式碼編輯器 圖文詳解如何在Vue專案中整合Ace程式碼編輯器 Apr 24, 2023 am 10:52 AM

Ace 是一個用 JavaScript 寫的可嵌入程式碼編輯器。它與 Sublime、Vim 和 TextMate 等原生編輯器的功能和效能相符。它可以很容易地嵌入到任何網頁和 JavaScript 應用程式中。 Ace 被維護為Cloud9 IDE的主要編輯器 ,並且是 Mozilla Skywriter (Bespin) 專案的繼承者。

vue中組件化和模組化有什麼區別 vue中組件化和模組化有什麼區別 Dec 15, 2022 pm 12:54 PM

組件化和模組化的區別:模組化是從程式碼邏輯的角度進行劃分的;方便程式碼分層開發,確保每個每個功能模組的職能一致。元件化是從UI介面的角度進行規劃;前端的元件化,方便UI元件的重複使用。

探討如何在Vue3中撰寫單元測試 探討如何在Vue3中撰寫單元測試 Apr 25, 2023 pm 07:41 PM

在當今前端開發中,Vue.js 已經成為了一個非常流行的框架。隨著 Vue.js 的不斷發展,單元測試變得越來越重要。今天,我們將探討如何在 Vue.js 3 中編寫單元測試,並提供一些最佳實踐和常見的問題及解決方案。

聊聊vue3怎麼使用高德地圖api 聊聊vue3怎麼使用高德地圖api Mar 09, 2023 pm 07:22 PM

在我們使用高德地圖的時候,官方給我們推薦了很多案例,demo,但是這些案例都是使用原生方法接入,並沒有提供vue或者react 的demo,vue2的接入網上也很多人都有寫過,以下這篇文章就來看看vue3怎麼使用常用的高德地圖api,希望對大家有幫助!

怎麼查詢目前vue的版本 怎麼查詢目前vue的版本 Dec 19, 2022 pm 04:55 PM

查詢目前vue版本的兩種方法:1、在cmd控制台內,執行「npm list vue」指令查詢版本,輸出結果就是vue的版本號資訊;2、在專案中找到並開啟package.json文件,查找「dependencies」項目即可看到vue的版本資訊。

Vue中JSX語法和模板語法的簡單比較(優劣勢分析) Vue中JSX語法和模板語法的簡單比較(優劣勢分析) Mar 23, 2023 pm 07:53 PM

在Vue.js中,開發人員可以使用兩種不同的語法來建立使用者介面:JSX語法和範本語法。這兩種文法各有優劣,以下就來探討它們的差異和優劣勢。

淺析vue怎麼實現檔案切片上傳 淺析vue怎麼實現檔案切片上傳 Mar 24, 2023 pm 07:40 PM

在實際開發專案過程中有時候需要上傳比較大的文件,然後呢,上傳的時候相對來說就會慢一些,so,後台可能會要求前端進行文件切片上傳,很簡單哈,就是把比如說1個G的檔案流切割成若干個小的檔案流,然後分別請求介面傳遞這個小的檔案流。

See all articles