前言
技术选型
搭建步骤
使用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)
具体的组件查看文档即可使用。
总结
優(yōu)網(wǎng)科技秉承"專(zhuān)業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營(yíng)理念，誠(chéng)信務(wù)實(shí)的服務(wù)了近萬(wàn)家客戶，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長(zhǎng)期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長(zhǎng)網(wǎng)站建設(shè)、網(wǎng)站與各類(lèi)業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門(mén)戶型、營(yíng)銷(xiāo)商務(wù)型、電子商務(wù)型、信息門(mén)戶型、微信小程序定制開(kāi)發(fā)、移動(dòng)端應(yīng)用（手機(jī)站、APP開(kāi)發(fā)）、微信定制開(kāi)發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。
公安局備案號(hào)：
專(zhuān)屬顧問(wèn)
