vue運行自建頁面的流程配置,ajax配置

在components中寫vue文件,在assets中放css,js,static靜態文件

使用路由:

#安裝:cd先進入工程目錄
npm install vue-router	#要打對,他的有一個類似包很容易打錯

#main.js導入路由
import VueRouter from 'vue-router'
Vue.use(VueRouter)

#在components中新建Index.vue文件

#在main.js中:
#導入組件
import Index from "./components/Index.vue"
#定義路由規則
var routes = [
	{
		path:"/",	#根路徑
		redirect:'/Index'  #重定向
	},
	{
		path:"/index",
		component:Index
	},
]
#創建路由對象
var router = new VueRouter({
	routes	#這裏是路由規則所定義的名字
})
#掛載路由對象
new Vue({
  render: h => h(App),
	router  #new Vue添加這一行就可以了,與創建路由對象同名
}).$mount('#app')

#在App.vue中:
<router-view></router-view>	#子模板渲染位置標籤

#路由內部跳轉方式
<router-link to="/index">index</router-link>

使用Axios的ajax時配置:

#main.js中
#這裏使用Axios,去替代ajax
#1.安裝和導入 npm install --save axios
#2.導入Axios
import Axios from 'axios'
Vue.prototype.$ajax = Axios #利用Vue原型對象給vue對象添加了共享屬性,這使得Axios和原ajax沒什麼區別
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章