项目初始化

前言

在平时的前端开发中,我们更多的是完成螺丝钉的角色,即在公司的前端框架下,实现各种业务逻辑,Vue技术栈并不是难点所在,难点往往在于从 0 到 1 搭建一个完整的实践项目,以及项目开发过程中对于很多技术细节的再学习和处理,帮助读者具备开发和统筹一个完整项目的能力是项目的目标,本项目将通过技术栈的详细讲解、多个功能模块的开发实践、并结合实际项目开发中的产品流程来完成这个任务。

技术栈

  • vue 2.6.11
  • vue-cli 4.0.5
  • vue-router
  • vuex
  • vant 2.10.2
  • 阿里图标字体
  • axios

基础环境搭建

vue-cli脚手架初始化

首先通过vue-cli这个脚手架工具生成项目的初始化结构。

vue create cou-yin

你会被提示选取一个preset,这个地方我们选择“手动选择特性”来选取需要的特性(这个地方会详细介绍)

  • Use history mode for router (这个地方我们选择history的路由方式,history 方式的路径后不会添加#)
  • Pick a CSS pre-processor (因为项目中Less编写样式 所以需要css 预处理)
  • Pick a linter/formatter config (项目中使用ESLint 代码风格检查,另外我们也希望可以通过额外的配置文件对 eslint做定制化配置 我们选择代码保存的时候做ESLint检查)
  • Save this as a preset for future projects (这个地方我们选择 n 我们不需要vue-cli保存我们预设文件)
    项目创建成功,根据提示:
cd dou-yin

启动项目

yarn serve

项目目录说明

|- assets                   // 资源文件夹
      |--- fonts                   //  图标字体 阿里图标字体
      |--- icons                   //  项目图标
      |--- style                   //  封装的公共样式 一像素边框    
|- componments              // 封装的组件文件夹
|- request                  //  axios 网络请求封装
|- router                   //  路由
|- store                    // vuex 
|- styles                   // 公共样式文件夹
|- utils                    // 工具类
|- views                    // 视图页面
  main.js                   //vue项目入口
  App.vue                   //跟页面
 .eslint.js                 // eslint配置文件
  babel.config.js           // 解析babel的配置文件

`

引入第三方UI组件库

市面上有很多优秀的vue移动端组件库,cube-ui、vant 之类的,本人比较推荐vant(其实也没什么原因,就是用的比较顺手而已)

  • 在项目内 安装 vant
yarn add vant babel-plugin-import style-resources-loader postcss-pxtorem
yarn add postcss-px2rem -D
  • 采用按需引入的方式 配置组件的引入
    babel.config.js 修改成如下内容
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
};

通过如上的配置,在组件内使用时,只需要引入组件就可以了,不需要再引入样式(这么做的目的是 可以减少打包后 bundle.js 体积)

  • 移动端适配
    移动端适配 我们借助 postcss-pxtorem 插件实现,用于将px转换成rem。
    再项目内安装安装插件
    lib-flexible用于设置rem基准值
    在项目中 新建postcss.config.js 内容如下:
module.exports = {
    plugins: {
      autoprefixer: {
        browsers: [
          'Android >= 4.0',
          'iOS >= 8'
        ]
      },
      'postcss-pxtorem': {
        rootValue: 37.5,
        propList: [
          '*'
        ]
      },
      'postcss-px2rem': {
        remUnit: 37.5
      }
    }
  }

修改main.js 文件 增加如下代码

import 'lib-flexible/flexible';  
import 'normalize.css/normalize.css';  // 解决不同浏览器之间的差异

如上的配置,是按照UI设计搞750 * 1334配置的(如果是其他尺寸的设计搞,则改成 对应的即可)

配置Webpack

在项目中创建 vue.config.js,内容如下
``` javascript
console.log(process.env.NODE_ENV)
const port = process.env.port || 10086;

top Created with Sketch.