vue-cli腳手架搭建方式(vue腳手架方式搭建)
1.首先安裝node前端環(huán)境,可以幫助我們?nèi)ハ螺d其他的組件
下載完成后,去自己的電腦找到node的文件路徑,復(fù)制去配置環(huán)境變量,在path中配
環(huán)境搭配完成后,在cmd中進(jìn)行測(cè)試 ,輸入一下兩個(gè)命令進(jìn)行測(cè)試
2.在hbuilderX中創(chuàng)建一個(gè)vue-cli項(xiàng)目(標(biāo)準(zhǔn)的前段項(xiàng)目)
3.組件路由
(1)安裝
vue-router 是一個(gè)插件包，所以我們還是需要用 npm 來(lái)進(jìn)行安裝的。 打開(kāi)命令行工具，進(jìn)入你的項(xiàng)目目錄，輸入下面命令。
npm i vue-router@3.5.3
(2) 第一步:
在src中創(chuàng)建一個(gè)文件夾router,并在該文件夾中建index.js,導(dǎo)入Vue,router和其他組件
格式(import Vue from"vue"),其中router和ElementUI需要Vue.use(router)
var rout = new router({
routes:[
{
path:'/login',
name:'Login',
component:Login
},
{
path:'/main',
name:'Main',
component:Main
}
]
});第二步:定義組件路由
export default rout;
第三步:導(dǎo)出路由對(duì)象
export default rout;
在默認(rèn)的App.vue中
4.使用
5.打包
?npm run build
ElementUI前端框架
1.安裝,在終端輸入命令npm i element-ui -S
2.在main.js中導(dǎo)入ElementUI框架
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI)
到此這篇關(guān)于vue-cli(vue腳手架方式搭建)的文章就介紹到這了,更多相關(guān)vue-cli腳手架搭建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue2.0 watch里面的 deep和immediate用法說(shuō)明
這篇文章主要介紹了vue2.0 watch里面的 deep和immediate用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
Vue子組件如何修改父組件數(shù)據(jù)的方法及注意事項(xiàng)
這篇文章主要介紹了Vue子組件如何修改父組件數(shù)據(jù)的方法及注意事項(xiàng),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue中的過(guò)濾器及其時(shí)間格式化問(wèn)題
這篇文章主要介紹了vue中的過(guò)濾器及其時(shí)間格式化,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
關(guān)于vue3編寫(xiě)掛載DOM的插件問(wèn)題
這篇文章主要介紹了vue3編寫(xiě)掛載DOM的插件的問(wèn)題，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-07-07
在vue-cli腳手架中配置一個(gè)vue-router前端路由
這篇文章主要給大家介紹了在vue-cli腳手架中配置一個(gè)vue-router前端路由的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
vue中keep-alive組件使用和一些基礎(chǔ)配置方法
本文主要介紹了Vue中keep-alive組件的使用方法和一些基礎(chǔ)配置,keep-alive是Vue中的一個(gè)抽象組件,可以緩存組件實(shí)例,提高性能,本文給大家介紹vue中keep-alive組件使用和一些基礎(chǔ)配置方法,感興趣的朋友一起看看吧2024-10-10
這篇文章主要介紹了vue實(shí)現(xiàn)列表拖拽排序的功能，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-11-11
vue3?element-plus?實(shí)現(xiàn)表格數(shù)據(jù)更改功能詳細(xì)步驟
這篇文章主要介紹了vue3 element-plus實(shí)現(xiàn)表格數(shù)據(jù)更改功能,本文分步驟結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
使用Vue3和ApexCharts實(shí)現(xiàn)3D徑向條形圖的代碼
徑向條形圖是一種用于可視化單一數(shù)據(jù)點(diǎn)及其與目標(biāo)或理想值的關(guān)系的圖表類型,它在顯示進(jìn)度、完成率或其他類似度量時(shí)非常有用,本文給大家介紹了使用Vue3和ApexCharts實(shí)現(xiàn)3D徑向條形圖,感興趣的小伙伴可以參考閱讀下2024-06-06
這篇文章主要介紹了使用Vue 自定義文件選擇器組件的實(shí)例代碼，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03