vue中腳手架的使用詳解(@vue-cli、@vue/cli)
更新時間:2026年05月17日 10:46:52 作者:夜空孤狼嘯
文章介紹了VueCLI的2.x和5.x版本,重點推薦使用5.x,詳細描述了安裝步驟和在Vue中使用axios的三種形式,最后總結(jié)了手動安裝Vue-router的經(jīng)驗
vue腳手架
Vue CLI 是一個基于 Vue.js 進行快速開發(fā)的完整系統(tǒng)
vue腳手架中分為兩個版本 下面介紹2.x和5.x版本
@vue/cli 5.x(推薦)
安裝步驟:
1 全局安裝@vue/cli
npm install @vue/cli -g vue --version 查看vue腳手架是否安裝成功
2 創(chuàng)建項目
vue create 自定義項目名
3 進入項目 并且 運行項目
cd 自定義項目名
npm run serve
public index.html
src
assets 靜態(tài)資源(圖片 視頻 音頻 js代碼 css樣式 ...)
components 存放普通組件
router 配置路由文件
views 存放路由組件
app.vue
main.js
vue-cli 2.x
安裝步驟
1 全局安裝 vue-cli
npm install --global vue-cli
2 創(chuàng)建一個基于webpack 模板的新項目
vue init webpack 自定義項目名
3 進入項目目錄 并且運行項目
cd 自定義項目名
npm run dev
生成目錄
build 執(zhí)行打包壓縮的文件
config 全局配置文件
node_modules 當前項目里邊所需要的依賴包
src 當前vue項目的核心文件
assets 靜態(tài)資源(圖片 視頻 音頻 js代碼 css樣式 ...)
components 當前項目中所有的普通組件都需要存放當前文件
router 配置是當前vue項目的路由配置
app.vue 全局主入口vue文件
main.js 全局主入口js文件
index.html 當前項目的首頁(根節(jié)點) vue是單頁面應用
package.json 里邊是當前項目的相關基本配置選項
以后寫項目的時候 我們一般操作的是在src文件中編寫你的項目
在vue項目中 普通組件都存放在components
所有的路由組件都存放在views
在vue腳手架中引入axios
三種形式:
1 局部引入
1 直接在vue-cli中安裝axios
npm i axios --save-dev
2 在需要請求數(shù)據(jù)的組件中引入axios
import axios from 'axios'
3 在需要使用axios位置上 寫上 axios.get() axios.post()
2 全局引入
1 安裝axios
npm i axios --save-dev
2 在main.js文件中引入axios
import axios from 'axios'
3 將axios設置給vue原型對象
Vue.prototype.axios=axios
4 在需要使用axios的位置上直接寫上this.axios.get()
3 全局引入
1 安裝axios vue-axios
npm i axios vue-axios --save-dev
2 在main.js中引入axios vue-axios
import axios from 'axios'
import VueAxios from 'vue-axios'
3 調(diào)用Vue.use()方法
Vue.use(VueAxios, axios) // 先后順序不要給我寫錯
4 在需要使用axios的位置上直接寫上this.axios.get()
vue若手動安裝vue-router
注意安裝的vue-router版本號 (3.0.0)
1 安裝vue-router
npm install vue-router --save-dev
2 創(chuàng)建一個router.js文件 引入vue-router
import VueRouter from 'vue-router'
3 在router.js文件中引入vue 并且使用vue.use()方法調(diào)用VueRouter
vue.use(VueRouter)
4 在router.js中創(chuàng)建router實例對象并且導出
const routes=[
{
path: '/',
component: index
}
]
const router=new VueRouter({
routes
})
export default router
5 在main.js文件中引入并且創(chuàng)建router實例
import router from './router'
new Vue({
el: "#app",
router,
...
})
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
基于Vue3和SpringBoot實現(xiàn)Web實時消息推送功能
這篇文章主要介紹了WebSocket實現(xiàn)實時通信,對比HTTP低效,通過SpringBoot+Vue整合實現(xiàn)消息推送,涵蓋聊天、股票等場景,文中有詳細的代碼示例供大家參考,需要的朋友可以參考下2025-05-05

