vue.js项目实战运用篇之抖音视频APP-第二节:项目基础架构搭建
【温馨提示】:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。
【项目地址】
项目采用Git进行管理,最终项目将会发布到GitHub中,感兴趣的小伙伴们可以一起学习,共同完善本项目。
项目地址:GitHub
第二节:项目基础架构搭建
创建项目
1.使用vue-cli 创建项目,命令如下:
【命令】:vue create drifting-cloud-app
vue create drifting-cloud-app
【解析】:drifting-cloud-app:为项目名称
回车(Enter)会提示选取项目所需特性,如下图:
这里选择【Manually select features】手动选择所需特性。
【温馨提示】这里按上下键移动选项,回车(Enter)确定选择。
接下来会提示选择所需配置,如下图:
本次项目我们选择Check the features needed for your project: Choose Vue version、Babel、Router、Vuex、CSS Pre-processors、Linter;等六个配置特性。
【温馨提示】这里按上下键移动选项,空格键选中选项,回车(Enter)确定选择执行。
依次会提示如下配置信息,如下图:
配置完成后,按回车(Enter)执行项目创建。当提示输入如下命令进入项目时,即为创建成功,如下图:
2.创建完成后,进入项目,执行如下命令
【命令】cd app
cd app
3.启动项目
【命令】:npm run serve
npm run serve
项目启动成功后提示如下:
查看项目
本地地址:http://localhost:8080/
网络地址:http://192.168.2.43:8080/
效果如下:
配置所需特性文件
配置第三方UI组件
本次项目使用VantUI组件进行UI架构,如需了解具体内容则转至官方文档进行学习拓展。
Vant官方文档:官方文档
1.Vant组件安装
执行如下命令进行组件安装,命令如下:
【命令】npm i vant -S
npm i vant -S
2.安装Vant配置插件
【命令】:npm i babel-plugin-import -D
npm i babel-plugin-import -D
3.配置 babel.config.js文件
【配置解析】进行如下配置,在组件内使用时,只需要引入组件就可以了,不需要再引入样式。
module.exports = {presets: ['@vue/cli-plugin-babel/preset',],"plugins": [//在组件内使用时,只需要引入组件就可以了,不需要再引入样式。["import", {"libraryName": "vant","libraryDirectory": "es","style": true}]]
};
移动端适配配置
1.安装插件
【命令】:npm i postcss-pxtorem postcss-px2rem lib-flexible style-resources-loader
npm i postcss-pxtorem postcss-px2rem lib-flexible style-resources-loader
【配置解析】:移动端适配 本项目将借助 postcss-pxtorem 插件实现,用于将 px 转换成 rem,并使用 lib-flexible 插件用于设置 rem 基准值。
2.main.js 文件中引入文件
import 'lib-flexible/flexible';// 实现了rem自适应布局
import './assets/styles/normalize.css';// 解决不同浏览器之间的差异
配置Webpack打包文件
需在项目中创建vue.config.js 文件,作为webpackp配置文件,具体配置内容如下:
const port = process.env.port || 8011;
const path = require('path');function resolve(dir) {// __dirname:项目的路径return path.join(__dirname, dir);
}module.exports = {outputDir: process.env.NODE_ENV === 'production' ? 'dist': 'douyin' ,productionSourceMap: false, // 生产环境是否 生成SourceMapdevServer: {port,// 启动之后 自动打开浏览器open: true,// 报错的时候全屏显示错误overlay: {warnings: false,errors: true},// 设置代理proxy: {'/api': {target: 'http://192.168.43.154:8080', // 配置你的服务器ws: true,changeOrigin: true},}},css: {},configureWebpack: {resolve: {alias: {'@': resolve('src')}}},chainWebpack: config => {const types = ['vue-modules', 'vue', 'normal-modules', 'normal']types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))},
}// 全局样式 变量、函数
function addStyleResource(rule) {rule.use('style-resource').loader('style-resources-loader').options({patterns: [resolve('src/common/styles/variables.less'),resolve('src/common/styles/mixin.less'),],})
}
【温馨提示】创建此配置文件为最外层,且同项目src文件夹同级。
创建访问配置文件
【配置解析】在平时开发项目的过程中,不同环境下的访问地址不同将其分为开发、测试、正式等环境,这样有利于项目访问地址的配置,不易造成错误,提高项目的准确性。可以借助 node.js 来判断 当前运行的环境,然后通过不同的运行环境 加载不同的访问地址。
1…env(开发环境)文件
NODE_ENV="development";
BASE_URL='/'
VUE_APP_BASE_API="/dev-api"
2…env.development(测试环境)文件
VUE_APP_ERUDA=true
NODE_ENV="development";
BASE_URL='/'
VUE_APP_BASE_API="/dev-api"
3…env.production(正式环境)文件
NODE_ENV="production";
BASE_URL='/'
VUE_APP_BASE_API="/prod-api"
项目基础结构
1.项目整体结构
2.项目目录结构
|- src 源码目录 |- assets 资源文件夹|--- fonts 图标字体 阿里图标字体|--- icons 项目图标|--- style 封装的公共样式 |- common 公共文件夹|- componments 封装的组件文件夹|- mixins 封装的mixins文件夹|- directives 封装的directives文件夹|- styles 公共样式文件夹|- layouts 整个应用的布局文件|- middlewares 中间件|- modules 应用的核心文件夹|- router 路由|- store vuex 状态管理|- utils 工具类|- views 视图页面|- main.js vue项目入口|- App.vue 根页面
|-.eslint.js eslint配置文件
|-babel.config.js 解析babel的配置文件
|-vue.config.js webpack配置文件
|-.env 访问地址配置文件(开发环境)
|-.env.development 访问地址配置文件(测试环境)
|-.env.production 访问地址配置文件(正式环境)
|- README.md 项目介绍
图标库的使用
1.了解字体图标库
在这里我们将使用阿里字体图标库进行图标配置,并运用到项目中。
官方网址:阿里图标库
那么为什么要使用图标库呢?
由于常规的本地图标在加载时会增加很多额外的 “请求”,这将会大大降低网页的性能。另外,图片还有一个缺点就是不能很好的进行 “缩放”,有时候在 “响应式设计” 中需要使用图像的最好解决方案就是不去使用图片,这样更能提高项目的性能。
2.使用图标库
首先通过如上官网连接进入图标库网站中,如下图:
再根据具体需求搜索相应图标,添加到购物车中,如下图:
添加到购物车后,点击购物车图标进入如下图:
进入后点击添加至项目,进入如下:
【温馨提示】此处若已有项目文件则选择相应文件即可,若没有则创建项目文件。
接下来进入图标类文件生成,如下图:
当点击连接后,如下图:
最后将新生成的图标类,复制到项目中即可,如下图:
3.项目引用文件
在main.js文件中添加如下代码:
import './assets/fonts/iconfont.css';// icon图标引入
4.挑选相应图标并获取类名,应用于页面即可使用
<i class="iconfont icon-xxx"></i>
【温馨提示】每次添加新的图标后需将font-face(接口路径)一并进行更新。
结束语
本文章主要进行了项目创建、基础配置文件的配置讲解及阿里字体图标库使用的详细步骤,如有疑问或不足,欢迎小伙伴们留言提问,本人将即使改进更新。
项目仓库
项目采用Git进行管理,最终项目将会发布到GitHub中,感兴趣的小伙伴们可以一起学习,共同完善本项目。
项目地址:GitHub
上一篇:项目环境搭建
下一篇:底部导航栏组件功能
vue.js项目实战运用篇之抖音视频APP-第二节:项目基础架构搭建相关推荐
- vue.js项目实战运用篇之抖音视频APP-第十一节: 注册登录及验证码功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
- vue.js项目实战运用篇之抖音视频APP-第一节:项目环境搭建
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
- vue.js项目实战运用篇之抖音视频APP-第四节:顶部导航栏组件功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
- vue.js项目实战运用篇之抖音视频APP-第十节: 评论列表功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
- vue.js项目实战运用篇之抖音视频APP-第六节: 首页视频详情功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
- vue.js项目实战运用篇之抖音视频APP-第九节: 视频上滑下拉播放功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
- vue.js项目实战运用篇之抖音视频APP-第八节: 视频播放功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
- vue.js项目实战运用篇之抖音视频APP-第三节:底部导航栏组件功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
- vue.js项目实战运用篇之抖音视频APP-第十五节: 朋友页面功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
最新文章
- 如何创建自己的docker image并上传到DockerHub上
- python的用途实例-Python实例方法、类方法、静态方法的区别与作用详解
- Python Argparse模块
- iOS开发——XML/JSON数据解析
- Redis 基本数据类型 :String、Hash、List、Set、ZSet
- VC.NET字符指针与String的转换
- 建立计算机科学系的学生视图,SQL语句练习及答案
- arrayvalue php,phparrayvalue
- 以拯救之因 强制恢复导致ORA-600 4000错误案例
- 马哥Linux第52期-第四周作业
- CANOE使用八:自动化测试OSEK网络管理(创建TestModule-搭配Panel界面及使用Capl识别配置文件TXT的自动化测试流程)
- 社会性动物1: 从众的原因,如何避免
- FSCE: Few-Shot Object Detection via Contrastive Proposal Encoding个人理解
- 基础: 有效值、RMS、振幅、幅度概念
- MCU设计之 - 启动模式(Boot0Boot1)
- Android实现snmp协议(一)
- python使用GDAL/OGR/OSR时设置GDAL_DATA环境变量
- DBA的工作职责和每日工作
- 用LaTeX写作业——插入图片
- 点波地图css,沙漠地图,提波镇点位玩法攻略
热门文章
- python 实现输入一段英文,找出其中出现次数最多的单词,打印出出现最多的单词和次数
- 推广域名被微信拦截怎么办 被拦截的域名怎么做跳转
- 红旗linux无线网卡,红旗6.0一步一步搞定cdma无线网卡
- Matlab App Designer自学笔记(七):对话框的使用(提示对话框、提问对话框、文件对话框)
- Windows7 旗舰版原版镜像下载
- shl 和 shr
- 搜狗浏览器,添加自定义搜索引擎~
- vue3动态路由addRoute
- 安全修复之Web——【中危】启用了不安全的TLS1.0、TLS1.1协议
- 基于Java爬虫的课堂考勤管理系统(毕业设计论文)