“使用vue-cli和webpack从0到1搭建完整的vue工程化项目“系列文章记录了从0到1搭建完整的工程化项目的过程,项目支持单元测试,集成vue-router和vuex,使用webpack进行打包并进行打包优化。还在等什么,快来一起动手尝试吧!
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:
1. 通过 @vue/cli 搭建交互式的项目脚手架。
2. 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
3. 一个运行时依赖 (@vue/cli-service),该依赖:
3.1 可升级;
3.2 基于 webpack 构建,并带有合理的默认配置;
3.3 可以通过项目内的配置文件进行配置;
3.4 可以通过插件进行扩展。
4. 一个丰富的官方插件集合,集成了前端生态中最好的工具。
5. 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
首先安装vue-cli, 使用sudo保证有目录的访问权限,否则可能安装失败
sodu npm install -g @vue/cli
创建一个项目
vue create app
可以使用默认的预设
也可以手动进行选择和配置。
其中E2E Testing是前端自动化测试实现的一种方案,是把我们的程序堪称是一个黑盒子,我不懂你内部是怎么实现的,我只负责打开浏览器,把测试内容在页面上输入一遍,看是不是我想要得到的结果。
这里我装了全部的的配置,为了能满足最大的需求。也为了能够学习了解到更多的使用方法。
也可以使用vue ui图形化工具来创建应用,可以根据提示进行一步步操作。建议初学者使用vue ui来创建,图形化界面对于每一项的设置提供了详情说明,便于我们理解和选择。
vue ui
注意:路由的哈希模式和历史模式的区别,在 hash模式中路由改变时页面不会刷新,但在历史模式中会刷新https://router.vuejs.org/zh/guide/essentials/history-mode.html