如何利用vue-cli3.0搭建一个功能齐全的移动端项目框架？

本文共计1540个文字，预计阅读时间需要7分钟。

基于vue-cli3.0构建的移动端框架，功能完善，包括：- Webpack打包扩展- CSS支持：Sass、normalize.css、_mixin.scss、_variables.scss- 布局单位：vw、rem- 跨域设置- ESLint配置- CDN引入- 路由设计- 登录拦截

基于vue-cli3.0构建功能完善的移动端架子，主要功能包括

• webpack 打包扩展
• css：sass支持、normalize.css、_mixin.scss、_variables.scss
• vw、rem布局
• 跨域设置
• eslint设置
• cdn引入
• 路由设计、登录拦截
• axios、api 设计
• vuex状态管理

项目地址: vue-cli3-H5

demo地址: zhouyupeng.github.io/vuecli3H5/#/

webpack 打包扩展

vue-cli3.*后目录结构大改，去除了以往的build,config文件夹，要实现配置的改动在根目录下增加vue.config.js进行配置

css：sass支持、normalize.css、_mixin.scss、_variables.scss

使用的css预处理器是sass，对于css mixin，变量这里做了全局引入，并且引入 normalize.css 使HTML元素样式在跨浏览器上表现得的高度一致性

vue.config.js配置

