搭建一个拿来即用的vue工程

前言

  前端真是一环扣一环，如果有些许react基础的同学，学起vue来可谓是飞快。如果有vue基础，写起小程序来，简直就是刷一遍文档的事情。每个项目都需要创建一个工程，如今vue-cli已经发展到3.0的时代了。一改2.0的臃肿，虽然用vue-cli一步一步傻瓜操作很容易创建一个新项目，但其实并不好用，还需要我们做一些工作，让开发变得更加得心应手。

准备

安装node,最好使用nrm去切换一下npm源，或者使用淘宝镜像(其实并不推荐它，有些时候它所安装的路径会有问题，且它的速度并不是最快的)

$ nrm use cnpm

安装 vue/cli,参照官网一步一步下一步。当把官方文档安装走一遍之后，这时，一个初步的脚手架工程就搭起来了。之后我们安装一些更适合我们开发的依赖

依赖

• Less

$ npm install -D less-loader less

Less是css的预编译语言，你也可以选 SASS,Stylus。

之后我们在.vue写样式的时候

<style lang="less" scoped>
  ...
</style>

• vuex持久化

$ npm install --save vuex-persistedstate

vuex-persistedstate 是一款解决刷新后vuex states丢失的问题，可把vuex 写入本地存储，或者cookie;只需要简单配置:

// store.js
import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
  plugins: [createPersistedState({key: 'yourkey'})],
  state: {
  },
  ...
})

• CSS初始化

$ npm install --save normalize.css

normalize.css是CSS重置的现代替代方案，体积小，最大程度的屏蔽各浏览器差异。

// main.js
import "normalize.css"

• viewport解决方案

$ npm install postcss-px-to-viewport –save-dev

之前在解决头疼的移动端布局问题上，我们使用的是rem,最有名的可能就是阿里在2015年双十一的Flexible,把rem这种方案推向了前端浪潮,随着浏览器对viewport的支持越来越好,viewport登上了前端舞台,可以参考一下移动端页面的适配,配置:

//postcss.config.js
'postcss-px-to-viewport': {
  viewportWidth: 414,  //你的viewport宽度
  viewportHeight: ***,// viewport高度，可以不写
  unitPrecision: 5, //转化后保留位数
  viewportUnit: 'vw', //最好转化成vw,而不是vh
  selectorBlackList: ['.ignore', '.hairlines'], //黑名单
  minPixelValue: 1,
  mediaQuery: false, //是否转化媒体查询
  //exclude: /(\/|\\)(node_modules)(\/|\\)/   //如果想不转化node_modules文件
}

• vant有赞组件UI

$ npm i vant -S

可去它的官网自己一步步来 vant

总结

至此，一个适合移动开发的vue脚手架可基本打造完成了。
如果有更好玩的，本文还是会更新的，还有些牛逼的vue 性能优化，让你的单页面在不借助服务器渲染的情况秒开，下一章再叙述