移动端项目构造（结合项目实际情况）

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提交代码具体操作自己拿一个仓库去试；
移动端项目构造（结合项目实际情况）

猜你喜欢
