vue2.0 + vux 项目搭建

原创 15038098692 随笔 vue 103阅读 2019-01-15 17:03:56 举报

在项目文件夹下,git Bash here
1.npm install vue-cli -g
2.vue init airyland/vux2 projectPath

3.cd projectPath
4.npm install --registry=https://registry.npm.taobao.org[/bgcolor]
5.[bgcolor=#8bc34a]npm run dev

vux项目已运行

6.
安装stylus----(Stylus是一个CSS预处理器。)
npm install stylus --save
npm install stylus-loader --save

7.做适配-----
重置样式restet.css ----
解决1像素的问题,----
解决不同手机端适配的问题,----
阿里团队的高清方案rem和px2rem 插件(将px转化为rem)
解决移动端300s延迟的问题,----

如果引入了第三方框架,他们的样式是另一套写法,样式会被flexible转换,就会破坏框架的样式,这个怎么解决呢?

vue-cli3.0结合lib-flexible、px2rem实现移动端适配,完美解决第三方ui 库样式变小问题
http://www.cnblogs.com/skylineStar/p/10036525.html

vue中使用第三方UI库的移动端rem适配方案
https://segmentfault.com/a/1190000015238394

7步骤总结:
①样式-----
在src文件夹下边的common文件夹中的css文件夹中index.css文件,(包含重置样式和1像素边框,和常用变量设置)
在app.vue中的样式中引入,
<style lang="stylus">
@import './common/styles/index'
</style>

②js(阿里高清方案引入,px2rem引入和更改设置)-----

  在src文件夹下边的common文件夹中的js文件夹中新建flex.js文件,(阿里高清解决方法),
  在main.js入口文件中引入-----------import './common/js/flex'
  去掉目标文件的index.html头里的meta标签,(flexible会为根据屏幕自动给你加上,)

  配置px2rem
   npm install px2rem-loader  --save
 (找到build文件夹下utils.js,做修改)

8.安装 axios

(axios是promise实现的,提到promise,首先应该想到IE不支持,所以应该先加个垫片,给IE做下兼容性处理

  npm install --save babel-polyfill
   然后再main.js中引入
    import 'babel-polyfill')

npm install --save axios (目前只配置了这一步,main.js中还没有配备)
( 参照前端网步骤 -----在api中统一封装axios----调用接口)

npm install qs (引入qs插件----post请求的时候)

然后建议在src下新建一个文件夹api专门用来存放接口相关的文件和配置,
在api文件夹下新建api.js文件和index.js文件

在api.js中代码入下

import axios from 'axios'; // 在api.js中引入axios
import QS from 'qs'; // 引入qs模块,用来序列化post类型的数据,后面会提到

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复