WebApp项目笔记总结，从环境创建~技术点分析，内容超详细！

最新推荐文章于 2023-02-17 15:04:10 发布

自律一点就好了

最新推荐文章于 2023-02-17 15:04:10 发布

阅读量462

点赞数 1

分类专栏： vue webapp 文章标签： vue vue.js javascript css

本文链接：https://blog.csdn.net/Jin_x1ng/article/details/110325915

版权

vue 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

webapp

1 篇文章 0 订阅

订阅专栏

WabApp项目

前端技术栈：vue + vuex + vant + vue-router + ES6 + sass + element-ui

调试工具：devtools

环境创建

在项目根目录打开命令行输入vue creat vue-webapp 选2版本
cd vue-webapp 进入文件夹
拿到项目先在package.json 配置启动服务命令 “start” : “npm run serve”
安装路由 cnpm install vue-router -S
安装vuex cnpm install vuex -S
安装sass预编译
- cnpm install sass-loader -D
- cnpm install node-sass -D
安装vant cnpm i vant -S
按需引入插件 cnpm babel-plugin-inport -D
配置babel.config.js文件，代码如下

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

总结

此项目是本人参与开发的第一个webapp项目，项目团队一共两人，包括一名前端开发工程师跟一名后端开发工程师，此项目基于vue框架，采用的前端技术栈有vue、vuex、vant、vue-router、ES6、sass、element-ui等，项目开发过程中使用的调试工具为devtools即Chrome开发者工具,它是一套内置于GoogleChrome中的Web开发和调试工具，可用来对网站进行迭代、调试和分析。其中最新掌握并熟练使用的模块是network网络模块。network的主要功能有五种，分别是记录网络请求，改变加载行为，过滤请求，请求排序以及分析请求，每一个都功能强大。

技术栈分析

1.vue-router路由系统

vue-router是WebApp的链接路径管理系统。就相当于在马路上指挥交通的交警，只有交警的存在，路面上的交通才能井然有序，webapp多是单页面应用程序，所谓切换页面，实际是切换不同显示的组件，因此需要定义一套路由规则，来指定不同路径显示对应需要显示的组件。路由规则定义在src文件夹下的routes.js文件里，在routes.js里先导入vue跟vue-router模块，再通过Vue.use(VueRouter)注册一下，然后便可以创建VueRouter实例，在实例里定义路由匹配规则，以Home组件为例，{path:’/’,component:Home}。在使用vue-router之前切记在入口文件main.js里把路由系统挂载到Vue系统中去。最后，在页面组件中，通过显示匹配成功的视图（组件）。

2.vuex状态管理

Vuex中的五大概念
- state 存储中心，所有需要被共享或缓存的数据，都在这里定义
- getters 相当于计算属性，过滤出来一些值，当它所关系的state变量发生变化时，会自动重新计算
- mutations mutations是Vuex中专门用于更新state
- actions 异步操作方法，与后端api打交道
- mudules 模块化
Vuex使用

//安装Vuex
npm i vuex --save

//引用Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

//创建仓库Store
 const store = new Vuex.Store({});

//在 main.js 中挂载
import store from './store/index.js'
new Vue({
  store
}).$mount('#app')

4.sass

1.Sass是CSS预处理语言是一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性（完全兼容css3），让css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。
2.安装sass

npm install sass-loader -D

npm install node-sass -D

5.vant

此项目用了采用了vant移动端组件库，使用了大量的vant封装的组件

例如首页轮播图采用了Swipe展示组件
首页通知栏采用NoticBar展示组件
顶部导航采用的NavBar导航组件，布局采用Layout布局组件
底部标签采用Tabbr标签组件
登录注册页采用Form表单组件布局
提示弹框采用Toast组件
下拉刷新功能采用PullRefresh反馈组件
购物车商品列表采用SwipeCell滑动单元格组件
分页功能采用Pagination导航组件
图片上传功能采用Uploader表单组件

功能模块

此项目实现的主要功能模块包括：商品展示模块（首页、广告页、促销页、商品详情页，购物车模块，个人中心模块，登录注册还有订单模块。

商品展示模块

