vue简易项目流程思路简述

																									\(^o^)/~

1、首先得创建一个vue项目
cnpm install @vue/cli -g
安装全局vue-cli脚手架,用于帮助搭建所需的模板框架
vue create myapp 或 vue ui
或者直接找一个打包好的项目解压即可

2、创建基本结构（抽离页面组件和底部组件）
共同组件例如Footer抽离至comonents中，在views中那个需要在现实的地方加上视图组件即可
在App.vue中删掉页面组件和注册的方法

3、完成基本路由跳转（vue-router）
@vue/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、控制路由的变化,

	默认会被渲染为,可加一个tag属性来生成目标标签
	router-link通过增加一个to属性来指定链接
		eg: 
			

8、请求数据，填充页面(axios)
cnpm npm i axios -S
axios.get(“url”).then(res => { console.log(res.data )})

先把首页的基本布局完成，在使用axios请求数据
再把首页请求完的数据传给Prolist.vue
		export default {
			data () {
				return {
					prolist: []
				]}
			})
		}
		用组件间传值的方式进行传值。

9、如果数据是图片，可能会出现图片显示的问题
此时在public/index.html 添加如下代码即可

10、再添加各种效果
例如轮播图、电影评分、产品详情、登录注册、懒加载
上拉加载及下拉刷新、回到顶部
其中可能会涉及到ui库的使用、导航守卫、及状态管理器的应用