前言项目初始化 登录与注册 个人中心 首页 频道列表 文章搜索 文章详情 文章评论编辑用户资料 共9个模块本章要学习的是vue_cli项目里的【项目初始化】模块图片居多请根据文字和图片结合了解需要用到的工具HBuilder谷歌浏览器命令提示符。【项目初始化】模块一 、技能掌握5个部分创建项目 组件导入方式 字体图标的使用 REM适配 模块封装二、使用vue_cli创建项目方法图片居多步骤【1】命令提示符界面1、执行项目命令命令vue create news2、项目选择—— 2X (如图3、预处理器4、eslint5、lint6、config【2】进入UI界面1、命令提示符进入UI界面结果2、点击创建项目3、输入基本信息4、手动配置5、功能配置6、配置选项三、修改目录结构HBuilder软件1、App.vue修改2、routerindex.js修改3、删除多余文件删除里面的文件文件夹保存4、添加需要的项目5、在style文件夹中添加全局样式文件A.创建index.less,随便写点东西在里面B.main.js中引入文件。※ 加载全局样式项目经验自定义的全局样式文件最后放在所有样式最后方便去覆盖UI框架的样式。命令四、导入图片素材1、进入“https://www.iconfont.cn/”注册为开发人员并创建项目2、选择图标点击加入收藏3、点击“购物车”图案添加到项目4、如图5、点击进入复制6、在styleindex.less中导入文件命令import ./icon.less;7、调用图标素材命令1】 StyleIcon.less2】 App.vue8、静态图片的放入9、替换public文件夹ico文件五、导入移动端vant组件库链接https://vant-contrib.gitee.io/vant/v2/#/zh-CN/button1、通过npm安装1] 可以通过npm或yarn进行安装2] #Vue3项目安装最新版Vant命令npm i vant -S3] #Vue2项目安装Vant2命令npm i vantlatest-v2 -S2、引入方式1】按需引入使用组件比例底荐使用不建议2】手动按需引入组件麻烦不建议3】在main.js中导入所有组件推荐命令import Vant from vant;import vant/lib/index.css;Vue.use(Vant);※使用时直接去官网复制代码。4】操作技巧如何控制插入的图标注意红色部分代码p classiconfont icon-shenqingidreply/pvan-icon namereplayidreply/样式表#reply{ font-size: 30vw;}5】将图标单位转化为RemRem布局适配√A.动态设置 rem 基准值lib-flexible※命令npm i -S amfe-flexible※ Main.js中import amfe-flexibleimport amfe-flexible/index.jsB. postcss-pxtorem 是一款PostCSS 插件用于将 px 单位转化为 rem 单位※安装npm i postcss-pxtorem5.1.1 -S -D※注意不转换行内样式————————小技巧有哪些解决屏幕适应性方法1、postcss-pxtorem配合amfe-flexible2、flex布局3、vw代替rem及px——————六、封装请求模块1、安装命令npm iaxios2、在network当中创建request.js文件3、封装请求模块————————有帮助的话给我关注点点赞吧喜欢的话可以收藏一下。
