项目实战
1. 首页开发
-
环境搭建
开发环境:node.js、Vue-cli脚手架工具
开发IDE:VScode
版本控制工具:Git
检查环境搭建结果:
关于Vue-cli: Vue提供的官方命令行工具,可用于快速搭建大型单页应用。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟可创建并启动一个带热加载、保存时静态检查以及可用于生产环境的构件配置的项目:
# 全局安装 vue-cli npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 vue init webpack my-project # 进入项目文件夹 cd my-project # 安装依赖 -- 依赖将在项目路径下默认安装到node-modules文件夹下 npm install xx --save # 启动项目 npm run dev / npm run start
名词解释:
-
单页应用和多页应用
-
多页应用:页面跳转请求 - 返回HTML
- 优点:首屏时间快,SEO效果好
- 缺点:页面且缓慢
-
单页应用:判断页面跳转 - 通过JS清空当前加载HTML - DOM元素新的HTML渲染
- 优点:页面切换快
- 缺点:首屏时间慢(html + js 请求),SEO效果差
-
-
webpack打包工具
它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。
-
-
项目结构
在使用vue-cli创建的项目中,我们关注的重点是src目录。
main.js 入口文件 App.vue 根组件 router 路由信息 components 组件信息 assets 资源文件
首页开发的准备工作:
1. 在src目录下创建pages/home文件夹 2. 在home文件夹下创建components文件夹以及Home.vue文件 3. components文件夹存放构建首页的各种组件,Home.vue文件统一管理这些子组件。(Home模块父组件)
vue文件结构:
//模板区域 <template> <div> </div> </template> //脚本区域 <script> export default { //基于组件开发,data必须是函数方法返回形式 data() { return { } }, methods: { }, components: { } } </script> //样式区域 <style> </style>
组件开发须知:由于组件式的UI界面的开发数据是静态的。所以,下文中首先介绍的是基于axios的ajax请求进行在Home.vue数据请求,后续开发基于模拟请求到的数据。此外,组件式的UI界面开发中很多重复步骤,这里不做过多赘述,会在Header组件开发中详细说明,后续组件开发将粗略带过。