一、基于vue-cli腳手架創(chuàng)建
1、安裝node.js
1、首先需要安裝node.js，推薦下載地址：Node.js
2、檢查是否安裝成功，使用打開黑窗口的快捷鍵window+R，輸入cmd，在黑窗口輸入node -v，如果輸出版本號，就說明安裝node環(huán)境成功，
2、vue-cli搭建Vue開發(fā)環(huán)境
Vue CLI：命令行界面，俗稱腳手架，Vue CLI 是一個基于webpack實現(xiàn)的，Vue CLI 是一個官方發(fā)布vue.js項目腳手架，使用vue-cli可以快速搭建Vue開發(fā)環(huán)境以及對應的webpack配置
vue-cli的使用前提：安裝過Node環(huán)境和Webpack
webpack的全局安裝：黑窗口輸入npm install webpack -g
（1）安裝Vue CLI：命令行輸入npm install -g@vue/cli
npm install -g @vue/cli
（2）檢查是否安裝成功：命令行輸入vue --version，輸出版本號就說明安裝成功
3、創(chuàng)建vue項目
（1）、在想要創(chuàng)建項目的文件夾中輸入cmd打開命令行并輸入vue create "文件名"
（2）進入該頁面，按需進行選擇和配置
（3）出現(xiàn)以下頁面，即為創(chuàng)建成功
4、啟動vue項目
兩種啟動方式：
（1）命令行啟動：
（2）把項目拉到vscode中，打開終端
首先，使用npm i 或npm install ：安裝依賴，根據(jù)項目中的package.json文件自動下載項目所需的全部依賴。
查閱了其他文章發(fā)現(xiàn)這兩種有些許區(qū)別：
（2）運行：不同的項目的運行命令不同，可以在package.json中進行查看
可得該項目的運行命令為：npm run serve
?二、基于vite創(chuàng)建（官方推薦）
1、什么是vite？
vite是新一代前端構(gòu)建工具，和webpack是等價的，構(gòu)建速度比webpack要快，對TypeScript、JSX、CSS等不用配置什么東西，可以直接進行使用。vite的創(chuàng)建過程是按需編譯。
?2、創(chuàng)建命令：
npm create vue@latest
?3、具體配置：
?1.創(chuàng)建命令
npm create vue@latest?2.具體配置
配置項目名稱
Project name: vue3_test
是否添加TypeScript支持
?Add TypeScript? ?Yes
是否添加JSX支持
Add JSX Support? ?No
是否添加路由環(huán)境
Add Vue Router for Single Page Application development? ?No
是否添加pinia環(huán)境
Add Pinia for state management? ?No
是否添加單元測試
Add Vitest for Unit Testing? ?No
是否添加端到端測試方案
Add an End-to-End Testing Solution? ? No
?是否添加ESLint語法檢查
Add ESLint for code quality? ?Yes
是否添加Prettiert代碼格式化
Add Prettier for code formatting? ?No
?文章來源：http://www.zghlxwxcb.cn/news/detail-783649.html
?文章來源地址http://www.zghlxwxcb.cn/news/detail-783649.html
到了這里，關(guān)于怎樣創(chuàng)建vue項目(分別基于vue-cli和vite兩種的創(chuàng)建方式)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
