vue2开发实践:搭建项目框架

原创
2019/09/17 15:38
阅读数 2.7W

最近刚刚结束了忙碌的项目开发,终于将流行已久的前后端分离结构在项目中进行了实践。虽然之前学习过三大框架,但是在项目中使用则是另一种感受。这次用到的框架是vue2,从0到1整个过程参与其中,于是决定用一个项目来记录一下。我想到了电影《解忧杂货铺》,想着实现这样一个过程,然后就有了树洞这个项目。

技术选型

首先是技术框架的选择,原本打算用React来着:一方面vue单从搬砖的角度上看十分简单,而react使用JSX使得开发自由度更高更易出现差错;另一方面,从框架搭建到配置到开发已经在实践中使用vue踩过坑,React的使用比较有新鲜感和挑战性。后来有朋友对这个项目感兴趣,最终采用了vue。后来因为时间等各方面原因,因而这个项目只做了一个移动端的demo。

其次是构建工具,之前项目使用的是vue-cli 2,现在使用vue-cli 3。vue-cli 3做了许多改进,webpack的配置也简化成了配置文件。大概是因为架构的改变,包名改为了@vue/cli。vue-cli不再只是简单的模版拷贝,而是作为一个容器,通过读取配置文件进行调用,同时内部也集成了一些开箱即用的工具。如果需要继续使用vue-cli 2的工作方式,需要安装@vue/cli-init包,项目构建命令和vue-cli 2相同。

最后是UI框架,在移动端UI框架中,vux是相当不错,功能最为丰富。但我个人觉得界面有些粗糙,于是使用了vant,vant使用的是ant-design的设计,十分漂亮。在移动端适配方面之前一直用的是rem,淘宝前端emfe团队给了一个相对成熟的适配方式flexible,配合px2rem-loader(px2rem)使用也是相当方便的。关于flexible适配,可以阅读一下《使用Flexible实现手淘H5页面的终端适配》

不过,emfe在准备更新flexible 2.0版本的时候放弃了它,改为推荐vw实现适配。rem适配并不完美,可以阅读下大漠老师的文章《再聊移动端页面的适配》。vw是不是就完美呢,当然不是。首当其冲的就是兼容性问题,更多内容可以查阅《如何在Vue项目中使用vw实现移动端适配》。既然大厂的高手都在用,在适配上就选用vw,对于前端工程化来说也就工具不同而已。

创建项目

使用vue create命令生成项目,接下来根据需要勾选默认配置。具体的就不啰嗦了,官网文档对配置项做了大致的说明,再不明白可以搜索网上教程。开启了ESLint有时比较烦躁,比如在使用非ES写法的时候就会提示,但又是正确的JS语法。所以有时候需要重新配置.eslintrc.js,打开或关掉一些检测。

从项目结构上看cli 3.x更加简洁,cli 2.x的build目录、config目录被移除,改为了使用vue.config.js来完成配置,默认是没有这个文件的,需要自己在项目目录下新建。类似这种配置方式在很多地方都有用到,比如环境变量、测试工具的配置等等。相对于cli 2.x在配置文件内部去做手脚要高明得多,统一管理便于维护。

在项目构建的时候,可以根据需要对Router、Vuex、PWA进行勾选。构建完成之后会在src目录下多出router.js、store.js、registerServiceWorker.js,这与cli 2.x的结构稍微有些差异。cli 3.x将不需要编译的资源统一放到了public文件夹,包括index.html文件,去掉了2.x的static目录,当然这个可以通过配置修改。

cli 3使用了一套基于插件的架构,插件可以修改 webpack 的内部配置,也可以向vue-cli-service注入命令。在项目创建的过程中,绝大部分列出的特性都是通过插件来实现的,依赖都以@vue/cli-plugin-开头。每个cli插件都会包含一个生成器和一个运行时插件,可以通过vue add命令来添加插件,在src下会多一个plugins目录。

