浅谈使用Vue全家桶做项目

引言

作者本人之前一直有写自己博客的打算，读了前辈 论程序员写博客的重要性 一文后决定迈出自己写博客的第一步。借用前辈的一段话，选则>努力>天分，天分居于最后一位原因在于我们大多数还没有到拼天分的那一步，相比较而言自己的选则和愿意为之投入的精力更重要一些。什么是天分?天分无外乎于更好的记忆力，更好的知识总结构建能力，更好的发散创新能力，充足的睡眠和饮食有助于提高记忆力，更多的阅读积累有助于扩展眼界提高创新能力，提高知识体系的构造能力可以从维护自己的博客开始，同时分享知识本身也是写博客的乐趣所在。

项目搭建

依赖环境配置

1. 开发基本环境检查。
2. 验证是否已经安装node.js node -v,网上可以轻松找到下载资源和安装方式，一共就解压安装和配置环境变量。
3. 验证是否安装配置vue vue -V，最新版本应该在4.0以上了。

创建一个项目

1. vue create project_name 创建一个新项目
2. Babel、TypeScript、Router、Vuex、Css Pre-processors都是必选的，个人不建议太过早的开启代码审查，不明原因的爆红让人不知所措，建议自己练习时先适应严格模式再去尝试在审查模式下进行开发。
3. npm install 安装基本依赖
4. cd project_name 路径迁移至项目文件
5. npm run serve 运行文件，这时候如果出现http://localhost:80xx就说明安装成功了，你可以关闭终端通过编辑器打开你的项目。

安装常用的依赖

1. npm install xxx -s使用依赖工具开发好比站在巨人的肩膀上看世界，现如今已经很少有人从石器时代起步，合理使用依赖能帮助你更流畅的开发。先会爬再会走，先会抄再会写，一样轮子也是先会用再会造。
2. 更好的参数处理 - Qs.js
3. 更好的请求交互 - Axios.js
4. 更好的加密处理 - Crypto-js.js
5. 更好的弹性布局 - lib-flexible/px2rem-loader.js
6. 更好的移动端组件库 - vant.js
7. 更好的图表工具 - v-charts.js
8. 更好的调试神器 - VConsole.js
9. …

配置路由Router

vue-router官方文档

	// vue-router.js
	const routes = [
    	{
   
        	path: '/',
        	name: '你的页面功能描述',
        	component: () => import('../views/Home.vue')
    	}, ...
    ]

	// xxx.vue
	this.$router.push('/');
	this.$router.push({
   path: '/', query: {
   a: aaa, b: bbb}}); /* 带参数传递 */

除了懒加载之外，更多的知识内容包括路由守卫…

配置一个状态管理Vuex

vuex官方文档

	import userTable from './xxxx/userTable' /* 用户表 */
	import loanTable from './xxxx/loanTable' /* 贷款信息表 */

	let store = new Vuex.Store({
   })
	store.registerModule('firstTable', userTable)
	store.registerModule('NextTable', loanTable)
	store.registerModule('comm',{
   
		namespaced: true,
		state: {
   
			testMessage: 'Hello Vuex'
		},
		getters: {
   
			getTestMessage:(state)=> {
   
				return state.testMessage
			}
		},
		mutations: {
   
			setTestMessage(state, data) {
   
				state.testMessage = data
			}
		}
	})
	export default store

• state 用于存放数据
• getters 用于调用获得state中的数据 this.$store.getters['xxx/xxx']
• mutations 同步方法，用于修改state中的值
• actions 异步方法，用于数据交互和处理 this.$store.dispath('xxx/xxx', {})

配置Rem弹性布局

1.npm安装依赖

	npm install lib-flexible -S
	npm install postcss-pxtorem -D	

2.在main.js中引用弹性布局依赖

	import 'lib-flexible/flexible'	

3.在index.html 修改像素设置

	<meta name="vi