移动端Vue项目总结——项目准备之项目代码初始化文件

因为之前一直做的都是PC端项目，在跟着老师来了一遍移动端项目后，学到了很多移动端项目需要注意的地方，这里也进行了记录

项目代码初始化
1、mete标签注意改动
因为是移动端app，所以用户看到的页面都是 禁止缩放的，因此在整个项目的入口文件，即vue脚手架搭建好的目录的index.html中，头部mete标签内要加上这样一段代码

minimum-scale=1.0, maximum-scale=1.0, user-scalable=no

2、引入reset.css
重置页面，因为在不同手机上默认样式不统一。重置代码在另一篇有些过~

3、引入border.css
主要解决移动端一像素边框问题 比如有的手机分辨率比较高，代码部分设置的一像素和手机实际显示的就会有差异
代码有点长，我待会单独放一篇吧~

3、引入fastclick库
主要解决移动端300ms点击延迟问题 比如有的手机机型会出现点击事件发生后，延迟300ms才执行。
引入方法
（1） 终端运行npm install fastclick --save 全局安装
（2）main.js中引入并使用

import fastClick from ‘fastclick’
fastClick.attach(document.body)

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import fastClick from 'fastclick'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import store from './store'
import 'babel-polyfill'
import 'style/reset.css'
import 'style/border.css'
import 'style/iconfont.css'
import 'swiper/dist/css/swiper.css'

Vue.config.productionTip = false
fastClick.attach(document.body)
Vue.use(VueAwesomeSwiper)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

这里贴上了main.js所有的代码，可以看到，所有项目中用到的可供全局使用的库都是在这个文件引入。

4、引入iconfont
（1）登录阿里巴巴图标库https://www.iconfont.cn/
图标管理→我的项目→创建项目
（2）使用字体图标
图标库→官方图标库→选择或搜索想要的图标加入购物车→点击购物车添加进项目（之前创建好的）→ 下载至本地 →压缩包解压

进入下载的文件目录


这些五个都是需要的 在项目中呈现下面这样一个结构

进入iconfont.css 修改默认路径 正确的引用字体文件

全局引入iconfont 即在main.js中引入

使用图标

注意：
如果后期我们想要使用其他图标怎么办？
一样到官网
图标库→官方图标库→选择或搜索想要的图标加入购物车→点击购物车添加进项目（之前创建好的）→ 下载至本地 →压缩包解压
将重新下载的四个字体文件替换成新的
再把iconfont.css中的 带有base64那一行 替换成新的
即可按之前的方法使用新的图标

5、安装stylus
（1）安装
npm install stylus --save
npm install stylus-loader --save

（2）使用

<style lang="stylus" scoped>
 /*这里就可以写带有逻辑的css代码*/
  /*scoped作用是隔离作用域，避免影响其他文件*/
</style>

上面就是正式做项目前的一些准备工作，感觉写起来好费劲，完全没有在笔记本上记得方便易看~

后面会再挑一些重要的内容继续记录~