![27ba1086ed07771fee425cc769dc83eb.png](https://i-blog.csdnimg.cn/blog_migrate/43bfa2d6e282ec186b8786cf438db65e.png)
一、Vue项目的安装
1. 安装vue脚手架
Npm install --global vue-cli;如已经装过,可忽略
2. 新建安装vue 项目
Vue init webpack vue1(项目名称)
Cd >vue1 cd 到vue1根目录
3. 启动项目
Npm run dev,若启动失败 安装依赖环境,Npm install
二、路由的安装与配置
1. 安装路由
Npm install vue-router --save
2. 路由引入
Import Router form ‘vue-router’(main.js)
Vue.use(Router)
3. 配置路由
1) 新建并导入模块
创建相应的vue模块。例如已创建了(home.vue,news.vue)home与news模块
导入模块
Import Home form ‘/components/home’
Import News form ‘/components/news’
2) 定义路径
const routes=[
{path:’/home’,component:Home},
{path:’/news,component:News},
{path:’*’,redirect:’/home’}//设置默认路径
]
3) 实例化路由
const router={
routes,
}
4. 挂载路由
new Vue({
el:”#app”,
router,//挂载路由
})
5. 路由使用
1) 在需要使用路由的HTML里放置
<router-view></router-view>
2) 同时添加路由跳转链接
<router-link to="/index" class="head">首页</router-link>,填写路径(to)
三、网络请求vue-resource的安装及使用
1. 安装vue-resource
Npm install vue-resource --save
2. vue-resource的引入(main.js)
Import VueResource form ‘vue-resource’
Vue.use(VueResource)
3. vue-resource的使用
this.$http.get(url).then(res=>{
console.log(res)
})