vue項(xiàng)目的創(chuàng)建的步驟(圖文教程)
安裝npm
1、檢查node，未安裝在這里下載最新版安裝。
2、檢查npm，node自帶npm但不是最新版本，需要命令更新：npm install -g npm
安裝vue腳手架
1、在國(guó)內(nèi)下載時(shí)網(wǎng)絡(luò)會(huì)出問(wèn)題,建議淘寶鏡像下載，配置鏡像：npm install -g cnpm --registry=https://registry.npm.taobao.org
2、用cnpm安裝vue腳手架：cnpm i -g @vue/cli（其中i是Install安裝的簡(jiǎn)寫，g是global全局的簡(jiǎn)寫）。
創(chuàng)建vue項(xiàng)目
1、使用腳手架創(chuàng)建vue項(xiàng)目:vue create test(test為項(xiàng)目名)
2、選擇第三項(xiàng)自定義添加：
Default([Vue 3] babel, eslint):vue3的項(xiàng)目，只包含js編譯器babel，代碼檢測(cè)工具eslint。
Default([Vue 2] babel, eslint):vue2的項(xiàng)目，只包含js編譯器babel，代碼檢測(cè)工具eslint。
Manually select features:自定義添加選擇功能。
3、選擇配置,一般項(xiàng)目勾選下圖選項(xiàng)即可：
- Babel：js編譯器
- Typescript：js的超集
- Progressive Web App Support:漸進(jìn)式的網(wǎng)頁(yè)應(yīng)用程序
- Router:vue的路由
- Vuex:vue的狀態(tài)管理
- CSS Pre-processors:css的預(yù)處理器
- Linter/Formatter:代碼風(fēng)格檢測(cè)與格式化(如果自己代碼不是很規(guī)范的話可以用這個(gè)約束下自己,也可不選擇，按照自己的風(fēng)格)
- Unit Testing:單元測(cè)試
- E2E Testing:端對(duì)端測(cè)試
4、選擇vue3(按照自己需求來(lái))
5、路由采用history模式，輸入y：
6、選擇第一項(xiàng)CSS預(yù)處理器：
7、選擇第三個(gè)標(biāo)準(zhǔn)配置：
8、選擇第一個(gè)，編寫代碼時(shí)提示錯(cuò)誤：
9、Babel、ESLint 等的配置存放選擇都存放在package.json中，選擇第二項(xiàng)：
10、保存設(shè)置為demo,下次再次創(chuàng)建項(xiàng)目時(shí)便會(huì)多出一個(gè)demo選項(xiàng)，不需再次配置即可直接使用：
11、敲擊回車等待后創(chuàng)建完成：
啟動(dòng)項(xiàng)目
1、cd到項(xiàng)目目錄下：cd test。輸入啟動(dòng)命令：npm run serve
2、打開鏈接即可啟動(dòng)項(xiàng)目：
到此這篇關(guān)于vue項(xiàng)目的創(chuàng)建的步驟(圖文教程)的文章就介紹到這了,更多相關(guān)vue項(xiàng)目創(chuàng)建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在Electron 中,存取本地文件,有很多種辦法,本文介紹最常用的一種辦法, 通過(guò) Electron 框架提供的能力,和 Node.js 的 fs 文件管理模塊實(shí)現(xiàn)本地文件的存取,需要的小伙伴可以參考下2023-11-11
Vue項(xiàng)目頁(yè)面跳轉(zhuǎn)時(shí)瀏覽器窗口上方顯示進(jìn)度條功能
這篇文章主要介紹了Vue項(xiàng)目頁(yè)面跳轉(zhuǎn)時(shí)瀏覽器窗口上方顯示進(jìn)度條功能,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03
Vue中點(diǎn)擊active并第一個(gè)默認(rèn)選中功能的實(shí)現(xiàn)
這篇文章主要介紹了Vue中點(diǎn)擊active并第一個(gè)默認(rèn)選中功能的實(shí)現(xiàn)代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
vue實(shí)現(xiàn)表格動(dòng)態(tài)嵌入折線圖的繪制代碼
這篇文章給大家介紹了vue實(shí)現(xiàn)表格動(dòng)態(tài)嵌入折線圖的繪制方法,文中有詳細(xì)完整的代碼示例攻大家參考,對(duì)大家的學(xué)習(xí)或工作有一定的參考價(jià)值,需要的朋友可以參考下2023-10-10
解決vue單頁(yè)路由跳轉(zhuǎn)后scrollTop的問(wèn)題
今天小編就為大家分享一篇解決vue單頁(yè)路由跳轉(zhuǎn)后scrollTop的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue開發(fā)網(wǎng)站的時(shí)候,往往圖標(biāo)是起著很重要的作用,下面這篇文章主要給大家介紹了關(guān)于Vue3使用icon的兩種方式,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-11-11
這篇文章主要為大家詳細(xì)介紹了如何使用vue實(shí)現(xiàn)帶縮略圖的輪播圖效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的可以參考下2024-02-02
詳解vue與后端數(shù)據(jù)交互(ajax)：vue-resource
本篇文章主要介紹了詳解vue與后端數(shù)據(jù)交互(ajax)：vue-resource，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
基于vue+element實(shí)現(xiàn)全局loading過(guò)程詳解
這篇文章主要介紹了基于vue+element實(shí)現(xiàn)全局loading過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
這篇文章主要為大家介紹了Vue之插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助，希望能夠給你帶來(lái)幫助2021-11-11