在IDEA中創(chuàng)建vue hello-world項(xiàng)目全過(guò)程
工作中最近在接觸vue前端項(xiàng)目，記錄一下從0搭建一個(gè)vue hello world項(xiàng)目的步驟
1、本地電腦安裝配置node、npm
D:\Project\vue\hello-world>node -v
v14.21.3D:\Project\vue\hello-world>npm -v
6.14.18D:\Project\vue\hello-world>
2、設(shè)置npm國(guó)內(nèi)淘寶的景象
建議配置國(guó)內(nèi)的景象，國(guó)外鏡像下載依賴有時(shí)會(huì)失敗
npm config set registry http://registry.npm.taobao.org/
3、在idea中安裝Vue.js插件
網(wǎng)上搜索相關(guān)教程
4、創(chuàng)建vue.js項(xiàng)目
file->new project -> JavaScript -> Vue.js
5、指定項(xiàng)目名字
例如項(xiàng)目名字默認(rèn)為untitled
Finish，之后會(huì)執(zhí)行 vue create tntitled幫助我們創(chuàng)建好項(xiàng)目
項(xiàng)目創(chuàng)建好之后，會(huì)在idea下方出現(xiàn)以下提示信息
? Generating README.md...
? Successfully created project idea-create-hello-world-project.
? Get started with the following commands:$ npm run serve
6、在Terminal中執(zhí)行啟動(dòng)命令
npm run serve
7、在瀏覽器中訪問(wèn) http://localhost:8080/
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue項(xiàng)目中ESLint配置超全指南(VScode)
ESLint是一個(gè)代碼檢查工具,用來(lái)檢查你的代碼是否符合指定的規(guī)范,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中ESLint配置(VScode)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
這篇文章主要介紹了element 動(dòng)態(tài)合并表格的步驟，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
Vue實(shí)現(xiàn)表格數(shù)據(jù)的增刪改查的示例代碼
Vue是一個(gè)用于構(gòu)建用戶界面的JavaScript框架,在Vue中可以通過(guò)使用Vue組件來(lái)實(shí)現(xiàn)對(duì)表格的增刪改查操作,下面將介紹一些基礎(chǔ)的Vue組件和技術(shù)來(lái)實(shí)現(xiàn)對(duì)表格的增刪改查操作,需要的朋友可以參考下2024-08-08
vue在IIS服務(wù)器部署后路由無(wú)法跳轉(zhuǎn)
在IIS服務(wù)器上部署Vue項(xiàng)目時(shí),可能會(huì)遇到路由無(wú)法正常跳轉(zhuǎn)的問(wèn)題,解決方法有兩種,下面就來(lái)具體介紹一下解決方法,感興趣的可以了解一下2024-10-10
深入解析el-col-group強(qiáng)大且靈活的Element表格列組件
這篇文章主要為大家介紹了el-col-group強(qiáng)大且靈活的Element表格列組件深入解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
vue2與vue3下如何訪問(wèn)使用public下的文件
這篇文章主要介紹了vue2與vue3下如何訪問(wèn)使用public下的文件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
基于vue.js輪播組件vue-awesome-swiper實(shí)現(xiàn)輪播圖
一般做移動(dòng)端輪播圖的時(shí)候，最常用的就是Swiper插件了，而vue.js也有一個(gè)輪播組件vue-awesome-swiper，用法跟swiper相似。接下來(lái)通過(guò)本文給大家詳解講解vue.js輪播組件vue-awesome-swiper實(shí)現(xiàn)輪播圖實(shí)例代碼，需要的朋友參考下2017-03-03
vue3中pinia的使用及持久化的實(shí)現(xiàn)
Pinia是一個(gè)基于Vue3的狀態(tài)管理庫(kù),本文主要介紹了vue3中pinia的使用及持久化的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-04-04
Vue element el-table-column中對(duì)日期進(jìn)行格式化方式(全局過(guò)濾器)
這篇文章主要介紹了Vue element el-table-column中對(duì)日期進(jìn)行格式化方式(全局過(guò)濾器)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
詳解如何在Vue3使用＜script lang=“ts“ setup＞語(yǔ)法糖
本文主要介紹了在Vue3使用＜script lang=“ts“ setup＞語(yǔ)法糖，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06