移动端项目构造(结合项目实际情况)

时间:2022-04-15 15:30:35
1.重置浏览器默认样式;导入基础公共样式; App.vue <style lang="sass"> @import "../scss/base.scss";  sass语法需要安装:node-sass、sass、sass-loader依赖; </style>
或者 <style lang="less"> @import "../less/base.less"; less语法需要安装less、less-loader依赖; </style>
或者 <style> @import "../css/base.css"; css语法一般默认有依赖没有则需要下载style-loader、css-loader; </style>
引入字体图标, 在App.vue的style标签里面;(一般为阿里图库项目图标) @import url('//at.alicdn.com/t/font_nfzwlroyg2vuz0k9.css') ------------------------------------------------------------
2.rem 适配 推荐用淘宝js做主流设备的兼容性; flexible.js ------------------------------------------------------------
3.调试(安装eruda命令:cnpm i eruda -S)和模拟数据(安装mock.js命令cnpm i mockjs -S) // 只有在本地开发环境才加载vconsole 便于调试
if (process.env.NODE_ENV !== 'production') { require('eruda').init() } // 引入mock模拟本地开发数据
if (process.env.NODE_ENV == 'mock') { require('../mock/') } ------------------------------------------------------------
4.安装 babel-polyfill(命令cnpm i babel-polyfill -S)ES6 用于解决浏览器不支持原生功能的代码 ------------------------------------------------------------
5.安装 axios 或者 其他ajax封装库如fetch(新一代api)、vue-resource(停止维护)用于请求数据 ------------------------------------------------------------
6.安装vuex(视项目情况大小数据复杂程度决定) ------------------------------------------------------------
7.安装fastclick解决移动端点击300ms延迟(main.js) import FastClick from 'fastclick' FastClick.attach(document.body); ------------------------------------------------------------
8.修改main.js渲染方式(可要可不要建议这种) new Vue({ el: '#app', router, render: h => h(App) }) ------------------------------------------------------------
9.路由懒加载(一下两种方式都行第一种为webpack自带) 让路由按需加载,当需要用到的时候,才去加载对应的组件,利用webpakc的异步加载可以解决; const Car = r => require.ensure([], () => r(require('@/components/car')), 'car') //webpack自带 const Car = resolve => require(['@/components/car'], resolve) //commonJS写法
component: () => import('./components/Item.vue') //Es6写法
------------------------------------------------------------
10.异步组件(高级)看项目需求一般建议 components: { searchSearch: function (resolve) { //异步组件写法
     require(['./xxx.vue'], resolve) } } ------------------------------------------------------------
11.git/svn提交代码具体操作自己拿一个仓库去试;