【项目实战】基于Vue3+Vant3造一个网页版的类掘金app项目 - 项目基本骨架搭建

西瓜watermelon
596 阅读4分钟

「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」。

前言

话说还没过年，掘金大大又开始搞事情了，虽然这次更文活动时间很充裕，但是如果想通关还是有点难度啊，这是妥妥的不想让人过个消停年了，哈哈哈。

继2021年8月份参加活动以来确实没少薅了掘金羊毛，所以这次依然不想放弃，但是由于前面的活动用力过猛已经被榨的干干，这次实在是不知该分享些什么了。左思右想了好几天，终于在活动开始的第二天突然灵机一动：既然不知写啥，那么干脆防照掘金的APP造一个网页版的app吧，顺便也算是把移动端的前端开发知识补一补。

技术选型

有了想法说干就干。由于之前一直都是vue2加pc端开发，移动端的开发还算是零经验，因此借助此次活动机会挑战一下移动端开发，顺便也算是积累一点项目经验吧。本次实战中大概用到的技术栈如下：

  • 前端：
    • Vue3： 组合式API开发
    • UI库： Vant 有赞团队出品的专门针对移动端开发的强大组件库
    • 请求库：axios 用于异步请求后端API
    • Rem布局适配：
      • postcss-pxtorem： 一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
      • lib-flexible: 用于设置 rem 基准值
    • Vue-router: 路由控制
    • VueX：状态管理
    • less/less-loader: css样式预处理
    • style-resources-loader/vue-cli-plugin-style-resources-loader: less全局变量使用
  • 后端：
    • nodejs： 服务端API开发
    • axios：异步请求（用于请求掘金官方的API） 项目框架搭建阶段暂时想到会用到这些库，其它库在开发过程中如有需要再另行补充

项目框架搭建

一切分析工作准备就绪，下面就要开始实战了。本文将使用vue-cli脚手架来完成项目框架的搭建。因为要创建的是vue3项目，因此需要4.0以上版本的vue-cli脚手架。（脚手架安装步骤略过，这里不再详细说明）

  • 创建项目
    • 利用脚手架vue-cli搭建项目框架，项目名称命名为：juejinlike
    vue create juejinlike
    • 在第二步中选择：“Manually select features”。目的是可以选择vue版本，css预加载，vue-router和vuex，以免我们手动去创建
    • 接下来分别选中“Choose Vue version”、“Babel”、“Router”、“Vuex”、“CSS Pre-processors”
    • Vue版本选择“3.x”版本
    • Use history mode for router? 输入“N”，使用hash模式的路由
    • css pre-processors 选择“Less”加载器
    • config文件位置选择“In package.json”
    • Save this as a preset for future projects?输入“N”不保存为preset
    • 最后回车等到所有命令运行完毕，一个带有基本骨架的vue3项目就创建完成了
  • 安装开发依赖库
    • less/less-loader：这两个属于开发依赖库，用于css预处理。在创建项目阶段如果在css pre-processors这一步选择了“less”，则这两个库会自动安装，如果未安装则需手动运行如下命令进行安装：
    npm install less less-loader -D
    • style-resources-loader/vue-cli-plugin-style-resources-loader：这两个库用于配置less中的变量可以全局使用，具体配置后面再讲。
    npm install style-resources-loader vue-cli-plugin-style-resources-loader -D
  • 安装生产依赖
    • axios：异步请求库
    • lib-flexible：设置rem基准值
    • postcss-pxtorem：将px转换为rem
    • vant：UI组件库，注意安装时需指定3.0版本
    npm install axios lib-flexible postcss-pxtorem vant@3

基本配置

  • 将项目默认创建的：views/Home.vue、views/About.vue和components/HelloWord.vue删除
  • 打开router下的index.js将默认的路由页面删除，后面再按需添加
  • rem布局适配配置
    • 在src目录下添加一个postcss.config.js文件，添加如下配置代码：
    // postcss.config.js
module.exports={
    plugins:{
        "postcss-pxtorem":{
            rootValue: 37.5,//与vant保持一致，所有单位以375尺寸的设计稿为准
            propList:['*']
        }
    }
}
    • 在main.js中导入'lib-flexible'用于自动适配rem
    // main.js
import 'lib-flexible'
  • less全局变量配置
    • 在assets目录下新增styles目录，并在styles中添加variables.less文件，用于定义less全局变量
    • 在根目录下添加一个vue.config.js文件，并在该文件中添加如下代码，用于指定less全局变量的位置
    // vue.config.js
const path = require('path');
module.exports = {
    pluginOptions: {
        "style-resources-loader":{
            preProcessor: 'less',//指定预处理器类型
            patterns:[
                path.resolve(__dirname, './src/assets/style/variables.less')//指定全局变量的位置
            ]
        }
    }
}

总结

至此，一个简单的项目骨架就搭建好了。有了地基和架子接下来我们就可以根据我们的喜好来添砖加瓦造新房唠。 本篇分享就先到这里了，从下一篇文章中我们将一边分析官方的“稀土掘金App”一边来造我们网页版的类掘金app，小伙伴们敬请期待。

avatar
文章
阅读
粉丝