Vue新手指南之創(chuàng)建第一個(gè)vue-cli腳手架程序
1. Vue--第一個(gè)vue-cli程序
Vue的開(kāi)發(fā)都是要基于NodeJS，實(shí)際開(kāi)發(fā)采用Vue-cli腳手架開(kāi)發(fā)，vue-router路由，vuex做狀態(tài)管理；Vue UI，界面我們一般使用ElementUI（餓了么出品），或者ICE（阿里巴巴出品）來(lái)快速搭建前端項(xiàng)目~~
1.1 什么是vue-cli
vue-cli官方提供的一個(gè)腳手架，用于快速生成一個(gè)vue的項(xiàng)目模板；
預(yù)先定義好的目錄結(jié)構(gòu)及基礎(chǔ)代碼，就好比咱們?cè)趧?chuàng)建Maven項(xiàng)目時(shí)可以選擇創(chuàng)建一個(gè)骨架項(xiàng)目，這個(gè)估計(jì)項(xiàng)目就是腳手架，我們的開(kāi)發(fā)更加的快速；
項(xiàng)目的功能
- 統(tǒng)一的目錄結(jié)構(gòu)
- 本地調(diào)試
- 熱部署
- 單元測(cè)試
- 集成打包上線
1.2 需要的環(huán)境
- Node.js
- Git
確認(rèn)nodejs安裝成功：
- cmd下輸入node -v，查看是否能夠正確打印出版本號(hào)即可！
- cmd下輸入npm -v，查看是否能夠正確打印出版本號(hào)即可！
npm，就是一個(gè)軟件包管理工具
安裝vue-cli
npm instal1 vue-cli -g #測(cè)試是否安裝成功#查看可以基于哪些模板創(chuàng)建vue應(yīng)用程序，通常我們選擇webpack vue list
提示:如果vue list 查詢失敗請(qǐng)把 node_global目標(biāo)添加到path環(huán)境變量
1.3 第一個(gè)vue-cli程序
1.3.1 創(chuàng)建一個(gè)Vue項(xiàng)目
我們隨便建立一個(gè)空的文件夾在電腦上，我這里在D盤下新建一個(gè)目錄
1.3.2 創(chuàng)建一個(gè)基于webpack模板的vue應(yīng)用程序
#1、首先需要進(jìn)入到對(duì)應(yīng)的目錄 cdE:\IDEACode\Vue\vue #2、這里的myvue是頂日名稱，可以根據(jù)自己的需求起名 vue init webpack myvue
一路都選擇no即可；
說(shuō)明：
1.3.3 初始化并運(yùn)行
cd myvue npm install npm run dev
命令執(zhí)行成功后會(huì)出現(xiàn)以下提示
在游覽器打開(kāi)剛剛的端口
可以在index.js修改端口號(hào)等配置文件
總結(jié)
到此這篇關(guān)于Vue新手指南之創(chuàng)建第一個(gè)vue-cli程序的文章就介紹到這了,更多相關(guān)第一個(gè)vue-cli程序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue計(jì)時(shí)器的實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了vue計(jì)時(shí)器的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
vue表單綁定實(shí)現(xiàn)多選框和下拉列表的實(shí)例
本篇文章主要介紹了vue表單綁定實(shí)現(xiàn)多選框和下拉列表的實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
Vite多環(huán)境配置項(xiàng)目高定制化能力詳解
這篇文章主要為大家介紹了Vite多環(huán)境配置項(xiàng)目高定制化能力詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
深入淺析Vue.js中 computed和methods不同機(jī)制
這篇文章給大家介紹了Vue.js中 computed和methods不同機(jī)制，在vue.js中，methods和computed兩種方式來(lái)動(dòng)態(tài)當(dāng)作方法使用，文中還給大家提到了computed和methods的區(qū)別，感興趣的朋友一起看看吧2018-03-03
本篇文章主要介紹了深入解析Vue 組件命名那些事，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
這篇文章主要介紹了vue activated在子組件中的使用，文章圍繞vue activated的xingu你資料講解展開(kāi)內(nèi)容并附上具體代碼,需要的朋友可以參考一下2021-11-11
vue項(xiàng)目及axios請(qǐng)求獲取數(shù)據(jù)方式
這篇文章主要介紹了vue項(xiàng)目及axios請(qǐng)求獲取數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了解決echart在vue中id重復(fù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vm.$attrs使用場(chǎng)景詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue3中使用reactive定義的變量響應(yīng)式丟失問(wèn)題解決方案
這篇文章主要介紹了vue3中使用reactive定義的變量響應(yīng)式丟失問(wèn)題的具體例子和解決方案,文章通過(guò)代碼示例給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-06-06