\(^o^)/~1、首先得创建一个vue项目cnpm install vue/cli -g安装全局vue-cli脚手架,用于帮助搭建所需的模板框架vue create myapp 或 vue ui或者直接找一个打包好的项目解压即可2、创建基本结构抽离页面组件和底部组件共同组件例如Footer抽离至comonents中在views中那个需要在现实的地方加上视图组件即可在App.vue中删掉页面组件和注册的方法3、完成基本路由跳转vue-routervue/cli脚手架在创建项目时选择了vue-router所以无需再次安装但是如果你没有选择可以使用 cnpm i vue-router -S 安装在router.js中引入页面并配置路由eg: import Home from ‘./views/Home.vue’router: [{path: ‘/’,name: ‘home’,components: {default: () import(’/views/home/index.vue’),footer: Footer}}]4、在App.vue中删掉原先页面头部和底部的区域代码使用以下代码来代替5、多注册几个路由在浏览器地址栏输入地址查看效果(localhost:8080/home或者其他kind等等)6、将组件 (components) 映射到路由 (routes)然后告诉 Vue Router 在哪里渲染它们。创建好项目时会自动生成一个文件 router.js。如果没有的话执行以下步骤cnpm / npm i vue-router -S创建src/router.js构建 vue-router 的基本文件结构7、控制路由的变化,默认会被渲染为a/a,可加一个tag属性来生成目标标签 router-link通过增加一个to属性来指定链接 eg: router-link to/ tagli/router-link8、请求数据填充页面(axios)cnpm npm i axios -Saxios.get(“url”).then(res { console.log(res.data )})先把首页的基本布局完成在使用axios请求数据 再把首页请求完的数据传给Prolist.vue export default { data () { return { prolist: [] ]} }) } 用组件间传值的方式进行传值。9、如果数据是图片可能会出现图片显示的问题此时在public/index.html 添加如下代码即可10、再添加各种效果例如轮播图、电影评分、产品详情、登录注册、懒加载上拉加载及下拉刷新、回到顶部其中可能会涉及到ui库的使用、导航守卫、及状态管理器的应用