Vue项目开发流程

运行环境和发开环境

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'