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

基于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/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
目录介绍：
**项目仪表盘：**自定义展现一些的功能小部件；