# vue-vant-template **Repository Path**: devr00t/vue-vant-template ## Basic Information - **Project Name**: vue-vant-template - **Description**: 使用vue+vant搭建的基础模板,用于新项目初始化 - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 4 - **Created**: 2021-07-07 - **Last Updated**: 2021-11-06 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README > **vue + vant app 基础框架** > 本框架用于新项目 # 1 介绍 ## 1.1 目录结构 本项目已经为你生成了一个完整的开发框架,提供了涵盖中后台开发的各类功能和坑位,下面是整个项目的目录结构。 ```Shell ├── build # 构建相关 ├── mock # 项目mock 模拟数据 ├── plop-templates # 基本模板 ├── public # 静态资源 │ │── favicon.ico # favicon图标 │ └── index.html # html模板 ├── src # 源代码 │ ├── api # 所有请求 │ ├── assets # 主题 字体等静态资源 │ ├── components # 全局公用组件 │ ├── directive # 全局指令 │ ├── filters # 全局 filter │ ├── icons # 项目所有 svg icons │ ├── router # 路由 │ ├── store # 全局 store管理 │ ├── styles # 全局样式 │ ├── utils # 全局公用方法 │ ├── vendor # 公用vendor │ ├── views # views 所有页面 │ ├── App.vue # 入口页面 │ ├── main.js # 入口文件 加载组件 初始化等 │ └── permission.js # 权限管理 ├── tests # 测试 ├── .env.xxx # 环境变量配置 ├── .eslintrc.js # eslint 配置项 ├── .babelrc # babel-loader 配置 ├── .travis.yml # 自动化CI配置 ├── vue.config.js # vue-cli 配置 ├── postcss.config.js # postcss 配置 └── package.json # package.json ``` ## 1.2 安装 ```Shell # 克隆项目 git clone https://gitee.com/nichengjing/vue-vant-template.git # 进入项目目录 cd vue-vant-template # 安装依赖 npm install 或 cnpm install # 本地开发 启动项目 npm run dev ``` 启动完成后会自动打开浏览器访问 `http://localhost:9527` # 2 风格指南 ## 2.1 Component 所有的 Component 文件都是以大写开头 (PascalCase),这也是官方所推荐的。 但除了 index.vue。 例子: - @/components/BackToTop/index.vue - @/components/Charts/Line.vue - @/views/example/components/Button.vue ## 2.2 JS 文件 所有的.js 文件都遵循横线连接 (kebab-case)。 例子: - @/utils/open-window.js - @/views/svg-icons/require-icons.js - @/components/MarkdownEditor/default-options.js ## 2.3 Views 在 views 文件下,代表路由的.vue 文件都使用横线连接 (kebab-case),代表路由的文件夹也是使用同样的规则。 例子: - @/views/svg-icons/index.vue - @/views/svg-icons/require-icons.js 使用横线连接 (kebab-case)来命名 views 主要是出于以下几个考虑。 - 横线连接 (kebab-case) 也是官方推荐的命名规范之一 文档 - views 下的.vue 文件代表的是一个路由,所以它需要和 component 进行区分(component 都是大写开头) - 页面的 url 也都是横线连接的,比如应该要保持统一 - 没有大小写敏感问题 # 3 keep-alive 的使用 ## 3.1 应用场景 在开发中经常有从列表跳到详情页,然后返回详情页的时候需要缓存列表页的原来数据以及滚动位置,这个时候就需要保存状态,要缓存状态。 概括来讲: - 列表页面 —— 进入详情页 —— 后退到列表页(缓存列表页的原来数据以及滚动位置) - 重新进入列表页面,获取最新的数据 ## 3.2 如何使用 1、创建 router 实例的时候加上 scrollBehavior 方法 ```js const createRouter = () => new Router({ routes: constantRoutes, scrollBehavior(to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } } }) ``` 2、在 store 的 app 子模块里加入需要缓存的组件的组件名,和对应的方法 ```js export default new Vuex.Store({ state: { includeList: [] }, mutations: { SET_INCLUDELIST: (state, includeList) => { state.includeList = includeList } } }) ``` 3、在 AppMain.vue 中 ```html ``` 4、在 beforeRouteLeave 钩子函数里控制需要缓存的组件 注意:beforeRouteLeave 导航守卫是必须写在当前单页面中,不能写在 App.vue 中 ```js beforeRouteEnter(to, from, next) { // 进入之前缓存本组件,解决第一次不缓存列表页的问题 next((vm) => { vm.$store.commit("SET_INCLUDELIST", ["good-list"]); }); }, beforeRouteLeave(to, from, next) { // 跳转到详情页时缓存当前列表页,反之不缓存 if (to.path.indexOf("good-detail") > -1) { this.$store.commit("SET_INCLUDELIST", ["good-list"]); } else { this.$store.commit("SET_INCLUDELIST", []); this.$destroy(); // 销毁vue实例 } next(); } ``` # 4 iconfont element-ui 自带的图标不是很丰富,但管理后台图标的定制性又很强。这里推荐使用阿里的 iconfont ,简单好用又方便管理。 这里来简单介绍一下 iconfont 的使用方式。首先注册好 iconfont 账号之后,可以在我的项目中管理自己的 iconfont 。 ![alt iconfont项目信息](markdown-imgs/iconfont项目信息.png) ![alt iconfont图标管理](markdown-imgs/iconfont图标管理.png) > 下面提供了 iconfont 图标的两种使用方式,一般情况下默认使用第二种 Symbol 方式 ## 4.1 Font class 方式 应用场景:需要配合 element 的组件使用时 1、点击下载至本地,将所有文件放入 icons/font-class 目录下 2、打开 iconfont.css 文件添加类,如下 ```css [class^='el-icon-my'], [class*=' el-icon-my'] { font-family: 'iconfont' !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ``` 3、main.js 中引入 iconfont.css 文件 ```js import '@/icons/font-class/iconfont.css' ``` 4、直接使用下面代码,不需要和原来一样写两个类名 ```html ``` ## 4.2 Symbol 方式 应用场景:左侧菜单栏或需要支持多色图标 1、将单个图标 svg 下载,放入 icons/svg 目录下,重命名为 home 2、直接使用下面代码 ```html ``` # 5 非父子组件之间传值 vuex 中一般存放全局变量,如登录 token,用户信息,或者是一些全局个人偏好设置等,每个页面里存放自己的 data 就行。 下面的 eventBus 组件之间传值的时候会有 bug,[详见](https://www.jianshu.com/p/fde85549e3b0),所以还是使用 vuex # 6 权限验证和动态路由 # 7.后台接口和本地 mock 同时使用,打包时移除 mock 1、utils/request.js 中放开 baseUrl ```js const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url // withCredentials: true, // send cookies when cross-domain requests timeout: 5000, // request timeout 使用代理后,此设置项无效 headers: { // IE模式下取消请求缓存 'Cache-Control': 'no-cache', Pragma: 'no-cache' } }) ``` 2、.env.development 中`VUE_APP_BASE_API = ''` ```Shell # just a flag ENV = 'development' # base api # VUE_APP_BASE_API = '/dev-api' VUE_APP_BASE_API = '' ``` 3、vue.config.js 中 ```js devServer: { port: port, open: true, overlay: { warnings: false, errors: true }, proxy: { [process.env.VUE_APP_BASE_API + '/api']: { target: 'http://192.168.0.200:9999', changeOrigin: true, pathRewrite: { ['^' + process.env.VUE_APP_BASE_API]: '' } } }, after: require('./mock/mock-server.js') } ``` 4、打包时移除 mock,在 mian.js 中将下面代码注释 ```js /* if (process.env.NODE_ENV === 'production') { const { mockXHR } = require('../mock') mockXHR() } */ ``` 5、后台接口和 mock 接口共存 开发环境:webpack 自动开启 mock 服务,只用将`/api`开头的后台接口代理,`/mock`开头的 mock 接口会自动请求本地 mock 服务 生成环境:在 nginx 中将`/api`开头的后台接口代理到后台服务,`/mock`开头的 mock 接口代理到 mock 服务 # 8.接口请求全局 loading 可以有效防止用户快速点击或网上慢时多次重复请求的问题 # 9.vant 定制主题并设置全局变量 安装 less、less-loader、style-resources-loader、vue-cli-plugin-style-resources-loader ```js cnpm install less -D cnpm install less-loader -D cnpm install style-resources-loader -D cnpm install vue-cli-plugin-style-resources-loader -D ``` babel.config.js 中加入 ```js plugins: [ [ 'import', { libraryName: 'vant', libraryDirectory: 'es', style: (name) => `${name}/style/less` }, 'vant' ] ] ``` 将 vant 官网上的 less 变量全部粘贴到 styles/variables.less 文件中 vue.config.js 中加入 ```js const vantTheme = path.resolve(__dirname, './src/styles/variables.less') module.exports = { css: { loaderOptions: { less: { // 若 less-loader 版本小于 6.0,请移除 lessOptions 这一级,直接配置选项。 lessOptions: { modifyVars: { // 或者可以通过 less 文件覆盖(文件路径为绝对路径) hack: `true; @import "${vantTheme}";` } } } } }, pluginOptions: { 'style-resources-loader': { preProcessor: 'less', patterns: [path.resolve(__dirname, 'src/styles/variables.less')] } } } ``` # 更新记录 **v0.1** :2020-12-17 删除无用代码,创建基本模板 vue-vant-template **v0.2**:2020-12-18 vue 文件代码片段,引入 vant 组件完成登录模块 **v0.3**:2020-12-21 引入 Tabbar 组件,制定页面布局组件和路由规则 **v0.4**:2020-12-22 删除昨天的布局,封装普通页面和首页页面布局组件,完成首页的 tabbar 路由切换 **v0.5**:2020-12-23 vant 定制主题并设置全局变量,样式全部修改为less。首页tabbar的数据放到vuex中如果已存在则不请求并mock其接口。完成首页轮播图和宫格功能。 **v0.6**:2020-12-24 将首页的轮播图和宫格封装成公共组件。完成tab标签页功能,点击才请求并缓存内容页。 **v0.7**:2020-12-25 (1)tab标签页列表上拉加载功能,封装Loading组件,制作页面loading,将所有toast设置成背景不可点击,防止多次提交。(2)将axios的路由拦截和路由守卫中的loadingNum和pageInit结合使用,页面初次打开时所有接口请求成功之前显示loading页面或骨架屏(3)首页功能完成,封装了房源卡片组件 **v0.8**:2020-12-28 搜索模块完成70% **v0.9**:2020-12-29 完成首页、搜索、列表、详情模块功能及其keep-alive **v1.0**:2020-12-29 设置白名单,不在白名单中的路由会自动跳转到登录页面