vue add 的设计意图是为了安装和调用cli插件,这不意味着替换掉普通的npm包。vue add会根据插件的预设将相关内容植入项目,这意味着这可能改变项目结构。npm install只是将npm包下载到node_modules中,因而vue add并不能取代npm install,具体的介绍可以查看vue-cli官方文档。个人认为非必要npm i安装包就好,因为有些插件添加了一些我们并不期望的内容。

再来看看,package.json文件,cli 3.x简洁了很多,cli 2.x不少依赖包都不见了。(ps:图中vue3的dependencies中vant是为了展示插件这个目录添加进去的,不是新增内容。)运行命令变成了vue-cli-service,它最终也启动webpack-dev-server,只不过附带了一些其它功能。此外,cli内置工具的配置可以选择生成文件,也可以集成到package.json中。

配置UI库

第一种方式:通过GUI引入vue-cli-plugin-vant插件。执行vue ui命令启动GUI,导入项目。切换到插件 -> 添加插件,选中并安装插件vue-cli-plugin-vant。接下来在plugins目录下就会出现vant.js文件,该文件已将在main.js上注入。

第二种方式,通过GUI图形界面安装vant依赖,切换到依赖 -> 安装依赖,切换依赖包的环境,选中并安装vant。

通过图形界面安装依赖显得不够高级,作为程序员直接通过命令行。

# 通过 npm 安装
npm i vant -S

四种形式引入组件。

第一种:古老的script引入。

<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">

<!-- 引入组件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>

<script>
var Vue = window.Vue;
var vant = window.vant;

// 注册 Lazyload 组件
Vue.use(vant.Lazyload);

// 调用函数式组件
vant.Toast('提示');
</script>

第二种:在main.js导入所有组件。

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

第三种:手动按需引入组件。

import Button from 'vant/lib/button';
import 'vant/lib/button/style';

第四种:自动按需引入组件。

# 安装插件
npm i babel-plugin-import -D
// 在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

// 插件会自动将代码转化为按需引入形式
import { Button } from 'vant';

移动端适配

# 安装依赖包
npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano cssnano-preset-advanced postcss-import postcss-url --S
// 配置postcss.config.js
module.exports = {
  plugins: {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": {
      uft8: false
    },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 375,
      unitPrecision: 3,
      viewportUnit: 'vw',
      selectorBlackList: ['.ignore', '.hairlines'],
      minPixelValue: 1,
      mediaQuery: false
    },
    "postcss-viewport-units": {
      "silence": true
    },
    "cssnano": {
      preset: 'advanced',
      autoprefixer: false,
      "postcss-zindex": false
    }
  }
}

viewportWidth我配置的375,iphone6设计图,按1倍图处理,因为很多库是使用的1倍图的实际像素来进行适配的。如果不想转换直接使用1倍图像素,可以在selectorBlackList加入'van'来屏蔽转换,'van'是vant库所有样式的前缀。

最后解决vw适配的兼容问题,这个polyfill原理很简单,相当于将vw单位还原为该分辨率的实际像素。

<script src="<%= BASE_URL %>js/viewport-units-buggyfill.min.js"></script>
<script src="<%= BASE_URL %>js/viewport-units-buggyfill.hacks.min.js"></script>
<script>window.onload=function(){window.viewportUnitsBuggyfill.init({hacks:window.viewportUnitsBuggyfillHacks})}</script>

这儿需要注意的是不能使用字体图标,字体图标使用content来完成的,这个polyfill也使用了content。我不解的是postcss-px-to-viewport也使用了,却没有影响。其实,并不建议使用字体图标,字体图标通常包含很大的资源。

打完收工,这只是技术选型上的配置,配置还并没有完成,比如接口请求封装、打包处理等等。

# 跑下代码
npm run serve

项目代码仓库地址 >

系列文章:

vue2开发实践:搭建项目框架

vue2开发实践:提取通用功能

vue2开发实践:业务逻辑开发

展开阅读全文
加载中
点击加入讨论🔥(1) 发布并加入讨论🔥
打赏
1 评论
57 收藏
2
分享
返回顶部
顶部