使用vue-cli創(chuàng)建vue2項(xiàng)目的實(shí)戰(zhàn)步驟詳解

更新時(shí)間：2023年01月24日 08:41:14 作者：神仙姐姐QAQ

相信大部分Vue開發(fā)者都使用過vue-cli來構(gòu)建項(xiàng)目,它的確很方便,但對(duì)于很多初級(jí)開發(fā)者來說,還是要踩不少坑的,下面這篇文章主要給大家介紹了關(guān)于使用vue-cli創(chuàng)建vue2項(xiàng)目的實(shí)戰(zhàn)步驟,需要的朋友可以參考下

前言

說明！?。。篤ue CLI >= 3 和舊版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆蓋了。所以使用腳手架創(chuàng)建vue2的項(xiàng)目，需要先全局安裝一個(gè)橋接工具，然后創(chuàng)建一個(gè)vue2的項(xiàng)目：

第一步：搭建node運(yùn)行環(huán)境，根據(jù)操作系統(tǒng)選擇相應(yīng)安裝包

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

檢驗(yàn)是否安裝成功，命令行中直接輸入node -v，返回版本號(hào)即可。

第二步：安裝webpack

npm install webpack –g

第三步：安裝腳手架

npm install -g @vue/cli-init

準(zhǔn)備工作完成后，在硬盤上找到項(xiàng)目最終存放的文件夾，直接在上方輸入cmd，點(diǎn)擊回車，進(jìn)入到小黑窗口。

第四步：創(chuàng)建項(xiàng)目

使用vue init webpack my-project命令創(chuàng)建項(xiàng)目，其中my-project為項(xiàng)目名稱，然后根據(jù)提示，配置項(xiàng)目的相關(guān)屬性信息，其中包括項(xiàng)目名稱、項(xiàng)目描述、作者，是否使用路由等相關(guān)設(shè)置。

配置完項(xiàng)目信息后，等待項(xiàng)目的創(chuàng)建，項(xiàng)目創(chuàng)建后，根據(jù)命令行工具的提示，cd到項(xiàng)目目錄，然后輸入提示信息，會(huì)自動(dòng)開啟一個(gè)本地服務(wù)器。

然后將網(wǎng)址復(fù)制到瀏覽器中，即可訪問創(chuàng)建的程序。

總結(jié)

到此這篇關(guān)于使用vue-cli創(chuàng)建vue2項(xiàng)目的文章就介紹到這了,更多相關(guān)vue-cli創(chuàng)建vue2項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁計(jì)算器
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue3中defineProps設(shè)置默認(rèn)值的方法實(shí)現(xiàn)
Vue3中我們經(jīng)常需要使用defineProps來定義組件的屬性,本文主要介紹了Vue3中defineProps設(shè)置默認(rèn)值的方法實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-07-07
Vue獲取input值的四種常用方法
Vue是一種流行的Web開發(fā)框架,它提供了一個(gè)雙向綁定的語法糖。在Vue中,我們可以很容易地獲取頁面上的數(shù)據(jù),并且可以實(shí)時(shí)的響應(yīng)其變化,這篇文章主要給大家介紹了關(guān)于Vue獲取input值的四種常用方法,需要的朋友可以參考下
2023-09-09
vue3中的createApp分析
這篇文章主要介紹了vue3中的createApp分析,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-04-04
Vue中keep-alive組件的深入理解
這篇文章主要給大家介紹了關(guān)于Vue中keep-alive組件的深入理解，文中通過實(shí)例代碼結(jié)束的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08
使用Vue?控制元素顯示隱藏的方法和區(qū)別
這篇文章主要介紹了Vue??控制元素顯示隱藏的方法和區(qū)別,需要的朋友可以參考下
2022-12-12
vue實(shí)現(xiàn)幾秒后跳轉(zhuǎn)新頁面代碼
這篇文章主要介紹了vue實(shí)現(xiàn)幾秒后跳轉(zhuǎn)新頁面代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
Vue默認(rèn)插槽,具名插槽,作用域插槽定義及使用方法
這篇文章主要介紹了Vue默認(rèn)插槽,具名插槽,作用域插槽定義及使用方法,插槽的作用是在子組件中某個(gè)位置插入父組件的自定義html結(jié)構(gòu)和data數(shù)據(jù),下面詳細(xì)內(nèi)容需要的小伙伴可以參考一下
2022-03-03
VSCode插件安裝完成后的配置(常用配置)
這篇文章主要介紹了VSCode插件安裝完成后的配置,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-08-08
vue事件修飾符和按鍵修飾符用法總結(jié)
本篇文章主要介紹了vue事件修飾符和按鍵修飾符用法總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-07-07