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