此模块包括通知栏，搜索框，轮播图，商品列表提示图跟商品列表，其中通知栏采用NoticBar展示组件，轮播图采用了Swipe展示组件，商品列表是通过循环cell组件渲染的，数据通过请求fetchGoodList后端接口获取。点击首页商品列表，显示商品详情组件，在生命周期mounted通过传递参数ID调fetchGoodInfo后端接口获取对应商品详情并渲染，在商品详情里给立即购买按钮添加buy点击事件，通过调取fetchAddCart后端接口实现加入购物车（向数据库添加数据），使用Toast反馈组件反馈给用户添加购物车成功信息，调取接口传递参数的时候注意参数的命名是good_id,命名错误将导致获取数据失败，在点击购买成功后，设置定时器在1000ms后跳转购物车页面，并且在生命周期beforeDestory里清除定时器。

购物车模块

此模块主要采用swipe-cell组件并对其进行循环，其中一行分为左右两列，左边使用checkbox组件完成选框部分，右边采用cart组件渲染商品信息。通过调取fetchCart后端接口获取购物车数据并渲染页面，通过封装remove事件触发后端接口fetchDelCart删除商品，通过封装updata事件触发后端接口fetchUpdCart可以修改商品数量，通过封装onSubmit事件调取fetchSubmitCart后端接口提交购物车，每次修改数据都需要调用封装的init方法重新初始化并渲染页面。

个人中心模块

此模块主要采用了grid布局组件，通过封装logout方法调用removeItem方法移除存储在localStorage上的token，完成退出登录的功能，并且跳转到首页。

登录注册模块

此模块分为login跟regist两个组件页面，页面主要通过Form表单组件渲染，实现登录功能通过调取fetchLogin后端接口，传递页面参数username、password存储token。实现注册功能通过调取fetchRegist后端接口，传递页面参数username、password、password2注册成功并返回登录页。

技术点

性能优化

从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。从服务器角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。

页面优化
- 减少 HTTP请求数，方法包括从设计实现层面简化页面，合理设置 HTTP缓存，资源合并与压缩，尽可能的将外部的脚本、样式进行合并，多个合为一个。另外， CSS、 Javascript、Image都可以用相应的工具进行压缩，压缩后往往能省下不少空间。
代码优化
- 增加、修改、删除 DOM元素或者对 DOM集合进行操作是最耗性能的一类操作，要做到代码优化，就要做到以下几点，比如慎用 with，减少作用域链查找，减少闭包的使用。

SEO优化

seo优化策略主要包括关键词优化、网站结构和内容优化、注重内链和外链的优化

1.关键词的优化
- 关键词是搜索引擎优化的核心。关键词的选择对于网站在搜索引擎中排名具有关键作用。布局关键字：首页标题是关键，重要的写在最前面。后面可以加网站名称或公司或品牌名。
2.网站结构和内容的优化
- 优化网站主要包括：网站结构优化、网站标签优化、网站页面优化，为的是让搜索引擎更容易搜索站长们的网站并且关注站长们想排名靠前的关键词。
3.内链和外链的优化
- 超链接将分散的网络连成一个整体，对于搜索引擎来说，一个网页被链接的次数和链接入网页的质量是体现网页重要性的一个非常重要的指标。
4.合理使用title
- title就是浏览器上显示的那些内容，不仅用户能看到，也能被搜索引擎检索到（搜索引擎在抓取网页时，最先读取的就是网页标题，所以title是否正确设置极其重要。首页title写法，一般是“网站名称-主关键词或一句含有主关键词的描述”。一般网站名称放后面，因为搜索引擎给予标题最前面的词比后面的高。比如，做“冰箱”这个词，就这样写“冰箱_变频冰箱-海尔官网”。分类列表页title写法，一般是“分类列表页名称-栏目名称-网站名称”。文章页title写法，一般有3种：“文章标题-网站名称”、“内容标题-栏目名称”、“内容标题-栏目名称-网站名称”。

图片优化

在工程化环境中，尽可能地避免使用background-image来展示图片。当图片很小、并且几乎不用考虑图片优化时，可以把图片放在assets目录，它会成为代码的一部分。当图片不是特别小、未来项目上线时有可能要进行CDN加速等优化，建议放在public目录中，当项目打包时，不会改变public的图片。代码中使用图片，建议使用模块化来管理，不要在组件中使用相对路径、绝对路径来引入图片。

下拉刷新

采用PullRefresh组件，先定义refreshing数据控制下拉刷新，定义page控制商品数量，添加onRefresh方法使page=1，并调用getList方法重新获取数据初始化页面，下拉刷新等于重置，重置完成之后，把refreshing变为false停止掉下拉刷新的状态。注意要用PullRefresh包裹整个组件，达到整个页面重置刷新。