以前开发vue项目,一直是本身搭建脚手架,并无使用配套的Vue-CLI。1、是3.0以前的CLI无明显优点,配置繁琐;2、是以为本身从零配置项目可控性更强。
Vue-CLI 3.0 于去年8月份就已发布,却一直没去了解。近日,有新Vue H5项目开发,就想着用Vue CLI3.0脚手架构建项目。并记录一下构建使用过程。javascript
使用脚手架最好的参考就是官方文档,官方文档总体仍是比较清晰明了的,更新也很及时。
「连接-官方文档」css
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各类构建工具可以基于智能的默认配置便可平稳衔接,这样你能够专一在撰写应用上,而没必要花好几天去纠结配置的问题。与此同时,它也为每一个工具提供了调整配置的灵活性,无需 eject。html
Vue-CLI3.0旨在近一步简化Vue项目配置,“傻瓜式”配置,促进团队开发的统一和规范化。同时也彻底能够是可配置的,保留足够的扩展性。前端
项目git地址:github.com/now1then/vu…;vue
安装脚手架:java
npm install -g @vue/cli
# OR
yarn global add @vue/cli
复制代码
建立一个项目:node
vue create my-project
# OR
vue ui // 经过图形化界面建立项目
复制代码
这里先不引入TypeScript和单元测试。
webpack
了解CLI插件命令。ios
启动开发服务器运行项目:**npm run serve**
;
命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。
git
生产环境打包:npm run build
;
经过 vue ui
命令以图形化界面建立和管理项目:
vue ui
复制代码
运行成功后,在打开的页面中能够新建项目,也能够导入已有项目。
目录介绍:
**项目仪表盘:**自定义展示一些的功能小部件;
**插件:**能够查看已安装的CLI插件,还能够搜索安装插件;
**依赖:**能够查看和管理项目的运行依赖和开发依赖;
**配置:**项目的配置项配置管理,包括Vue-CLI配置和ESLint配置等。
**任务:**能够执行对应任务(对应于package.json中脚本命令),方便查看运行结果和分析检查。
图形化界面虽然对于实际开发意义不大,但简洁直观,实际体验仍是不错的。具体功能最好运行亲自体验。
CLI中已预设@vue/cli-plugin-babel
,它默认使用 Babel 7 + babel-loader
+ @vue/babel-preset-app,可是能够经过 babel.config.js
配置使用任何其它 Babel 预设选项或插件。
『当前仅默认配置就够用,后续实际使用时逐步增长』
默认会转换_es6.promise、_``_es6.symbol_
等常见ES6语法,对于未引入的语法,采用"显式地列出了须要的 polyfill的方式"。好比项目中使用es6.string.includes
,则设置:
presets: [
['@vue/app', {
'polyfills': [
'es6.string.includes'
]
}]
],
复制代码
@vue/cli-plugin-eslint
『当前仅适用默认配置就够用。』,具体根据我的习惯和项目规范调整便可。
好比,本人通常关闭如下设置:
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warning' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warning' : 'off',
'semi': 0, // 语句结尾分号
'camelcase': 0, //驼峰命名
'comma-dangle': 0, // 对象最后逗号
'space-before-function-paren': 0, // 函数定义前,括号前分割
},
复制代码
// 安装
npm install mint-ui
复制代码
借助 babel-plugin-component,咱们能够只引入须要的组件,以达到减少项目体积的目的。
首先,安装 babel-plugin-component:
npm install babel-plugin-component -D
复制代码
而后,将babel.config.js 修改成:
module.exports = {
presets: [
['@vue/app', {
'polyfills': [
'es6.string.includes'
]
}]
],
"plugins": [
["component", {
"libraryName": "mint-ui",
"style": true
}]
]
}
复制代码
这样使用组件就能够按需引入了。
「连接-axios中文文档」
npm install axios;
复制代码
封装要达成的目标:
具体详见本人另外一篇文章:
「漫漫长路-Axios封装」
考虑浏览器兼容性和使用习惯,移动端适配仍是手淘模式,采用px转rem
+ lib-flexible
实现。postcss-pxtorem
插件把配置的px转成rem;lib-flexible
库则根据页面尺寸和dpr,自动设置html的字体和meta缩放比例。
postcss-pxtorem
插件yarn add postcss-pxtorem -D
复制代码
// postcss.config.js
module.exports = {
plugins: {
"autoprefixer": {}, 用来自动处理浏览器前缀的一个插件。
"postcss-
": {
"rootValue": 37.5, // 设计稿宽度的1/10
"unitPrecision": 5, //小数位
"minPixelValue": 1, //转换的最小单位
"selectorBlackList": [], //忽略的样式, 正则
"propList": ["*"] // 须要作转化处理的属性,如`hight`、`width`、`margin`等,`*`表示所有,正则
}
}
}
复制代码
根据项目实际状况灵活配置。
lib-flexible
,并在入口文件main.js中引入// 安装 lib-flexible
yarn add lib-flexible
// main.js中引入lib-flexible
import 'lib-flexible';
复制代码
手机设备上调试H5很是不方便,这时能够引入一个很是好用的调试工具Eruda。
Eruda 是一个专为手机网页前端设计的调试面板,相似 DevTools 的迷你版,其主要功能包括:捕获 console 日志、检查元素状态、显示性能指标、捕获XHR请求、显示本地存储和 Cookie 信息、浏览器特性检测等等。
详情请访问-Github连接
能够经过CDN引用,固然也能够下载到项目中直接使用。
本项目配置中使用CLI环境变量配置,来设置是否加载Eruda。 实际项目使用可灵活配置。.env.development
文件设置环境变量:
VUE_APP_ERUDA=false # ture表示启用Eruda调试工具
复制代码
index.html文件设置:
<!--手机调试-->
<% if (VUE_APP_ERUDA === 'true') { %>
<script src="//cdn.bootcss.com/eruda/1.5.2/eruda.min.js"></script>
<script> window.eruda.init(); </script>
<% } %>
复制代码
效果:
postcss-import:
该插件主要是解决@import引入路径问题。引入本地文件、node_modules等的文件。postcss-url:
该插件主要用来处理文件,好比图片文件、字体文件等引用路径的处理。autoprefixer:
用来自动处理浏览器前缀的一个插件。
利用可视化资源分析工具插件webpack-bundle-analyzer
分析生产文件打包大小。
// vue.config.js
configureWebpack: config => {
// 生产环境打包分析体积
if (process.env.NODE_ENV === 'production' && process.env.npm_config_report) {
return {
plugins: [
new BundleAnalyzerPlugin()
]
}
}
},
复制代码
终端命令:yarn build --report
固然图形化界面任务->build->分析
中也能够粗略分析打包大小。
参考「连接-Vue-CLI3 css自动导入」。
利用style-resources-loader
插件,给Vue单文件自动全局导入配置路径中的LESS变量和mixin函数。 这样在使用时不用每一个文件都单独引入,就能够直接使用定义的Less变量。
style-resources-loader
;yarn add style-resources-loader -D
复制代码
chainWebpack: config => { // CLI内部webpack配置
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
},
// 全局样式 变量、函数
function addStyleResource (rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
path.resolve(__dirname, 'src/styles/variables.less'),
path.resolve(__dirname, 'src/styles/mixin.less'),
],
})
}
复制代码
引入_normalize.css
_ 、_minireset.css _
+ 自定义CSS设置,初始化CSS样式,使HTML元素样式在跨浏览器上表现得的高度一致性。
下载对应文件,直接放到src/assets/styles/
路径下。
fastclick
移动端点击有300ms延迟,主要是为了解决双击缩放,浏览器等待300ms以判断是不是双击操做。
能够采用引入fastclick.js的方式解决移动端300ms延迟的问题。固然,fastclick.js曾经在老版本手机上解决移动端300ms的问题上作出了很大的贡献。时至今日是否还有必要使用,各方仍是各持一词。
// 安装
yarn add fastclick
// main.js中引入使用
import FastClick from 'fastclick';
FastClick.attach(document.body);
复制代码
在团队开发时,规范的目录拆分约定,有利于协调开发和项目的长期维护。
根据我的习惯及经验,项目目录构建以下图所示:
全局组件分为:components_basics公共基础组件
,主要存放封装的与业务无关的基础组件。components_modules公共业务组件
,主要存放提取的可重用业务组件。
对于不重用的业务组件,不用提取到外部,直接存放到具体的页面目录下便可。
页面组件内按需引入模块:
<script>
import { formatDate } from '@/utils/cloud-utils';
import MainButton from '@/component_basics/MainButton';
import transferDom from '@/directives/transferDom';
export default {
name: 'demoPage',
components: { // 组件
MainButton
},
directives: { // 指令
transferDom
},
filters: { // 过滤器
formatDate
},
data() {
return {
title: '测试'
}
},
methods: {}
}
</script>
复制代码
「连接-Vue Router懒加载」
把组件按组分块,结合 Vue 的异步组件和 Webpack 的代码分割功能,实现路由组件的懒加载。
...
const Hello = () => import(/* webpackChunkName: "apply" */ '@/views/hello');
const Demo = () => import(/* webpackChunkName: "demo" */ '@/views/demo');
复制代码
经过自定义meta参数,设置路由信息。
利用vue-router导航卫士,路由拦截时,做一些自定义处理。好比登陆权限校验、页面标题设置等。
// 部分路由信息
{
path: '/demo',
name: 'demo',
component: Demo,
meta: {
title: '演示Demo', // 标题
requireAuth: true, // 登陆权限
keepAlive: false,
}
},
//路由拦截
// 路由导航守卫
router.beforeEach((to, from, next) => {
// 登陆权限
if (to.meta.requireAuth) { // 判断是否校验登陆权限
if (!window.userName) { // 判断是否登陆,根据实际业务处理
next({
path: '/login',
query: {
redirect: to.fullPath // 未登陆,跳转到登陆页,登陆后跳转回当前页。
}
})
return;
}
}
// 路由发生变化修改页面title
if (to.meta.title) {
document.title = to.meta.title + ' | vue-h5-pro';
} else {
document.title = 'vue-h5-pro';
}
next()
})
复制代码
效果图:
这里实现页面前进/后退时的整屏平滑左划/右划效果。
简单记录5个历史路由,进入新页面有左划切换效果,并记录历史路由;进入历史页面有右划切换效果,并清除历史路由。
router.js
文件中拦截路由,记录历史路由信息。
// 路由拦截 router.js
router.afterEach((to, from) => {
// console.log(to, from);
if (!(from.path === '/' && from.name === null)) {
setLocalRoute(to, from)
}
});
function setLocalRoute(to, from) {
// 本地已访问页面路由,存5条
const localRoute = window.myVue.localRoute = window.myVue.localRoute || [];
const from_index = localRoute.indexOf(from.path);
const to_index = localRoute.indexOf(to.path);
if (from_index < 0) {
localRoute.unshift(from.path);
to_index >= 0 && localRoute.splice(to_index, 1)
}
if (localRoute.length > 5) {
localRoute.splice(0, 1)
}
}
复制代码
main.vue
文件中根据路由跳转,动态设置过渡动画样式。
<template>
<div id="app">
<transition :name="direction">
<router-view class="page" />
</transition>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {};
},
computed: {
// 动态设置过渡样式
direction: function() {
const currentPath = this.$route.path;
const localRoute = (window.myVue && window.myVue.localRoute) || [];
// console.log(localRoute, currentPath);
const index = localRoute.indexOf(currentPath);
let tranName = '';
if (localRoute.length === 0) {
tranName = 'fade'; // 首页,渐显
} else if (index >= 0) {
tranName = 'page-back'; // 回退,右划
} else {
tranName = 'page-go'; // 进入新页面,左划
}
return tranName;
}
},
};
</script>
<style lang="less">
.page {
position: absolute;
width: 100%;
height: 100%;
transition: all 0.8s ease-in-out;
}
.page-go-enter-active {
transform: translate3d(100%, 0, 0);
}
.page-go-enter-to {
transform: translate3d(0, 0, 0);
}
.page-go-leave-active {
transform: translate3d(0, 0, 0);
}
.page-go-leave-to {
transform: translate3d(-100%, 0, 0);
}
.page-back-enter-active {
transform: translate3d(-100%, 0, 0);
}
.page-back-enter-to {
transform: translate3d(0, 0, 0);
}
.page-back-leave-active {
transform: translate3d(0, 0, 0);
}
.page-back-leave-to {
transform: translate3d(100%, 0, 0);
}
}
</style>
复制代码
项目构建及开发细节后续会持续更新。具体的代码欢迎访问项目查看。
此处记录封装的通用化基础组件。
通用化基础组件存放于src/component_basic/
目录下。
好比:tip提示组件,组件使用及代码详见项目。
效果图:
Github连接:github.com/now1then/vu…;
Vue-CLI3搭建移动端H5应用-语雀:www.yuque.com/nowthen/lon…;
Vue-CLI3搭建移动端H5应用-掘金:juejin.im/post/5d674d…
制定代码及命名规范
项目打包上传配置
完善通用化组件
引入mock平台
国际化语言配置
提取单独的PC端项目配置
考虑支持多页