warmedheart / vue_cli3_framework Goto Github PK

安装node（自带npm）

安装脚手架，执行创建命令： vue create my-project搭建vue-cli3

//vuecli3版本 @1(只是用脚手架3)
npm install -g @vue/cli
vue create my-project

//在脚手架3的基础上使用vuecli2版本 @2(先安装脚手架3，在安装脚手架2，两个都可以使用)
npm install -g @vue/cli-init
vue init webpack my-project

执行过程：安装babel、router、vuex 3.1 其中的core-js依赖附带所有 JavaScript 不同版本中标准库的实现，之后想了解es的实现可以参考。 3.2 参考文档： MDN中文文档 MDN英文文档 cdn引入 es6新特性 浏览器兼容性检测

创建webpack的配置文件vue.config.js，并新增配置（主要别名和代理）

全局路由和缓存文件中实现动态加载view文件中的router（防止单一router内容过多）和store（防止兄弟组件传值繁琐）。

安装axios，配置request请求方法。

安装lib-flexible，在main.js中引入，缩放浏览器html中的font-size一直是54px；修改flexible.js中的代码（源代码只考虑了移动端适配），已达到web端自适应。没有使用 px2remLoader插件进行px自动转rem（使用时第三方css也会进行转换），通过vscode安装插件cssrem自定义哪些需要转rem。

function refreshRem(){
    var width = docEl.getBoundingClientRect().width;
    // 屏幕宽度大于540，设置宽为540
    if (width / dpr > 540) {
    // width = 540 * dpr; 注释该行代码
    width = width * dpr;
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}

引入全局css、阿里图标库、公共方法。

引入element

引入sass（有时使用sass报错，将node_module删除重新 npm install）,并配置全局sass变量 variable.scss