基于Vue CLI3 搭建五脏俱全的移动端H5应用

前言
之前开发vue项目,一直是自己搭建脚手架,并没有使用配套的Vue-CLI。一、是3.0之前的CLI无明显优势,配置繁琐;二、是觉得自己从零配置项目可控性更强。
Vue-CLI 3.0 于去年8月份就已发布,却一直没去了解。近日,有新Vue H5项目开发,就想着用Vue CLI3.0脚手架构建项目。并记录一下构建使用过程。

使用脚手架最好的参考就是官方文档,官方文档整体还是比较清晰明了的,更新也很及时。
「链接-官方文档」

CLI3.0 功能优势
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。

Vue-CLI3.0旨在近一步简化Vue项目配置,“傻瓜式”配置,促进团队开发的统一和规范化。同时也完全可以是可配置的,保留足够的扩展性。

功能丰富,实现开箱即用,不用再考虑繁琐的配置。
灵活的插件化机制,增强扩展性。
可以通过配套的图形化界面创建、管理项目的配置。有时看着还是很直观舒服的。
支持直接将一个vue文件跑起来,进行快速原型开发。
不用过多担心配置的更新迭代造成的连带影响。
vue团队出品,很好地维护并跟进官方的最佳实践和前沿技术。
image.png
搭建项目
项目git地址:github.com/now1then/vu…;

初始化项目
安装脚手架:

npm install -g @vue/cli

OR

yarn global add @vue/cli
复制代码
创建一个项目:

vue create my-project

OR

vue ui // 通过图形化界面创建项目
复制代码
选择preset特性(这里选择更多功能):
image.png
选择需要安装的(Babel、Router、Vuex、Pre-processors、Linter / Formatter):
这里先不引入TypeScript和单元测试。

image.png
路由是否使用history模式(Yes)
image.png
选择 CSS 预处理器(Less):
image.png
选择ESLint 配置(ESLint + Standard config)标准配置:
image.png
选择什么时候执行ESLint校验(Lint on save):
image.png
选择以什么样的形式配置以上所选的功能,单独生成配置文件 or 附加到package.json中(In dedicated config files):
image.png
是否将之前的设置保存为一个预设模板(y):
image.png

如果选择 y 后会让输入名称,在下次初始化项目可以使用该预设模板快速构建项目。
运行项目
了解CLI插件命令。

启动开发服务器运行项目:npm run serve;
命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。

image.png
生产环境打包:npm run build;

图形化界面
通过 vue ui命令以图形化界面创建和管理项目:

vue ui
复制代码
运行成功后,在打开的页面中可以新建项目,也可以导入已有项目。

管理界面:
image.png
目录介绍:
**项目仪表盘:**自定义展现一些的功能小部件;

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值