Vue项目开发

项目开发流程

前言:人生所谓的成功,就是坚持把一件事情做到极致

在开发项目的过程中,每个人写代码的格式都是不一样,为了代码规范,会开启eslint(严格)规范,帮助检测代码是否规范,如果不规范,自动按着既定的规范格式化,在搭建脚手架之前,要在编辑器安装eslint插件,配置编辑器的自动保存eslint格式,然后在首选项打开设置json里进行配置,用eslint的规范来检测文件,比如js文件。
首先,要搭建脚手架 ,因为eslint版本的不同,可以手动自己下载插件进行配置,脚手架搭建成功后,
要在package.json文件中的devDependencies里面配置eslint版本,配置完成后,重新下载依赖库,然后在根目录下创建一个vue.config.js文件进行配置 lintOnSave改成"warning",还要在根目录下创建一个.eslintrc.js文件进行代码规范的配置,这样eslint规范就配置完成啦。
在一个项目中,还要进行多环境变量的配置,首先要在package.json 里的 scripts 配置 serve stage build来执行不同的环境,然后在根目录下新建以.env开头的三个文件,这三个文件分别是,开发环境,测试环境,生产环境,在三个文件中,只定义了基础的变量,我们要统一在src下新建config的env.环境名.js里进行管理,然后在config文件下的index.js中导出,在src下创建一个http文件夹,有index.js文件封装axios,首先导入axios,在创建axios实例,配置拦截器,请求拦截器和响应拦截器,在导出axios实例,还要根据环境不同引入不同baseApi地址,在创建axios实例的请求接口换成引入的地址接口。
项目中需要进行请求接口,为了避免麻烦,方便日后维护,在src下新建一个api文件夹,有api.js文件先引入axios的实例,然后封装api接口,然后注册接口,调用即可。
在做移动端的项目时候,要安装vantui组件方便布局,vantui我使用的是按需引入的形式,所以,还要安装一个组件是 babel-plugin-import -D的组件,编译的过程中将import的写法自动转化为按需引入的方式,然后在babel.config.js中,进行配置,在单健一个vant.js文件,在文件中先引入vue实例,在引入要使用的组件,利用import引入,然后使用组件vue.use(组件名),还要在main.js里引入vant.js以及css样式,这样就可以按需引入的形式来使用vantui。
移动端项目,样式是需要手动写的,为了节省时间加快效率可以对sass封装。先创建一个global.scss文件做一下样式清除,和公共的一些样式美化。在创建一个mixins.scss文件存放一些比如清除浮动或者多行文本溢出的公用样式,这些都是每个项目会用到的东西,所以配置好了放入项目中直接进行调用即可。
最后还需要进行移动端适配,主流的有rem和vm两种,在这个项目中我用的是rem。先下载lib-flexible postcss-plugin-px2rem这两个插件,然后创建vue.config.js文件进行配置,最后在main.js 文件中导入: import “lib-flexible/flexible”;就可以用啦。
项目中,常用的组件
1.返回顶部组件
2.上拉加载更多组件
3.吸顶效果组件
4.搜索组件

7.优化

你可能感兴趣的:(vue.js)