前言
之前开发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
目录介绍:
**项目仪表盘:**自定义展现一些的功能小部件;