-
安装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
npm install --save-dev node-sass sass-loader
- 增加.prettierrc.js文件写入规则不在对象最后一个属性加逗号
"trailingComma": "none"
,其他规则等后续写代码出现不适应的情况再解决。【vscode记得添加eslint插件帮助提示】
vue add @vue/eslint // 选择prettier 和 Lint on save