运行环境和发开环境
vue依托node环境,webpack工程化工具,cli脚手架…
node环境
node环境直接官网下载,回车安装
npm太慢不妨陪陪国内镜像源,还太慢,不妨使用cnpm
webpack
npm install webpack -g
vue-cli2
npm install vue-cli -g
项目创建:
vue init webpack 项目名(非中文)
vue-cli3
npm install @vue/cli -g
项目创建:
vue create 项目名(非中文)
创建过程中的提示:(几个不知道的)
babel:es6转es5 css pre pro~~:css预处理 linter:代码规范 unit testing:单元测试 e2e-testing:端对端
如果报错:试试这个
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
npm config set registry https://registry.npm.taobao.org
UI组件库的选择
pc端:Element-ui(饿了么)
移动:mint-ui(饿了么),vux,vant(有赞团队),cube-ui(滴滴团队) –推荐后两个mint-ui已经不维护了
使用一个ui组件库(cube-ui)
vuecli3脚手架安装方式:
vue add cube-ui
命令执行后会有以下几个提示:
use port compile(是否启用后编译) —-一般yes
import type(引入类型,按需引入还是全部引入) —一般选择第一个,按需引入
custom theme(自定义主题)
优化的写法
路由懒加载
原因:其实打开页面首屏会自动加载所有路由,而懒加载就是在哪个路由加载哪个路由
路由缓存
keep-alive
mock接口(模拟后端接口)
在vue.config.js里写接口,注意每次修改了,都需要重启
使用scroll滚动组件的一个技巧
我们的滚动容器最好是屏幕的高度,所以我们可以这么写
//设置滚动盒子的高度
const leftpanels=document.querySelector('.leftpanels')
const rightpanels=document.querySelector('.rightpanels')
const bodyheight=document.documentElement.clientHeight//获取body高度
leftpanels.style.height=bodyheight-57+'px'
rightpanels.style.height=bodyheight-57+'px'