前言
技术选型
搭建步骤
使用vue-cli快速搭建项目
配置字体图标库
主题色策略
适配各个机型
ui库配置
使用vue-cli快速搭建项目
安装vue脚手架：yarn global add @vue/cli
快速创建项目：vue create 项目名 选择vuex 选择vue-router 选择css预处理语言（sass、less都行） eslint选择
项目结构如上
图标字体库配置
创建项目
给该项目添加图标。
然后下载图标库到本地
解压文件后放入src/assets/font下
在入口文件：main.js中引入：
// 全局的公共样式
import"@/assets/style/main.scss"
主题色实现
定义主题色变量文件: assets/style/theme.scss
// :root代表根节点
// 默认主题的样色变量
:root{
// 定义css3变量， 全局注入
--base-color: #ffcc33;
}
// 灰色主题的变量
:root[theme="gray"]{
--base-color: #ccc;
}
定义了两套主题色，一套是默认，一套是灰色主题
在入口文件中引入上诉文件
import'@/assets/style/theme.scss'
页面中使用var()，获取主题色
.goods-title{
color:var(--base-color)
}
改变App.vue的根节点的属性theme即可实现主题色切换
<template>
<!-- 此时就为灰色的主题-->
<div id="app" theme="gray">
<router-view/>
</div>
</template>
移动端适配
安装插件：yarn add postcss-px-to-viewport -D
在项目的根目录下创建文件：postcss.config.js
在postcss.config.js中编写配置
module.exports={
plugins:{
// 插件：将px转换为vw
'postcss-px-to-viewport':{
// 设计稿宽度，你在设计稿上量出的宽度，不用自己换算，直接写。
viewportWidth:750,
}
}
}
ui库选择
安装：yarn add vant@latest-v2
在main.js中引入组件样式文件：import 'vant/lib/index.css'
在main.js按需引入你需要的组件
import{Button}from'vant'
Vue.use(Button)
具体的组件查看文档即可使用。
总结
优网科技，优秀企业首选的互联网供应服务商
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
