(二)部署UI框架 | 使用Vue搭建微信开发的脚手架

苟哥 2019-10-25 PM 1658℃ 0条

团队实力还不够的时候，通常会选择一些开源的框架，此项目的前端也是选用第三方UI框架。基于vue的移动端webUI框架很多：VUX、Vant等，经过一番研究了解，最终选择有赞团队维护的Vant。（建议大家在选择正式项目的框架时，从几个角度去评判：维护团队的实力、维护计划，是否仍在维护中等）

接下来就是将vant融合到项目中的步骤：

###### **一、安装vant:**

1. 执行安装命令：

```shell
   npm  i  vant  -S
   ```

2. 引入组件：

1) 有四种引入组件的方式，墙裂推荐使用自动按需引入组件 (没有理由)，执行命令 :

```shell
   npm i babel-plugin-import -D
   ```

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式 ;

2) 修改babel.config.js配置，修改后文件内容为：

```js
   module.exports = {
       presets: [
           '@vue/app'    
       ],
       plugins: [        
           ['import', {
                libraryName: 'vant',
                libraryDirectory: 'es',
                style: name => `${name}/style/less` //要修改主题时用到//style: true        		}, 'vant']    
           ]       
    }
   ```

16. 定制主题

1) Vant 使用了 Less 对样式进行预处理 ,因此要定制自己的主题，需安装less-loader插件，执行:

```shell
npm install less less-loader -D
    ```

2) 修改vue.config.js，增加less-loader模块配置，修改后文件内容为:

```js
    module.exports = {    
    	configureWebpack: {        
    		resolve: {            
    			alias: {
    				'assets': '@/assets',
    				'common': '@/common',
    				'components': '@/components',
    				'network': '@/network',
    				'router': '@/router',
    				'views': '@/views',            
    			}        
    		},
    		module: {            
    			rules: [                
    				{                    
                        test: /\.less$/,                    
                        use: [                        
                            {                            
                                loader: 'less-loader',                            
                                options: {                                
                                    modifyVars: {// 直接覆盖vant里的变量
                                        'tabs-line-height': '46px',                             
                                    }                            
                                }                        
                            }                    
                        ]                
    				}            
    			]        
    		}    
    	},    
    	devServer: {        
    		port: process.env.VUE_APP_DEVSERVER_PORT    
    	}
    }
```
    
    
    
17. 测试安装成功

5. 修改完配置文件记得重启服务: npm run serve。在Home.vue文件中，添加button组件，文件内容如下：

```vue
   <template>
       <div>
           <h2>这是首页</h2>
           <van-button type="primary">默认按钮</van-button>
       </div>
   </template>
   <script>
       import Vue from 'vue';import { Button } from 'vant';    
       Vue.use(Button);
       export default {
           name: 'Home',
           components: {            
               Button        
           }    
       }
   </script>
   <style scoped></style>
   ```

21. 即可在页面上看到vant的button样式。到此，我们已经成功将vant融合到项目中，在接下去的开发中，按需引入即可。

22.

23. Vant的其他用法，详见官网（官网是最好的指南）：

https://youzan.github.io/vant

######

###### **二、引入iconfont字体图标库**

1. 进入[阿里巴巴矢量图标库](https://www.iconfont.cn/)创建新项目

2. 新建项目，配置值如下（为了和后续内容一致，建议参照这个）：

![创建图标库.png][1]

3. 先随意增加一个图标到项目，获取项目的 “Font class”链接：

![获取项目链接.png][2]

将拿到的链接放入到项目的中assets/css/base.css  (记得先创建base.css)，内容如下：

```css
/** * Created by PhpStorm. 
* Script Name:  
* Create: 2019/10/25 14:05 
* Description:  项目公共样式文件 
* Author: Doogie<fdj@kuryun.cn> 
*/
@import url("//at.alicdn.com/t/font_1476468_j6ea5nv9mfn.css");
```

4. 引入base.css:

在App.vue文件中引入base.css，App.vue内容如下：

```vue
<template>  
<div id="app">    
    <router-view/>  
    </div>
</template>
<style>  
    @import "assets/css/base.css";
</style>
```

至此，我们已经将整体的静态部分的部署工作搞定了，从下篇开始微信开发的常用功能和逻辑业务的开发

[1]: http://images.kuryun.com/blog/typecho/%E5%88%9B%E5%BB%BA%E5%9B%BE%E6%A0%87%E5%BA%93.png
  [2]: http://images.kuryun.com/blog/typecho/%E8%8E%B7%E5%8F%96%E9%A1%B9%E7%9B%AE%E9%93%BE%E6%8E%A5.png

标签: VueJs, 脚手架, VueJs实战项目

非特殊说明，本博所有文章均为博主原创。

如若转载，请注明出处：http://www.i366211.com/archives/32/

上一篇 (一)项目的初始化 | 使用Vue搭建微信开发的脚手架

下一篇生成测试数据

(二)部署UI框架 | 使用Vue搭建微信开发的脚手架

评论啦~

栏目分类

标签云

友情链接申请

(二)部署UI框架 | 使用Vue搭建微信开发的脚手架

 评论啦~

 栏目分类

标签云

友情链接申请

评论啦~

栏目分类

标签云

友情链接申请