浅谈使用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="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

4.配置postcss-pxtorem
在安装postcss-pxtorem的时候会生成一个文件.postcssrc.js
在根目录找到.postcssrc.js文件，可以在此配置的基础上根据项目需求进行修改，如：

 module.exports = {
     
   plugins: {
     
     //...
     'autoprefixer': {
     
       browsers: ['Android >= 4.0', 'iOS >= 7']
     },
     'postcss-pxtorem': {
     
      rootValue: 37.5, //vant-UI的官方根字体大小是37.5
      propList: ['*']
    }
  }
}

注意是在原有的基础上添加,同时存在两个plugins对象会报错
5.重启服务

	npm run serve

配置Axios

1.位于/src/plugin/ 创建xxxx.js

 import axios from 'axios'
 
 /* Axios基础配置 超时时间/默认请求地址/请求头 */
 axios.create({
     
     baseURL: 'https://xxx.dbank.xxx.xxx.com'
     timeout: 30000,
     headers: {
     
 		'Content-Type': 'application/x-www-form-urlencoded' //Form Data
 		//'Content-Type': 'application/json'
    }
})

/* Axios请求拦截器 */
axios.interceptors.request.use(function (config) {
     
        /* 在请求发送之前做些什么 */
        return config
    }, function (error) {
     
        /* 对请求发生的错误做处理 */
        return Promise.reject(error)
    }
)

/* Axios响应拦截器 */
axios.interceptors.response.use(response => {
     
        /* 对响应数据做些什么 */
        let resp = response.data;
        if (resp.success) {
     
            return response.data.data
        } else {
     
            return Promise.reject(new Error('出错了'))
        }
    },
    // eslint-disable-next-line handle-callback-err
    error => {
     
        console.info('错误了')
    }
)

开发流程

模块开发思路

培养组件化的意识，通常起步阶段不了解应用场景，在这里先举两个简单的例子：

1. 当展示内容是循环数据体时。例如你要查询一列表的商品，他们的数据结构一致，交互逻辑一致，应当抽调成组件。
2. 当项目中多次出现相同内容时。例如仅有内容差异的弹出框，滚动选则器，通知栏等等，应当抽成组件

数据和视图的拆分，所有的数据存取交给Vuex进行，前后端的数据交互也交给Vuex存放于相关模块的state中，当页面需要取值时就使用$store.getters[]就好比从数据库中存取数据。视图只关心显示内容的样式而非内容本身。

视图 对象 Vuex 使用v-model 双向绑定数据 将交易请求数据交给Vuex 查询返回的值交给对象 控制交易交互 存放双向数据 依靠数据驱动视图显示的内容 视图 对象 Vuex

父子组件通信

父组件传递数据给子组件

父组件传值给子组件通过props属性来实现

 <子组件名称 :child-msg=msg></子组件名称> //父组件传值

 props: ['childMsg'] //引号包裹，逗号分割
 props: {
      childMsg: Array} //指定了数据类型
 props: {
      childMsg: {
      type: Array, default: [0,0,0]} } //指定数据类型同时实现了默认值

子组件传递数据给父组件

本质上向上通讯vue中是不允许的，但是子组件可以通过触发事件来通知父组件改变数据达到目的。

子组件

 <div class="page_module" @click="chengeFlag">{
     {
      moduleTitle }}</div>
 ...
 ...
 methods: {
     
 	chengeFlag() {
     
		this.$emit('delFlag', false);
	}
 }

父组件

 <子组件名称 @delFlag="updateFlag"></子组件名称>
 ...
 ...
 methods: {
     
 	updateFlag(flag) {
     
		this.moduleFlag = flag; 
	}
 }

(不推荐) 子组件直接调用父组件方法
通过this.$parent.eventName()的方式直接调用父组件的方法

Vuex跨module通讯

vuex深入理解 modules 作为参考，由于涉及内容较多，后续会单独总结关于Vuex的文章。下面简单说一下rootState：

 actions: {
     
 	loanCodeSelect({
     state, commit, rootState}, account) {
     
		console.log(state); // 本模块中的state
		console.log(rootState); // 根目录下的所有模块state
		let userN = state.userName; // 直接从模块中的state取userName
 		let userName = rootState.userTable.userName; //从根组件访问用户表state再取出userName
	}
 }

抛开其他的长篇大论，显而易见，rootState使用其实非常简单，只需要在对象名之前加上模块命名即可，就好比后端访问数据库需要提供表名一样。
但是值得注意的是，不合理的使用造成数据污染的问题，取值没有风险，但是赋值需要更谨慎一些，例如涉及用户表信息建议约束自己只读，避免不必要的维护投入。

拓展性更高的建议

views视图部分

除去项目入口页面之外，所有页面都应该处于子文件夹之中，且每个子文件夹不应出现过多的页面，以<=5个页面为宜，页面命名已易读为原则尽量避免简写。有层级感的项目总是能更容易定位到标的页面。

store数据驱动部分

用户数据表和业务数据表分开，用户数据表有且只有一个，业务数据表可以根据项目的复杂程度进行拆分，原则上 解耦内聚 。

plugin封装js部分

通常是封装了项目中积累下来的轮子，注意不要重复就好。方法需要export抛出来才能访问到。

assets静态资源部分

通常存放项目中用到的图片元素，注意分项目模块存储或者注意命名也可。

写在最后

感谢在我初次做前端项目时，每一位愿意梳理并分享应用知识的博主，作者入行时间尚短，文章之中浅显、错误之处会在后续时间里逐步完善和修正，原同你们一起守护程序圈子中这一片净土。谢谢[手动狗头]