1.必須安裝node.js
2.搭建vue的開(kāi)發(fā)環(huán)境,安裝vue的腳手架工具 命令行 (腳手架配置一次就好)
? ? ?npm install -g @vue/cli
3.創(chuàng)建項(xiàng)目 必粗cd到相應(yīng)的一個(gè)項(xiàng)目里面
? ? ? 這個(gè)是vue3.以后的創(chuàng)建方法:
? ? ?vue create my-project?
? ? ? # OR
? ? ? vue ui? 運(yùn)行用: npm run serve
? ? ?以前的版本創(chuàng)建方式為:
方式1:
vue init webpack vue-demo01 (適合大型的項(xiàng)目創(chuàng)建的文件較多)
方式2:
vue init webpack-simple vue-demo02 (創(chuàng)建項(xiàng)目問(wèn)價(jià)結(jié)構(gòu)比較簡(jiǎn)潔,沒(méi)有語(yǔ)法檢查)
4. 路由
路由的配置
1> 安裝? cd 到項(xiàng)目目錄下
npm install vue-router --save
2> 引入? 在main.js中配置
? ??import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
3>配置路由
1創(chuàng)建、引入組件
2定義路由? (名字不要改按文檔上的來(lái))
const routes? = [ ?
? { path: '/home', component: Home}, ? { path: '/news', component: News},
? {path: '*', redirect: '/home'}//默認(rèn)跳轉(zhuǎn)路由
]
3實(shí)例化VueRouter
const router = new VueRouter({ routes
})
5掛載
new Vue({ ?
?? el: '#app', ?
?? router, ?
?? render: h => h(App)
})
5動(dòng)態(tài)加載的路由的預(yù)留
<router-view></router-view>