css: { // 是否使用css分离插件 ExtractTextPlugin extract: true, // 开启 CSS source maps? sourceMap: false, // css预设器配置项 // 启用 CSS modules for all css / pre-processor files. modules: false, sass: { data: '@import "style/_mixin.scss";@import "style/_variables.scss";' // 全局引入 } } }

vw、rem布局

对于移动端适配方案使用的是 网易新闻 的方法,

使用vw + rem布局

/** 750px设计稿 取1rem=100px为参照，那么html元素的宽度就可以设置为width: 7.5rem，于是html的font-size=deviceWidth / 7.5 **/ html { font-size: 13.33333vw } @media screen and (max-width: 320px) { html { font-size: 42.667PX; font-size: 13.33333vw } } @media screen and (min-width: 321px) and (max-width:360px) { html { font-size: 48PX; font-size: 13.33333vw } } @media screen and (min-width: 361px) and (max-width:375px) { html { font-size: 50PX; font-size: 13.33333vw } } @media screen and (min-width: 376px) and (max-width:393px) { html { font-size: 52.4PX; font-size: 13.33333vw } } @media screen and (min-width: 394px) and (max-width:412px) { html { font-size: 54.93PX; font-size: 13.33333vw } } @media screen and (min-width: 413px) and (max-width:414px) { html { font-size: 55.2PX; font-size: 13.33333vw } } @media screen and (min-width: 415px) and (max-width:480px) { html { font-size: 64PX; font-size: 13.33333vw } } @media screen and (min-width: 481px) and (max-width:540px) { html { font-size: 72PX; font-size: 13.33333vw } } @media screen and (min-width: 541px) and (max-width:640px) { html { font-size: 85.33PX; font-size: 13.33333vw } } @media screen and (min-width: 641px) and (max-width:720px) { html { font-size: 96PX; font-size: 13.33333vw } } @media screen and (min-width: 721px) and (max-width:768px) { html { font-size: 102.4PX; font-size: 13.33333vw } } @media screen and (min-width: 769px) { html { font-size: 102.4PX; font-size: 13.33333vw } } @media screen and (min-width: 769px) { html { font-size: 102.4PX; #app { margin: 0 auto } }

vue.config.js配置

loaderOptions: { postcss: { // 这是rem适配的配置 plugins: [ require('postcss-px2rem')({ remUnit: 100 }) ] } }

开发时跨域设置

devServer: { open: true, // 启动服务后是否打开浏览器 host: '127.0.0.1', port: 8088, // 服务端口 easy-mock.com/' // 设置代理 }

配置完后，本地开发环境的axios的baseUrl要写为 '' ，即空字符串。

发布到线上时如果前端代码不是和后台api放在 同源 下的，后台还需做跨域处理，

eslint standard设置

使用的是 JavaScript standard 代码规范,一个好的编码风格它可以帮助减少团队之间的摩擦，代码阅读起来也更加清爽，更加可读性，不要觉得烦，用了都说好。

这是 JavaScript standard 代码规范的全文

自定义配置，在.eslintrc.js里修改，这里是我给出的配置，4个空格缩进，不检查结尾分号,关闭单var 声明，可自行配置

rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', indent: [ 'error', 4, { SwitchCase: 1 } ], semi: 0, // 不检查结尾分号, // 强制使用单引号 quotes: ['error', 'single'], // 关闭函数名与后面括号间必须空格规则 'space-before-function-paren': 0, // 关闭var 声明，每个声明占一行规则。 'one-var': 0 }

cdn引入

对于 vue、vue-router、vuex、axios等等这些不经常改动的库、我们让webpack不对他们进行打包，通过cdn引入，可以减少代码的大小、也可以减少服务器的带宽

这里使用的是360的cdn,附上一份公共cdn评测文章 点我

vue.config.js配置

const externals = { vue: 'Vue', 'vue-router': 'VueRouter', vuex: 'Vuex', 'mint-ui': 'MINT', axios: 'axios' } const cdn = { // 开发环境 dev: { css: [ 'lib.baomitu.com/mint-ui/2.2.13/style.min.css' ], js: [] }, // 生产环境 build: { css: [ 'lib.baomitu.com/mint-ui/2.2.13/style.min.css' ], js: [ 'lib.baomitu.com/vue/2.6.6/vue.min.js', 'lib.baomitu.com/vue-router/3.0.1/vue-router.min.js', 'lib.baomitu.com/vuex/3.0.1/vuex.min.js', 'lib.baomitu.com/axios/0.18.0/axios.min.js', 'lib.baomitu.com/mint-ui/2.2.13/index.js' ] } } configureWebpack: config => { if (isProduction) { // externals里的模块不打包 Object.assign(config, { externals: externals }) } else { // 为开发环境修改配置... } }, chainWebpack: config => { // 对vue-cli内部的 webpack 配置进行更细粒度的修改。 // 添加CDN参数到htmlWebpackPlugin配置中， 详见public/index.html 修改 config.plugin('html').tap(args => { if (process.env.NODE_ENV === 'production') { args[0].cdn = cdn.build } if (process.env.NODE_ENV === 'development') { args[0].cdn = cdn.dev } return args }) }

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta easy-mock.com/'

在项目中可以用process.env.VUE_APP_*，如process.env.VUE_APP_BASE_API获取到定义的值

全局引入filter

把多个地方用到的过滤器写在一个js里面，复用代码。

// 过滤日期格式，传入时间戳，根据参数返回不同格式 const formatTimer = function(val, hours) { if (val) { var dateTimer = new Date(val * 1000) var y = dateTimer.getFullYear() var M = dateTimer.getMonth() + 1 var d = dateTimer.getDate() var h = dateTimer.getHours() var m = dateTimer.getMinutes() M = M >= 10 ? M : '0' + M d = d >= 10 ? d : '0' + d h = h >= 10 ? h : '0' + h m = m >= 10 ? m : '0' + m if (hours) { return y + '-' + M + '-' + d + ' ' + h + ':' + m } else { return y + '-' + M + '-' + d } } } export default { formatTimer }

main.js引入

import filters from './filters/index' // 注入全局过滤器 Object.keys(filters).forEach(item => { Vue.filter(item, filters[item]) })

使用

{{1555851774 | formatTimer()}}

vue中使用mock.js

查看我以前写的文章点击我

wepback的可视化资源分析工具插件---webpack-bundle-analyzer

用来分析哪些模块引入了哪些代码，进行有目的性的优化代码

在打包环境中加，使用命令npm run build --report

if (process.env.npm_config_report) { config.plugins.push(new BundleAnalyzerPlugin()) }

代码地址 项目地址: vue-cli3-H5

demo地址: zhouyupeng.github.io/vuecli3H5/#/

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。