1,自然升級VUE-CLI到最新版本(卸載舊的,安裝追新的)。
npm卸載-g vue-cli
npm安裝-g @vue/cli
想看腳手架版的,敲這個。
vue版本
2.構建您的項目。
創建我的項目
當妳進入配置時,我問妳要不要,妳只要輸入YES。
還有,既然要VUE3,記得選VUE3就行了。
在這裏,壹個原始項目將是可用的。
3.在項目目錄中,構建壹個名為vue.config.js的文件,並在該文件中導出壹個對象。至於這個對象中的選項和匹配值,可以再寫壹篇文章。
4.配置路線(和子路線)
1)安裝路由插件?cnpm i vue-router@next -D
2)在src目錄下創建?router/index.js?
3)從'引入路由導入路由器。根目錄的main.js中的“/router”。
4)將路由器配置添加到Vue對象。
從“vue”導入Vue
從“vue路由器”導入vue路由器
'導入登錄信息自'../views/Login.vue '
Vue.use(VueRouter)
?常量路由= [
?{
路徑:“/”,
重定向:“/login”
?},
?{
路徑:“/login”,
名稱:'登錄',
組件:登錄
?},
?{
路徑:“/”,
component:resolve = & gt;要求(['../views/Index.vue'],resolve),
重定向:“/home”,
兒童:[
?{
路徑:“主頁”,
姓名:'家',
component:resolve = & gt;要求(['../views/home/Home.vue'],resolve),
Meta: {title:'主頁' }
?},
?{
路徑:“/programCard”,
名稱:'程序卡',
component:resolve = & gt;要求(['../views/programCard/card.vue'],resolve),
Meta: {title:'路由1'}
?}
]
?}
]
const router = new VueRouter({
?模式:“哈希”,
?base: process.env.BASE_URL,
?路線
})
導出默認路由器
5.安裝VUEX並使用它。
1)安裝vuex?cnpm i?vuex@next -D
2)在src目錄下創建?store/index.js?
3)在根目錄的main.js中引入?從'導入存儲。/商店'
4)在main.js中添加store的配置
6.配置axios
1)安裝vuex?cnpm i?axios@next -D
2)在src目錄下建立api/request.js,引入axios導入axios?來自“axios”
在request.js中創建壹個axios實例
添加請求攔截器和響應攔截器
然後導出要導出的實例。
3)在src目錄下建立api/index.js,引用axios實例,統壹定義請求函數。
7.在src下建立視圖目錄和路由子目錄home/Home.vue。
8.將css、iconfont、images和js目錄添加到assets目錄來存儲資源。
9.在根目錄下建立static\global.js。
定義常量constapi _ root = ' 127 . 0 . 0 . 1:8081 '
創建對象窗口. global={
url:{
apiUrl:"http://"+API_ROOT+"/"
}
}